v-model双向绑定原理、vue 的数据双向绑定原理

Vue.js 使用了数据劫持结合观察者模式的方式来实现双向绑定。

1. 数据劫持：Vue 使用 Object.defineProperty() 方法来劫持各个属性的 set 和 get。每个组件实例都有相应的 watcher 对象，它会在组件渲染时监控依赖的数据属性，一旦这些数据属性发生变化，就会通知相关的 watcher。
2. 观察者模式：Vue 为每个数据属性创建一个观察者 Observer，它将开始监控相关依赖，并在属性被访问时收集依赖。
3. 虚拟 DOM：Vue 使用 Virtual DOM 来高效地更新DOM。当数据变化时，相关的 watcher 会触发组件重新渲染，并且 Vue 会diff 虚拟 DOM 树的差异，然后只应用实际变更到真实 DOM。

下面是一个简化的 v-model 双向绑定的实现例子：

Vue.component('custom-input', {
  props: ['value'],
  template: `<input :value="value" @input="updateValue($event.target.value)" />`,
  methods: {
    updateValue(value) {
      this.$emit('input', value);
    }
  }
});
 
new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
});

HTML 部分：

<div id="app">
  <custom-input v-model="message"></custom-input>
  <p>Message is: {{ message }}</p>
</div>

在这个例子中，custom-input 组件接收一个名为 value 的 prop，并在模板中渲染一个 <input> 元素。当输入框的值发生变化时，它会触发一个自定义的 input 事件，并将新值作为参数传递。在父组件中，v-model="message" 实现了与子组件的值的双向绑定。