vue面试题

vue面试题总结

1. v-show和v-if的区别

相同点：v-show和v-if都能控制元素的显示和隐藏。
不同点：
（1）实现本质方法不同
v-show本质就是通过设置css中的display设置为none，控制隐藏
v-if是动态的向DOM树内添加或者删除DOM元素
（2）编译的区别
v-show其实就是在控制css
v-if切换有一个局部编译/卸载的过程，切换过程中合适地销毁和重建内部的事件监听和子组件
（3）编译的条件
v-show都会编译，初始值为false，只是将display设为none，但它也编译了
v-if初始值为false，就不会编译了
（4）v-show只编译一次，后面其实就是控制css，而v-if不停的销毁和创建，故v-show性能更好一点

注意：
v-show实际是操作display:" "或者none，当css本身有display：none时，v-show无法显示

2.为什么使用v-for要有key属性

当vue中使用v-for正在更新已经渲染过的元素序列时，它默认用“就地复用”策略，如果数据项的顺序被改变，vue不是移动DOM元素来匹配数据项的顺序，而是简单复用此处每个元素，并且确保它在特定索引下显示已被渲染过的每个元素

3.如何实现vue组件之间的通讯

父组件使用Prop向子组件传递数据，子组件通过事件向父组件发送消息，使用 v-on 绑定自定义事件

4.beforeDestroy可能会做哪些事情

及时解绑自定义事件，否则造成内存泄漏

5.生命周期包括几个阶段

• 挂载阶段
• 更新阶段
• 销毁阶段

6.created和mounted区别

created把vue的一个实例初始化，只是存在js内存中的变量而已，并没有开始渲染
mounted是真正在网页上绘制完成，大部分情况下都在mounted中操作 使用ajax获取信息或者绑定事件 因为页面已经渲染完成

7.vue高级特性

• v-model
• $nextTick
  进行异步渲染在dom渲染之后再回调，以获取最新的dom节点
• slot
• 动态 异步组件
• keep-alive
• mixin

8.vue原理

• 组件化
• 响应式
• vdom和diff
• 模板编译
• 渲染过程
• 前端路由

未完待续…