Vue高频面试题八股文
1、什么是MVVM
MVVM是一种设计思想。
Model代表模型，也就是数据修改和操作业务层。
View代表UI组件，负责将数据模型转换成UI展现出来。
其中Model和ViewModel之间交互是双向的，也称作双向数据绑定
2、Vue的优点
1、响应式编程：这里指的是Vue会自动对页面中某些数据变化做出响应。
2、组件化开发：也就是将组件进行封装，可以提高效率方便重复使用。
3、虚拟DOM：Jquery和原生JS操作dom的时候需要不停的刷新dom树，导致性能开销大，而虚拟dom
就是预先对JavaScript进行计算，并没有操作真正的dom树。
4、响应式编程：MVVM思想，实现数据的双向绑定，让开发者不用再操作DOM对象，从而有更多时间去
思考业务逻辑。
3、Vue生命周期
生命周期是指，一个VUE从创建到销毁的过程，主要分为8个阶段
1、beforeCreate：是new Vue()之后触发的第一个钩子，此时data、method、computed以及watch
上的数据和方法不能被访问。
2、created：在实例创建完之后发生，此阶段可以使用数据，更改数据，在这里更改数据不会触发
updated函数。
3、beforeMount：此阶段虚拟dom已经创建完成，即可进行渲染。
4、mounted：在挂载完成后发生，此阶段真实的DOM挂载完毕，数据完成双向绑定，可以访问DOM节点，
使用$refs对DOM进行操作。
5、beforeUpdate：发生在更改前，当前阶段组件DOM已完成更新，虚拟DOM重新渲染之前被触发，你
可以在当前阶段进行更改数据，不会造成重渲染。
6、updated：发生在更改完成之后，当前阶段组件DOM已完成更新，避免在此更新数据，因为可能导致
无限循环的额更新。
7、beforeDestroy：发生在实例销毁前，再此我们可以进行收尾工作，比如清除计时器。
8、destoryed：发生在实例销毁之后，这时只剩下DOM空壳了。
3.1 DOM 渲染在哪个周期就已经完成
mounted
3.2 第一次页面加载会触发哪几个钩子
beforeCreate、created、beforeMount、mounted
3.3 多组件（父子组件）中生命周期的调用顺序说
加载渲染过程：父beforeCreate->父created->父beforeMount
->子beforeCreate->子created->子beforeMount- >子mounted->父mounted
4、Vue 实现双向数据绑定原理是什么？
Vue2.x 采用数据劫持结合发布订阅模式（PubSub 模式）的方式，通过 Object.defineProperty 来劫持各个属性的 setter、getter，在数据变动时发布消息给订阅者，触发相应的监听回调。 当把一个普通 Javascript 对象传给 Vue 实例来作为它的 data 选项时，Vue 将遍历它的属性，用 Object.defineProperty 将它们转为 getter/setter。用户看不到 getter/setter，但是在内部它们让 Vue 追踪依赖，在属性被访问和修改时通知变化。 Vue 的数据双向绑定整合了 Observer，Compile 和 Watcher 三者，通过 Observer 来监听自己的 model 的数据变化，通过 Compile 来解析编译模板指令，最终利用 Watcher 搭起 Observer 和 Compile 之间的通信桥梁，达到数据变化->视图更新，视图交互变化（例如 input 操作）->数据 model 变更的双向绑定效果。 Vue3.x 放弃了 Object.defineProperty ，使用 ES6 原生的 Proxy，来解决以前使用 Object.defineProperty 所存在的一些问题。
5、computed、watch、methods的使用场景及其区别
5.1 computed
- 当依赖某些状态（data中的数据）发生改变时，优先选择computed
例如：总价=数量*价格，数量和价格发生改变时候
5.2 watch
- 用来解决beforeUpdate，updated两个钩子里修改状态导致死循环的问题，采用watch
- 监测可能一部改变值的时候
5.3 methods
- 定义事件响应函数
- 定义组件公共处理函数
5.4 区别
5.4.1 computed和methods区别
1、相同点
- 如果作为模板的数据显示，二者都能实现相应的功能，唯一不同的是methods定义的方法需要执行。
2、不同点
- computed 会基于响应数据缓存，methods不会缓存
- diff算法之前先看data里的数据是否发生变化，如果没有变化computed的方法不会执行，但methods里的方法会执行。
- 也就是说difff先看commputed里面的没有变化的方法不会被执行，而methods里面的方法会执行。
5.4.1 computed和watched区别
1、相同点
- 如果做信息展示，二者可以实现同样的功能。不同的是watch可能需要监听更多属性。
2、不同点 - 当想在更新data数据后再次更新数据的时候，建议使用watch来监听data里数据变化
（这种情况不能使用updated生命周期钩子，否则会陷入死循环）
- 使用watch 选项允许我们执行一部操作（访问一个api），限制我们执行操作的频率， 并在我们得到最终结果前，设置中间状态。这些都是计算属性无法做到的。
6 v-model双向绑定的原理是什么？
本质上是value+input方法的语法唐。可以通过model属性的prop和event属性来进行自定义。
7、说一下diff算法(找不同替换)
简单来说diff算法有一下过程：
- 1、同级比较，再比较子节点
- 2、先判断一方有子节点一方没有节点的情况(如果新的children没有子节点，将旧的子节点移除)
- 3、比较都有子节点的情况(核心diff)
- 4、递归比较子节点
8、vue组件参数传递
8.1 解释一下父组件与子组件传值的实现过程 (props和$emit())
- 父组件传给子组件：子组件通过props方法接受数据
- 子组件传值给父组件：使用自定义事件，子组件通过$emit方法触发父组件的方法来传递参数
8.2非父子组件的数据传递，兄弟组件传值是怎样实现的
emit/eventBus
v-if 和v-show的区别
- v-if是直接删除DOM元素 (切换消耗高)
- v-show是直接display:none (初始消耗高)
