Vue 双向数据绑定原理

什么是双向数据绑定

• 双向数据绑定是Vue.js的一个核心特性。它意味着在视图（View）和数据模型（Model）之间建立了一种双向的关联关系。当数据模型中的数据发生变化时，视图会自动更新以反映这个变化；同样，当用户在视图中进行输入等操作改变了数据时，数据模型也会随之更新。

实现双向数据绑定的核心技术 - Object.defineProperty()

• 在Vue.js 2.x版本中，双向数据绑定的底层实现依赖于Object.defineProperty()方法。这个方法可以直接在一个对象上定义一个新属性，或者修改一个已经存在的属性，并返回这个对象。
• 例如，假设有一个简单的对象obj：

  let obj = {
         };
  let value;
  Object.defineProperty(obj, 'prop', {
         
    get: function() {
         
      return value;
    },
    set: function(newValue) {
         
      value = newValue;
    }
  });
  

• 在这个例子中，obj对象有一个名为prop的属性。通过Object.defineProperty()定义了prop属性的get和set方法。当读取obj.prop时，会调用get方法返回value；当给obj.prop赋值时，会调用set方法更新value的值。
• Vue.js利用这个特性来对数据进行劫持。它会遍历数据对象的所有属性，使用Object.defineProperty()为每个属性添加get和set拦截器。这样，当数据被访问或者修改时，Vue.js可以感知到这些操作。

Vue.js双向数据绑定的具体实现机制 - 数据劫持和发布 - 订阅模式的结合

• 数据劫持（Object.defineProperty）阶段
  • Vue.js在初始化时，会对data选项中的数据进行深度遍历。对于每个属性，使用Object.defineProperty来进行数据劫持。当属性被读取时，get方法会被触发，Vue.js可以在这里收集依赖（即哪些组件或者计算属性等依赖了这个数据）。当属性被修改时，set方法会被触发，Vue.js会在set方法中通知所有依赖这个数据的地方进行更新。
• 发布 - 订阅模式阶段
  • Vue.js内部维护了一个订阅者（Watcher）列表。当数据被读取（在get方法中）时，会将当前的订阅者（Watcher）添加到这个数据的依赖列表中。订阅者（Watcher）可以是视图中的一个DOM元素的渲染函数、一个计算属性等。
  • 当数据发生变化（在set方法中），数据作为发布者会遍历它的订阅者列表，通知每个订阅者进行更新。例如，一个组件的模板中有{ {message}}这样的插值表达式，Vue.js会为这个插值表达式创建一个订阅者（Watcher）。当message数据发生变化时，这个订阅者会收到通知，然后重新渲染组件，从而更新视图。

v - model指令与双向数据绑定的关系

• 在Vue.js的模板语法中，v - model指令是实现双向数据绑定的一个重要方式。v - model本质上是一个语法糖，它在内部结合了v - bind（用于数据绑定，将数据模型的值绑定到视图元素的属性上）和v - on（用于事件绑定，监听视图元素的事件，当事件发生时更新数据模型）。
• 例如，在一个输入框中使用v - model：

  <input v - model="message">
  

• 这等价于：

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

• 其中$event是Vue.js自动传递的事件对象，@input监听了输入框的input事件，当用户在输入框中输入内容时，会更新message数据，而message数据的变化又会通过v - bind更新输入框的value属性，从而实现双向数据绑定。

Vue 3.x中的变化 - 使用Proxy代替Object.defineProperty

• 在Vue 3.x中，双向数据绑定的实现机制有所改变。它使用Proxy来进行数据代理。Proxy是一个更加强大的元编程特性，可以代理整个对象，而不仅仅是对象的单个属性。
• 例如，创建一个简单的Proxy：

  let target = {
         };
  let proxy = new Proxy(target, {
         
    get: function(target, property) {
         
      return target[property];
    },
    set: function(target, property, value) {
         
      target[property] = value;
      return true;
    }
  });
  

• Proxy可以拦截对象的多种操作，包括属性的读取、设置、函数调用等。Vue 3.x利用Proxy的特性来实现数据响应式，相比Object.defineProperty，它具有更好的性能和更简洁的实现方式，尤其是在处理嵌套对象等复杂数据结构时优势更加明显。