vue常见基础面试题

1.vue计算属性的函数名和data中的属性可以同名吗？为什么？

不可以，因为vue会data中的属性和计算属性都挂在到vue实例上，假如它们同名就会发生命名冲突，导致实力中的属性被覆盖，从而引发不可预知的错误

2.v-if和v-show的区别，应用场景分别是什么？

渲染机制不同：v-if当条件为false时，会将元素移除dom，而v-show只是切换css的display属性显示与隐藏

初始渲染开销不同：v-if是惰性的，假如为false则什么都不做，而v-show无论条件是什么都会渲染，所以有更高的初始渲染开销

切换开销不同：v-if切换开销高，是完全的销毁与重建，而v-show则是简单的display切换dom始终保留

功能支持不同：v-if支持v-else和v-else-if分支，可以在template元素上使用，v-show不支持v-else，也不能在template上使用

v-if适合的场景：条件很少改变；为false需要减少不必要的组件渲染和事件监听；想和v-else一起使用；需要在template上使用条件渲染包装多个元素

v-show适合的场景：频繁切换；元素内部结构复杂重新渲染成本高

3.在vue组件中写name选项有什么作用？

方便调试与开发：组件在vue Devtools中显示，会使用name属性作为组件的标识，如果没有设置name就是匿名组件‘Anonymous Component’不够直观

递归组件引用：当组件需要自己调用自己的时候必须要有个name，树形结构的组件常常需要递归调用自身渲染子节点，具体例子菜单与子菜单组件

警告和错误信息中提供更清晰的组件标识，name会标识出问题的组件，方便快速定位问题

与keep-alive配合使用：include和exclude属性可以根据组件的name来决定哪个组件需要被缓存或者排除缓存

4.为什么不建议在vue中同时使用v-if和v-for

优先级问题：vue2中v-for的优先级高于v-if，vue3反之

代码可读性和维护性问题：v-if和v-for都是条件性渲染，同时使用很难看出渲染逻辑

性能问题：v-for本身就是条件渲染，再给每个元素加个v-if，就多了层不必要的渲染层

如何规避：

使用计算属性，先过滤出v-for需要渲染的数据

使用不同的dom隔开v-for和v-if