VUE数据的双向绑定

vue

VUE2数据双向绑定的原理

数据劫持（Data Observation）：Vue 在初始化数据时，会对数据对象的每个属性使用 Object.defineProperty 方法进行劫持。这样一来，当访问或修改数据时，Vue 就能够监听到这些操作。

Getter 和 Setter：在劫持过程中，为每个属性添加了 getter 和 setter。Getter 负责侦听属性的读取操作，而 Setter 负责侦听属性的修改操作。 Getter 和 Setter

依赖追踪（Dependency Tracking）：Vue 在内部维护着一个称为「依赖」的数据结构。每个属性都有一个对应的依赖列表。当属性被访问时，Watcher（后面会介绍）会被收集进属性的依赖列表中，表示该属性依赖于这些 Watcher。

Watcher：Watcher 是一个订阅者，它订阅属性的变化。在 Vue 中，一个组件的渲染过程会产生一个 Watcher，负责收集模板中所用到的属性的依赖。 观察家

派发更新（Dispatching Updates）：当数据发生变化时，setter 会被触发，然后通知对应属性的所有 Watcher 进行更新。这些 Watcher 就会负责更新视图，确保视图与数据保持同步。

视图更新：一旦 Watcher 接收到数据变化的通知，它就会触发视图的更新操作。这样就完成了数据的双向绑定，即当数据发生变化时，视图会自动更新；反过来，用户的输入操作也会更新数据。
代码展示
html

<div id="app">
  <input type="text" v-model="message">
  <p>{
  { message }}</p>
</div>

javascript

// Vue构造函数
function Vue(options) {
   
  this.data = options.data;

  // 将data对象转换成响应式对象
  observe(this.data);

  // 模板解析和编译
  compile(document.getElementById(options.el), this.data);
}

// 将对象转换为响应式对象
function observe(data) {
   
  // 遍历data对象的属性
  for (let key in data) {
   
    let value = data[key];

    // 为每个属性创建一个Dep对象（用于依赖收集）