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计算属性,具有缓存