双向数据绑定是Vue的重要功能之一，它让数据与视图之间的交互变得便捷，今天，咱们就来深入探讨一下Vue2和Vue3在双向数据绑定原理与实现上的差异。

一、双向数据绑定原理

Vue实现双向数据绑定的核心依托于MVVM模式，该模式由三部分构成：

• Model（数据层）：在Vue里，它主要负责存储数据，是应用程序中数据的载体。比如说，一个待办事项列表应用中，待办事项的内容、完成状态等数据就存储在Model中。
• View（视图层）：这部分由HTML模板和Vue指令组成，也就是用户直接看到并与之交互的界面。用户在页面上看到的待办事项的展示、输入框等都属于View层。
• ViewModel（业务逻辑层）：它是Vue的核心部分，作为一个Vue实例，就像一座桥梁，连接着Model和View。当Model中的数据发生变化时，ViewModel能够监听到这些变化，并通过相应机制更新View；反之，当用户在View上进行操作（如输入内容、点击按钮等），ViewModel也能捕获这些事件，并将变化同步到Model中。

在双向数据绑定的过程中，当数据发生变化时，监听器（Observer）会触发依赖通知，从而实现对视图层的更新；而当用户操作视图时，解析器（Compiler）会捕获相关事件（例如v-model指令下的输入操作），进而更新数据层。

二、双向数据绑定的实现方式

（一）监听器的实现

在Vue中，监听器用于监听数据变化，主要有数据劫持和发布 – 订阅模式这两种实现方式。

1. 数据劫持
   • Vue2的实现：Vue2利用Object.defineProperty方法来实现数据劫持。这个方法能够拦截对象属性的getter和setter操作。在getter中，会收集依赖，也就是记录哪些地方使用了这个数据；而在数据变化，即setter被调用时，通过触发之前收集依赖过程中记录的更新函数，来实现视图的更新。下面通过一个简单示例来理解：

//示例 const o = {}; let bValue = 38; Object.defineProperty(o, "b", { get() { //收集依赖 return bValue; }, set(newValue) { bValue = newValue; // 触发视图更新 }, }); 

在这个例子里，定义了一个对象o，并通过Object.defineProperty对其属性b进行劫持。当获取b的值时，会执行get函数，在这里可以进行依赖收集；当设置b的值时，set函数被调用，除了更新数据bValue，还可以在这个函数里添加触发视图更新的逻辑。
– Vue3的实现：Vue3则使用Proxy来替代Object.defineProperty。Proxy可以创建一个对象的代理，通过它能够方便地对对象的基本操作（如获取属性、设置属性等）进行拦截和自定义。当调用代理对象的get方法时，会进行依赖收集；调用set方法时，就会进行依赖更新。具体语法为const p = new Proxy(target, handler)，其中target是要使用Proxy包装的目标对象，可以是各种类型的对象，包括数组、函数等；handler是一个包含各种函数的对象，这些函数定义了代理在执行不同操作时的行为。示例如下：

//示例 let products = new Proxy( { browsers: ["Internet Explorer", "Netscape"], }, { get: function (obj, prop) { // 收集依赖 return obj[prop]; }, set: function (obj, prop, value) { obj[prop] = value; // 触发视图更新，表示成功 return true; }, }, ); 

在这个示例中，创建了一个products的代理对象。当访问products的属性时，get函数会被调用进行依赖收集；当设置属性值时，set函数被调用，更新对象属性的同时触发视图更新。
2. 发布 – 订阅模式
Vue.js借助发布 – 订阅模式来管理组件和数据之间的依赖关系。简单来说，当数据发生变化时，依赖于这些数据的视图（可以理解为观察者）会收到通知并进行更新。下面通过一段代码来详细了解：

// 1. 发布者类 class Dep { constructor() { this.subscribers = []; } // 依赖收集 depend() { if (Dep.target &&!this.subscribers.includes(Dep.target)) { this.subscribers.push(Dep.target); } } // 通知更新 notify() { this.subscribers.forEach(sub => sub()); } } // 2. // ①数据劫持 Vue2-Start function defineReactive(obj, key, val) { const dep = new Dep(); Object.defineProperty(obj, key, { get() { dep.depend(); // 收集依赖 return val; }, set(newVal) { val = newVal; dep.notify(); // 触发更新 } }); } // Vue2-End // ②响应式代理 Vue3-Start function reactive(obj) { const deps = new Map(); // 存储每个属性的依赖 return new Proxy(obj, { get(target, key) { let dep = deps.get(key); if (!dep) { dep = new Dep(); deps.set(key, dep); } if (Dep.currentEffect) { dep.depend(Dep.currentEffect); // 收集依赖 } return target[key]; }, set(target, key, value) { target[key] = value; deps.get(key)?.notify(); // 触发更新 return true; } }); } // Vue3-End // 3. 观察者函数 function watch(effect) { Dep.target = effect; // 标记当前依赖 effect(); // 首次执行以触发getter Dep.target = null; // 重置 } // 使用示例 const data = {}; defineReactive(data, 'count', 0); // 订阅数据变化 watch(() => { console.log('Count updated:', data.count); }); // 触发更新 data.count = 1; // 输出: "Count updated: 1" 

在这段代码中，Dep类充当发布者，它维护了一个订阅者数组subscribers。depend方法用于收集依赖，将相关的观察者添加到数组中；notify方法则用于通知所有订阅者进行更新。defineReactive函数是Vue2中结合发布 – 订阅模式实现数据劫持的关键，在get和set操作中分别进行依赖收集和更新通知。Vue3中的reactive函数通过Proxy和Dep实现了类似的功能，不过在依赖管理上使用了Map来存储每个属性的依赖。watch函数则是一个简单的观察者函数示例，用于订阅数据变化并执行相应操作。

（二）Compile模板解析

Compile主要负责实现视图到数据的绑定，其过程分为以下两个阶段：

1. 解析阶段：遍历DOM树，识别各种Vue指令，比如v-model、{{}}插值等。针对每个指令，创建对应的更新函数，并将其绑定到相应的数据依赖上。例如，下面这个处理v-model指令的函数：

function compileInput(node, data, key) { node.value = data[key]; // 初始化值 node.addEventListener('input', (e) => { data[key] = e.target.value; // View → Model }); // 订阅数据变化，更新视图 watch(key, (value) => node.value = value); // Model → View } 

在这个函数里，首先将数据绑定到输入框的初始值。然后，通过监听输入框的input事件，当用户在输入框中输入内容时，将输入的值同步到数据层（View → Model）。同时，通过watch函数订阅数据变化，当数据发生改变时，更新输入框的显示内容（Model → View）。
2. 虚拟DOM优化：Vue会将模板转换为轻量级的虚拟DOM树。当数据发生变化时，会生成新的虚拟DOM，然后通过Diff算法比对新旧虚拟DOM的差异，只对真实DOM中发生变化的部分进行更新。这样做可以大大减少对真实DOM的操作次数，提高页面的性能和渲染效率。

通过对Vue2和Vue3双向数据绑定原理与实现的深入分析，我们可以看到这两个版本在技术实现上的演进和优化。理解这些差异，有助于我们在实际项目中更好地选择和运用Vue框架，大家还是要掌握下为好哦。