vue面试题
Liuyi 2020-10-28 面试,Vue
# vue面试题
# v-show v-if 的区别
不同点：v-if显示隐藏是将dom元素整个添加或删除，而v-show隐藏则是为该元素添加css--display:none，dom元素还在。
# vue生命周期
总共分为 8 个阶段创建前_后，载入前_后，更新前_后，销毁前_后。
1. 创建前/后： 在 beforeCreate 阶段，vue 实例的挂载元素 el 还没有。
2. 载入前/后：在 beforeMount 阶段，vue 实例的$el 和 data 都初始化了，但还是挂载之前为虚拟的 dom 节点，data.message 还未替换。在 mounted 阶段，vue 实例挂载完成，data.message 成功渲染。
3. 更新前/后：当 data 变化时，会触发 beforeUpdate 和 updated 方法。
4. 销毁前/后：在执行 destroy 方法后，对 data 的改变不会再触发周期函数，说明此时 vue 实例已经解除了事件监听以及和 dom 的绑定，但是 dom 结构依然存在
# vue里面的虚拟dom是怎么回事？
在js模拟dom节点内容，进行dom操作。减少操作dom的开销。
# vue双向绑定
vue通过发布者订阅跟数据劫持实现(Object.defineProperty).使用defineProperty重写每个属性的 get/set
vue的双向绑定原理及实现 - canfoo#! - 博客园
# vue.nextTick
在下次更新结束后执行延迟回调，在修改数据后立即使用这个方法，获取更新之后的dom
# 组件之间的传值
父组件传给子组件，props
子组件传给父组件，$emit方法传递参数
兄弟组件之间 vuex
# vue-router beforeEach
子路由跳转间进行控制
# vuex
state: 储存数据状态
mutations：定义修改state里面的数据
getters：获取或者过滤一些数据
actions: actions可以理解为通过将mutations里面处里数据的方法变成可异步的处理数据的方法
modules: 项目特别复杂的时候，可以让每一个模块拥有自己的state、mutation、action、getters,使得结构非常清晰，方便管理。
# 自定义指令
directives
# 对keep-alive的了解
是 Vue 内置的一个组件，可以使被包含的组件保留状态，或避免重新渲染。
# vue为什么只有一个根元素, template也必须有且只有一个div
# v-for 跟 v-if 那个优先级高
v-for
# data 为什么必须是函数
每一个vue组件都是一个vue实例，通过new Vue()实例化，引用同一个对象，如果data直接是一个对象的话，那么一旦修改其中一个组件的数据，其他组件相同数据就会被改变。
而data是函数的话，每个vue组件的data都因为函数有了自己的作用域，互不干扰。
# 你怎么理解vue中的diff算法？
# vue当中的性能优化
●路由懒加载
●keep-alive缓存页面
●使用v-show复用DOM
●v-for 遍历避免同时使用 v-if
●长列表性能优化
●事件的销毁
●图片懒加载
●第三方插件按需引入
●无状态的组件标记为函数式组件
●子组件分割
●变量本地化
# vuex的多标签页时状态变化串页面解决思路
# watch 的immediate与created执行顺序比较
watch 加了 immediate: true, 就是watch先执行，否则就是created 先执行
# watch 跟 computed 有什么区别
computed
当一个属性受多个属性影响的时候就需要用到computed
最典型的例子： 购物车商品结算的时候
watch
当一条数据影响多条数据的时候就需要用watch
搜索数据
# vue 的provide 和 inject是如何使用的
# 父组件执行到那个周期子组件开始执行
渲染过程：父组件挂载完成一定是等子组件都挂载完成后，才算是父组件挂载完，所以父组件的mounted在子组件mouted之后。父beforeCreate -> 父created -> 父beforeMount -> 子beforeCreate -> 子created -> 子beforeMount -> 子mounted -> 父mounted