Vue的面试题

1.v-if和v-show的区别

        我是这样理解v-if和v-show的,v-if的本质其实就是动态的创建或者删除元素节点.一般不用于频繁的切换,要么是显示,要么是隐藏的情况我都会使用v-if.因为v-if是有惰性的,如果初始值为false的情况下,那么这些元素就直接不创建了,这样就可以大大的节省了初识渲染开销.

        v-show的本质其实就是控制css样式display:none,一般元素用于频繁的切换显示与隐藏,用v-show.因为v-if在频繁切换的时候会大量创建和删除,消耗性能.

2.key值的作用

        key值的主要作用是给元素添加一个唯一的标识符,用于提高vue的渲染性能.当data发生变化时,vue就会使用diff算法来比对新旧虚拟DOM.如果key值相同,才会考虑复用元素.如果key值不同,则会强制性更新元素.一般通过给元素设置key值的id,来保证vue在更新数据的时候,可以最大限度的复用相同的key值元素.

3.key值为什么不能是下标

        当数组长度改变时,其他元素的下标会受到影响.而如果把key值作为下标,由于其他的元素下标变化,vue就会认为你的key值也发生了改变,从而会强制更新你的元素,影响性能.

4.计算属性和侦听器的区别

        1. 功能不同:  计算属性解决模板语法冗余, 侦听器监听data中某一个数据的变化

        2. 计算属性有缓存 , 侦听器没有缓存

        3. 计算属性不支持异步操作,侦听器支持异步操作

        4 计算属性可以新增一个属性, 而侦听器一定要是data中的属性