Vue 的响应式原则与双向数据绑定

,它是 Vue.js 的核心特性之一，一个数据驱动的视图，我们修改数据视图来响应更新，非常优雅。
,Vue2.x 使用 Object.defineProperty() 实现，而 Vue3.x 使用 Proxy 实现。 我们先来看看2.x的实现。,我们通过Object.defineProperty给对象obj添加属性，可以设置对象属性的getter和setter函数。  ,之后，我们每通过点语法获取一个属性，就会执行这里的getter函数。 在这个函数中，我们会将调用这个属性的依赖收集到一个集合中； 当我们给属性赋值时，这个定义就会被触发。 setter函数，在辅助函数中，会通知集合中的依赖更新，让数据变化驱动视图变化。
,3.x的核心思想和2.x一样，只是在数据劫持上使用了Proxy而不是Object.defineProperty，但是在处理数组和响应式处理新属性时Proxy比Object.defineProperty更方便 .,Vue响应式原理的实现细节相信大部分人已经很熟悉了，这里不再赘述。
,双向数据绑定通常是指我们使用的 v-model 指令的实现。 它是 Vue 的一个特性，也可以说是输入事件和值的语法糖。 Vue 通过 v-model 指令为组件添加输入事件处理和值属性赋值。,上面的组件等价于下面的代码。,因此，当我们修改输入框的值时，我们通过v-model绑定的值也会同步修改。 基于以上原理，我们可以轻松实现一个双向数据绑定组件。
,首先，我们定义一个Vue组件：,上面的组件指定我们在 props 中添加 value 属性，并在 value 更新时触发 input 事件。 在创建的 hook 和 watch 中对 localvalue 的赋值是将父组件的状态同步到子组件。
,通过上面的组件定义，我们可以使用 v-model 指令对组件进行双向数据绑定。,以下是实际效果。
,,当然，我们也可以不使用 value 和 input 事件的组合。 为了让组件的定义更加语义化，我们还可以自定义属性和事件，实现双向绑定。 我们可以在组件的模型选项中设置值和事件。 如下：,由上述组件定义。
,相当于：,只是v-model指令帮我们做了上面的事件添加、属性绑定和状态同步操作。
,以上就是今天全部内容，谢谢你的阅读。如果你觉得有用，请记得点赞我，关注我，感谢感谢。