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
- 模板编译
- 渲染过程
- 前端路由
未完待续…