双向数据绑定的原理

在vue2中

1其本质是语法糖。v-model即可以作用于表单元素，又可作用于自定义组件，无论是哪一种情况（vue2, vue3），它都是一个语法糖，最终会生成一个属性和一个事件。

原理：在input框里面通过v-bind动态绑定一个value，然后在input框里面通过@input方法去动态获取input输入的值，然后重新给变量赋值就可以了。

在vue3中：

modelValue属性和onUpdate:modelValue事件。

2。监听子组件上的事件update:modelValue，在回调函数中，将从子组件回传的值保存

实际应用场景：收集用户输入的数据。以及父子组件传值中都有用到。

响应式原理

1.是Vue的核心特性之一，数据驱动视图，我们修改数据视图随之响应更新

2.Vue2.x是借助Object.defineProperty()实现的，而Vue3.x是借助Proxy实现的，

3 vue2. 原理：3.1通过Object.defineProperty为对象添加属性，可以设置对象属性的getter和setter函数。（一个一个进行添加getter和setter函数）

3.2 通过点语法获取属性都会执行getter函数，在这个函数中我们会把调用此属性的依赖收集到一个集合中；

3.3 修改属性时，会触发这里定义的setter函数，在次函数中会去通知集合中的依赖更新，做到数据变更驱动视图变更。

4 vue3.中的响应式与2.x的核心思想一致，只不过数据的劫持使用Proxy（一次性的添加getter和setter函数）而不是Object.defineProperty，Proxy相比Object.defineProperty在处理数组和新增属性的响应式处理上更加方便。