关于Vue的几个面试题

目录

v-if / v-show的优先级

v-show / v-if

计算属性和watcher的区别

keep-alive

Vue中的key

---

v-if / v-show的优先级

        首先 : 在V2中,v-for的优先级比v-if高

                在V3中,v-if的优先级比v-for高

        v-if  v-show不能一起使用的原因是 : v-for 的优先比v-if高,先循环再做分支判断,一起使用会照成性能浪费,解决方案有两种 : 

                1.把v-if放在v-for的外层

                2.把需要 v-for 的值先在计算属性中过滤一次

v-show / v-if

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

        v-show本质是在控制元素的 css 样式,display: none;，一般元素需要频繁的切换显示隐藏, 用 v-show。因为v-if在频繁切换会大量的创建和删除元素, 消耗性能。

计算属性和watcher的区别

        watch侦听某一数据的变化从而会触发函数,当数据为对象类型时,对象中的属性值变化时需要使用深度侦听deep属性, 也可以在页面第一次加载时使用立即侦听 immdiate 属性

        computed计算属性是触发函数内部 任一依赖项的变化都会重新执行该函数,计算属性有缓存,多次重复使用计算属性是会从缓存中获取返回值 计算属性必须要有return 关键字

        computed 是一种特殊的watcher

keep-alive

        keep-alive是Vue内置的一个组件, 可以用来做组件缓存以提升性能,        

        

        一般这个内置组件可以包裹住动态组件(component)或路由出口的地方,它提供的include属性可以控制缓存哪些组件名, exclude属性控制不缓存哪些组件,它对应的也有两个钩子,分别是激活时触发的activated和失活时触发的deactivated

Vue中的key

        页面上的标签都对应具体的虚拟 dom 对象(虚拟 dom 就是 js 对象), 循环中 ,如果没有唯一 key , 页面上删除一条标签, 由于并不知道删除的是那一条! 所以要把全部虚拟 dom 重新渲染, 如果知道 key 为对应标签被删除掉, 只需要把渲染的 dom 为对应标签去掉即可!

        更准确、更快速、提高效率