Vue2与Vue3双向数据绑定原理及实现差异

文
章
目
录

• 一、双向数据绑定原理
• 二、双向数据绑定的实现方式
• （一）监听器的实现
• （二）Compile模板解析

双向数据绑定是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框架，大家还是要掌握下为好哦。