web前端高频问答题

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 。