web前端高频问答题

缺乏、安全感 2022-12-27 08:29 115阅读 0赞

**vue操作dom元素的方法**  
**1.原生js操作dom**  
const dom = getElementById(‘box’)

**2.vue官方方法：ref**  
vue中的ref是把当前dom元素进行标记 ，只要通过 this.$refs就可以获取到  
例如:  
< div class=“set” ref=“up”>  
.set是我们要操作的dom对象，它的ref昵称为up

在vue中调用这个dom对象的具体写法为  
methods:\{  
this.$refs.addAlert.style.display = “block”;  
\}

**Vue中进行路由跳转的方式**

**第一种：通过标签跳转，**  
具体写法为:  
  
第二种：通过js跳转，定义点击事件进行跳转  
<button @click=“to()”>

methods:\{  
to()\{  
this.$router.push(`[具体跳转的URL地址]`)  
\}  
\}

**vue中的key值属性代表什么?**  
key的作用主要是为了高效的更新虚拟DOM  
另外vue中在使用相同标签名元素的过渡切换时，也会使用到key属性，其目的也是为了让vue可以区分它们。  
而在v-for中使用key时:  
为了给 Vue 一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，所以为每项提供一个唯一 key 属性。理想的 key 值是每项都有唯一 id。

**vue中的watch 和computed的区别:**  
**1.computed计算属性：**  
支持缓存，只有依赖数据发生变化，才会重新进行计算。不支持异步，当computed内有异步操作时无效，无法监听数据的变化。computed属性会默认走缓存，计算属性是基于他们的响应式依赖进行缓存的，也就是基于data中声明过的数据通过计算得到。如果一个属性是由其它的计算属性而来的，这个属性依赖其他属性，是一个多对一或者一对一，一般用computed  
**2.侦听属性watch:**  
不支持缓存，数据变化，直接会触发相应的操作；watch支持异步；监听的函数接受两个参数，第一个参数是新值，第二个是旧值，当一个属性发生变化时，需要执行对应的操作；一对多。

**new操作符具体干了什么呢?**  
（1）创建一个空对象，并且 this 变量引用该对象，同时还继承了该函数的原型。  
（2）属性和方法被加入到 this 引用的对象中。  
（3）新创建的对象由 this 所引用，并且最后隐式的返回 this 。