金三银四——每日一学，必问面试题！v-model原理在vue2.X中，v-model是通过object.defineP

v-model原理

在vue2.X中，v-model是通过object.defineProperty()方法转化成getter/setter，当数据发生变化时，setter函数会通知相关的视图进行更新，从而实现数据双向绑定。

在vue3.X中，响应式设计采用了proxy代理来实现。

在 JavaScript 中，每个对象都有一个关联的原型（prototype）。原型是一个对象，其他对象可以通过原型实现属性和方法的继承。

当通过对象访问一个属性或者方法时，javescript引擎首先在该对象自身找，如果找不到，就会通过_proto_去对象的原型中寻找对应的属性或方法。如果还找不到，会继续往原型的原型中寻找，直到找到该属性或方法，或者最终达到原型链的末端。这个过程就是原型链。

vue2：双向数据绑定是利用ES5的一个APIObject.definePropert() 对数据进行劫持，结合发布订阅模式的方式来实现的。

vue3：使用了ES6的Proxy API对数据代理。相比vue2.x，使用proxy的优势如下：

  -   defineProperty只能监听某个属性，不能对全对象监听
  -   可以省去for in，闭包等内容来提升效率(直接绑定整个对象即可)
  -   可以监听数组，不用再去单独的对数组做特异性操作vue3.x可以检测到数组内部数据的变化。

是否支持碎片

vue2：不支持 vue3：支持
API类型不同

vue2：vue2使用选项类型api，选项型api在代码里分割了不同的属性：data,computed,methods等。

vue3：vue3使用合成型api，新的合成型api能让我们使用方法来分割，相比于旧的api使用属性来分组，这样代码会更加简便和整洁。
定义数据变量和方法不同

vue2：vue2是把数据放入data中，在vue2中定义数据变量是data(){} ，创建的方法要在methods:{} 中。

vue3：，vue3就需要使用一个新的setup()方法，此方法在组件初始化构造的时候触发。使用以下三个步骤来建立反应性数据：
```
 -   从vue引入**reactive**；
 -   使用**reactive()**  方法来声明数据为响应性数据；
 -   使用setup()方法来返回我们的响应性数据，从而**template**可以获取这些响应性数据。
```
生命周期钩子函数不同

vue2中的生命周期：

-beforeCreate 组件创建之前
-created 组件创建之后
-beforeMount 组价挂载到页面之前执行
-mounted 组件挂载到页面之后执行
-beforeUpdate 组件更新之前
-updated 组件更新之后

vue3中的生命周期：

-setup 开始创建组件
-onBeforeMount 组价挂载到页面之前执行
-onMounted 组件挂载到页面之后执行
-onBeforeUpdate 组件更新之前
-onUpdated 组件更新之后

父子传参不同

vue2：父传子，用props,子传父用事件 Emitting Events。在vue2中，会调用this.$emit然后传入事件名和对象。

vue3：父传子，用props,子传父用事件 Emitting Events。在vue3中的setup()中的第二个参数content对象中就有emit，那么我们只要在setup()接收第二个参数中使用分解对象法取出emit就可以在setup方法中随意使用了。
指令与插槽不同

vue2：vue2中使用slot可以直接使用slot；v-for与v-if在vue2中优先级高的是v-for指令，而且不建议一起使用。

vue3：vue3中必须使用v-slot的形式；vue3中v-for与v-if,只会把当前v-if当做v-for中的一个判断语句，不会相互冲突；vue3中移除keyCode作为v-on的修饰符，当然也不支持config.keyCodes；vue3中移除v-on.native修饰符；vue3中移除过滤器filter。
main.js文件不同

vue2：vue2中我们可以使用pototype(原型) 的形式去进行操作，引入的是构造函数。

vue3：vue3中需要使用结构的形式进行操作，引入的是工厂函数；vue3中app组件中可以没有根标签

Vuex 是一个专门为 Vue.js 应用程序开发的状态管理模式。
它采用集中式存储管理应用的所有组件状态，并以相应的规则保证状态以一种可预测的方式发生变化。

state：它是单一状态树，用于存储整个应用的状态数据。在Vuex中，所有的状态都存储在state中，它是一个对象，包含了应用层级的状态(数据存放)
getters：Getters类似于(计算属性)，它们允许你从state中派生出一些状态。Getters的返回值会根据它的依赖被缓存起来，只有当它的依赖值发生了改变才会被重新计算。
mutations:Mutations用于提交状态更改。每个mutation都有一个字符串的事件类型和一个回调函数。当我们需要改变state的值时，就在回调函数中改变。要执行这个回调函数，我们需要使用store.commit方法。(同步操作)
actions:Actions类似于mutations，不同之处在于Actions可以包含任意(异步操作)，并且Actions提交的是mutations，而不是直接变更状态。在页面中调用Action需要使用store.dispatch方法。
modules:Modules是Vuex的(模块化)特性，它允许将store分割成多个模块，每个模块拥有自己的state、mutation、action、getter，甚至是嵌套子模块，这使得结构非常清晰，方便管理。