Vue面试题总结02

1. v-show和v-if的异同点

相同点: 控制元素的 显示/隐藏

不同点:

(1)原理不同

v-if原理是动态设置元素 新增/删除

v-show原理是设置元素css样式 display="none";

(2)编译不同

v-if 满足条件才会加载,不满足不加载

v-show 一定会加载

(3)性能不同

频繁切换v-show性能高于v-if

2. 说出至少4个Vue指令及作用

v-for 根据数组的个数, 循环数组元素的同时还生成所在的标签

v-show 显示内容

v-if 显示与隐藏

v-else 必须和v-if连用 不能单独使用 否则报错

v-bind 动态绑定 作用： 及时对页面的数据进行更改, 可以简写成:分号

v-on 给标签绑定函数，可以缩写为@，例如绑定一个点击函数 函数必须写在methods里面

v-text 解析文本

v-html 解析html标签

3. 为什么避免v-for和v-if在一起使用

Vue 处理指令时，v-for 比 v-if 具有更高的优先级, 虽然用起来也没报错, 但是性能不高, 如果你有5个元素被v-for循环, v-if也会分别执行5次.

4. Vue中:key作用, 为什么不能用索引

:key是给v-for循环生成标签颁发唯一标识的, 用于性能的优化

因为v-for数据项的顺序改变，Vue 也不会移动 DOM 元素来匹配数据项的顺序，而是就地更新每个元素

:key如果是索引, 因为索引是连续的, 如果删除其中某一个, 会导致最后一个被删除

当我们再删除的时候, :key再根据数据来把新旧的dom对比时, 删除:key不存在的对应的标签(添加也是一样的插入到指定位置, 别的都不会动)

5. 数组更新有的时候v-for不渲染

因为vue内部只能监测到数组顺序/位置的改变/数量的改变, 但是值被重新赋予监测不到变更, 可以用 Vue.set() / vm.$set()