掌握 Vue 双向绑定原理，轻松应对面试难题！

福瑞瑞
200 阅读4分钟

在前端开发的面试中，Vue 的双向绑定原理是一个高频考点。很多JYM面对这个问题时，往往因为理解不够深入而回答得不够完善，从而错失了宝贵的机会。本文将深入剖析 Vue 双向绑定的原理，从 Vue 2 到 Vue 3 的实现方式进行详细对比，并给出应对面试的完美回答策略。

首先我们先了解一下双向绑定的含义

一、双向绑定基础概念

双向绑定是一种数据的绑定方式，它能够实现数据的变化自动更新到视图上，同时视图的变化也能自动更新到数据中。简单来说，就是数据和视图之间建立了一种实时同步的关系。例如，在一个表单中，当用户输入内容时，表单绑定的数据会随之更新；而当数据在代码中被修改时，表单中的显示内容也会相应改变。

二、Vue 2 双向绑定原理详解

  1. Vue 2 利用 JavaScript 的 Object.defineProperty() 方法来实现数据劫持。这个方法可以直接在一个对象上定义一个新属性，或者修改一个已经存在的属性，并返回这个对象。

下面是一个简单的示例：

function defineReactive(obj, key, val) {
    Object.defineProperty(obj, key, {
        enumerable: true,
        configurable: true,
        get() {
            // 依赖收集
            console.log(`get ${key}: ${val}`);
            return val;
        },
        set(newVal) {
            if (val === newVal) return;
            val = newVal;
            // 通知订阅者数据更新
            console.log(`set ${key}: ${newVal}`);
        }
    });
}

const data = {
    message: 'Hello'
};
defineReactive(data, 'message', data.message);

在这个示例中，defineReactive 函数将 data 对象的 message 属性转换为了具有 getter 和 setter 的属性。当访问 data.message 时，会触发 getter 函数；当修改 data.message 时，会触发 setter 函数。

  1. 在 Vue 2 中，依赖收集和发布更新是通过 Dep（依赖管理器）和 Watcher（订阅者）来实现的。
  • Dep：是一个管理依赖的类，它维护一个存储 Watcher 实例的数组。
  • Watcher：是一个订阅者，当它访问数据属性时，会触发 getter，此时将该 Watcher 实例添加到该属性的 Dep 依赖列表中。

下面是 Dep 和 Watcher 的简单实现

class Dep {
    constructor() {
        this.subs = [];
    }

    addSub(sub) {
        this.subs.push(sub);
    }

    notify() {
        this.subs.forEach(sub => sub.update());
    }
}

class Watcher {
    constructor(vm, expOrFn, cb) {
        this.vm = vm;
        this.cb = cb;
        this.getter = parse(expOrFn);
        this.value = this.get();
    }

    get() {
        Dep.target = this;
        const value = this.getter.call(this.vm, this.vm);
        Dep.target = null;
        return value;
    }

    update() {
        const oldValue = this.value;
        this.value = this.get();
        this.cb.call(this.vm, this.value, oldValue);
    }
}

function parse(path) {
   // -----
}
  1. 在模板编译阶段，Vue 会解析模板中的指令（如 v-model），将指令绑定的表单元素与数据属性关联起来。

例如，对于一个 input 元素使用 v-model 指令：<input v-model="message">

Vue 会在 input 元素的 input 事件中监听用户输入的变化，并更新数据属性 message；同时，当 message 属性发生变化时，会更新 input 元素的 value 属性，从而实现双向绑定。

三、Vue 3 双向绑定原理对比

  1. Proxy 代理机制 Vue 3 采用了 ES6 的 Proxy 对象来实现响应式系统。Proxy 可以用于创建一个对象的代理，从而实现对对象的访问拦截和操作。

下面是一个使用 Proxy 实现响应式数据的示例：

function reactive(target) {
    return new Proxy(target, {
        get(target, key, receiver) {
            const res = Reflect.get(target, key, receiver);
            // 依赖收集
            console.log(`get ${key}: ${res}`);
            return res;
        },
        set(target, key, value, receiver) {
            const oldValue = target[key];
            const result = Reflect.set(target, key, value, receiver);
            if (result && oldValue!== value) {
                // 通知更新
                console.log(`set ${key}: ${value}`);
            }
            return result;
        }
    });
}

const data = {
    message: 'Hello'
};
const reactiveData = reactive(data);

与 Object.defineProperty() 相比，Proxy 可以直接拦截对象的属性访问和修改操作，不需要对每个属性进行单独的处理，因此可以更方便地实现深层次的响应式数据。

  1. 依赖收集与触发更新优化

Vue 3 在依赖收集和触发更新方面进行了优化。它使用 WeakMap 来存储依赖关系，避免了内存泄漏的问题。在 get 拦截器中进行依赖收集，将依赖存储在全局的 WeakMap 中；在 set 拦截器中触发更新，通知所有依赖该属性的副作用函数重新执行。

  1. 组合式 API 与双向绑定

Vue 3 引入了组合式 API，开发者可以更灵活地使用响应式数据。通过 ref()、computed() 等函数，可以创建不同类型的响应式数据，并且可以在 setup() 函数中自由组合和使用这些数据。

<template>
    <input v-model="message">
    <p>{{ message }}</p>
</template>

<script setup>
import { ref } from 'vue';

const message = ref('Hello');
</script>

在这个示例中，使用 ref() 函数创建了一个响应式数据 message，并通过 v-model 指令实现了双向绑定。

总结

Vue 的双向绑定原理是 Vue 框架的核心特性之一，从 Vue 2 到 Vue 3 的实现方式有了很大的改进。理解双向绑定的原理不仅有助于我们更好地使用 Vue 进行开发，也能让我们在面试中脱颖而出。希望本文能帮助你深入理解 Vue 双向绑定的原理，并在面试中给出完美的回答。

如果你在学习过程中有任何疑问或者想分享自己的经验，欢迎在评论区留言交流！

avatar
文章
阅读
粉丝