vue相关面试题（持续更新）

vue面试题

v-if和v-show区别

v-if相当于添加或删除dom元素

v-show则是通过控制该元素的显示隐藏，display:none

不频繁切换使用v-if,频繁切换使

用v-show，

v-if有更高的切换消耗；v-show有更高的初始渲染消耗

v-if和v-for不能同时使用原因

v-for会遍历一整个列表的数据,当列表数据很多时，就会造成性能低，页面可能卡顿的现象出现。

<div v-for="item in list" 
     v-if="item .active" 
     :key="item.id">
</div>

解决方法：

1.使用空标签 template，让for循环在template上面；

<template v-for="item in list" >
   <div v-if="active" :key="item .id">
        {{item .name}}
    </div >
</template>

2.使用compted先计算完属性再去渲染模版

computed: {
 
    activeIndex: function () {
 
        return this.list.filter( (item)=> {
            return item.name;
        })
 
    }
 
}

v-for 的优先级比 v-if 更高

原文链接

v-for为什么要用key

虚拟节点和diff算法

key属性主要用在Vue的虚拟DOM算法中，在新旧node节点中辨识vnode

diff的过程就是调用名为patch的函数，比较新旧节点，一边比较一边给真实的DOM打补丁。

在采取diff算法比较新旧节点的时候，比较只会在同层级进行, 不会跨层级比较。深度优先

key是一种diff优化策略，可以根据key，更快的找到对应的vnode节点

使用key，能够减少页面对DOM的操作

key代表唯一id，能够更加高效地更新虚拟DOM

计算属性和监听属性区别

当我们data中的数据发生改变后需要进行数据计算就可以用到计算属性computed

当用户在页面改变数据时，需要通知给后台服务器，我们就可以用到监听属性watch。

computed： 同步处理数据，有缓存属性，依赖于其他数据，一个数据依赖于一个或者多个数据。

watch：没有缓存属性，不依赖数据，当数据改变时触发，当需要在数据变化时执行异步或开销较大的操作。

computed计算属性，具有缓存

父子组件钩子函数执行顺序