vue2双向绑定原理

在 Vue 2 中，双向绑定的原理是基于 Object.defineProperty() 方法实现的。

具体来说，当我们在组件中使用 v-model 指令时，Vue 会将其转换为一个带有 value 和 input 事件的属性。例如：

<input v-model="message" />

会被转换为：

<input :value="message" @input="message = $event.target.value" />

其中，:value 绑定了 message 数据的值，@input 监听了 input 事件并将输入框的值赋值给 message。这样，当我们改变输入框中的值时，message 数据也会相应地发生变化。

在底层实现中，Vue 2 使用 Object.defineProperty() 方法将组件实例的 data 对象中的每个属性转换为 getter 和 setter。当我们访问或修改 data 中的数据时，会触发相应的 getter 或 setter，并且在 setter 中进行依赖收集和更新操作，从而实现双向绑定。

具体来说，当我们访问 data 中的某个属性时，会触发该属性的 getter，在 getter 中会将当前组件实例的 Watcher 对象添加到该属性的依赖列表中。当该属性的值发生变化时，setter 会通知依赖列表中的 Watcher 对象进行更新操作，从而触发组件的重新渲染。

需要注意的是，在 Vue 2 中，v-model 指令只能用于表单元素上，如 input、textarea、select 等。如果需要在其他元素上实现双向绑定，可以使用自定义指令或者组件来实现。