VUE 面试题
整理 VUE 相关的常见面试题
介绍一下 VUE
介绍一下 VUEX
VUE 2.X 和 3.0 的区别
（1）数据监听方式变化
VUE 2.X 使用 ES5 的 Object.defineProperty() 的 get() 和 set(newValue) 实现，VUE 3.0 基于 Proxy 监听实现，同时更为强大：
- 可以检测属性的新增和删除
- 可以检测数组索引的变化和 length 的变化
- 支持 Map、Set、WeakMap 和 WeakSet
优点：速度加倍，内存占用减半。
（2）体积更小
支持 Tree Shaking，内置组件、内置指令按需引入。
（3）速度更快
参考：vue3.0和vue2.x的区别、Vue 3.0 和 Vue 2.0的对比以及Vue 2.0精讲以及Vue全家桶精讲
VUE 的生命周期
VUE 数据双向绑定原理
VUE 采用发布者-订阅者模式的方式来实现双向绑定。
（1）视图更新数据：
input 标签监听 input 事件即可。
（2）数据更新视图：
Object.defineProperty() 监听数据变化，通过消息订阅器发布消息，订阅者收到消息执行相应的操纵 DOM 的函数，从而更新视图。
VUE 的路由机制
- hash 和 history 区别
v-if 和 v-show 的区别
v-show：无论值是true还是false，元素都会存在于 HTML 代码中。v-if：只有值为true的时候，元素才会存在于 HTML 代码中。
VUE 组件通信方式
- 引申：如果有多层的父子组件，用什么通信
VUE 的 v-for 中的 key 的作用
一句话回答：为了高效的更新虚拟 DOM。
nextTick 原理与应用场景
Vue 在修改数据后，视图不会立刻更新，而是等同一事件循环中的所有数据变化完成之后，再统一进行视图更新。
//改变数据
vm.message = 'changed'
//想要立即使用更新后的DOM。这样不行，因为设置message后DOM还没有更新
console.log(vm.$el.textContent) // 并不会得到'changed'
//这样可以，nextTick里面的代码会在DOM更新后执行
Vue.nextTick(function(){
console.log(vm.$el.textContent) //可以得到'changed'
})
应用场景：需要在 DOM 视图更新之后，基于新的 DOM 视图进行操作。
VUE 的虚拟 DOM
- VUE 是如何实现 VDOM 的
- vue中keep-alive缓存的真实结点还是虚拟结点
- vue改变组件的key值, 原来的组件会被销毁么
- 为什么要用虚拟结点
- diff 原理