深入理解 Vue 3 的双向绑定原理与实现

NMY112

于 2024-08-23 09:31:32 发布

阅读量367

点赞数 16

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/qq_67572731/article/details/141455032

版权

Vue 3 双向绑定原理详解

一、什么是双向绑定？

双向绑定是 Vue.js 中一个重要的特性，它允许在模型数据和视图之间自动同步。当用户在视图中修改输入框的内容时，模型数据会自动更新；同样，当模型数据发生变化时，视图也会随之更新。这种自动的双向同步使得开发者能够更加便捷地管理数据和视图之间的交互。

二、Vue 3 响应式系统概述

Vue 3 中的双向绑定是基于响应式系统实现的。响应式系统的核心在于 `Proxy` 对象，它取代了 Vue 2.x 中的 `Object.defineProperty`，从而带来了更强大的功能和更好的性能。

Vue 3 的响应式系统包括以下几个核心部分：

Reactive：将普通对象转换为响应式对象。
Effect：用于依赖收集和副作用处理的函数。
Track & Trigger：依赖收集和依赖触发的机制。
Ref：对单一值的响应式封装。

三、Vue 3 双向绑定的实现原理

在 Vue 3 中，双向绑定的核心在于响应式数据和模板编译的结合。数据模型通过响应式系统实现数据变化的监听，而模板编译器将模板中使用到的数据与 DOM 进行绑定，当数据变化时，自动更新视图。

1. `Reactive` 和 `Ref`

`Reactive` 是 Vue 3 提供的一个 API，用于创建一个深度响应式对象。它内部使用 `Proxy` 来监听对象的读取和写入操作。当某个响应式属性被读取时，`track` 函数会记录该依赖；当属性被修改时，`trigger` 函数会触发相应的更新操作。

`Ref` 则是对单一值进行响应式封装，它通过一个对象来保持一个值，并且在这个值发生变化时，通知所有依赖它的副作用函数。

import { reactive, ref, effect } from 'vue';

const state = reactive({ count: 0 });
const name = ref('Vue 3');

// 响应式地打印 count 的值
effect(() => {
  console.log(`Count is: ${state.count}`);
});

// 修改 state.count，触发更新
state.count++;

// 修改 name，触发更新
name.value = 'Vue 3.0';

2. `Track` 与 `Trigger`

Vue 3 的响应式系统通过 `track` 和 `trigger` 两个函数来实现依赖收集和触发。

Track：当响应式数据的某个属性被访问时，track 函数会将当前正在运行的副作用函数记录为该属性的依赖。这样当该属性发生变化时，Vue 可以自动重新执行这些副作用函数。
Trigger：当响应式数据的某个属性被修改时，trigger 函数会找到该属性的所有依赖并重新执行，更新与之相关的 DOM。

底层代码实现如下：

let activeEffect;

function effect(fn) {
  activeEffect = fn;
  fn();
  activeEffect = null;
}

const targetMap = new WeakMap();

function track(target, key) {
  if (!activeEffect) return;

  let depsMap = targetMap.get(target);
  if (!depsMap) {
    targetMap.set(target, (depsMap = new Map()));
  }
  let dep = depsMap.get(key);
  if (!dep) {
    depsMap.set(key, (dep = new Set()));
  }
  dep.add(activeEffect);
}

function trigger(target, key) {
  const depsMap = targetMap.get(target);
  if (!depsMap) return;

  const dep = depsMap.get(key);
  if (dep) {
    dep.forEach(effect => effect());
  }
}

function reactive(target) {
  return new Proxy(target, {
    get(target, key, receiver) {
      const result = Reflect.get(target, key, receiver);
      track(target, key);
      return result;
    },
    set(target, key, value, receiver) {
      const oldValue = target[key];
      const result = Reflect.set(target, key, value, receiver);
      if (oldValue !== value) {
        trigger(target, key);
      }
      return result;
    }
  });
}

在这个实现中，`effect` 函数用于收集依赖并执行副作用函数。`track` 函数负责依赖收集，而 `trigger` 函数负责依赖触发。

3. 模板编译与响应式系统的结合

Vue 3 的模板编译器会将模板转换为渲染函数，并在渲染函数中访问响应式数据。当渲染函数首次执行时，Vue 会收集所有与模板相关的响应式数据的依赖，这样当数据发生变化时，Vue 会自动重新执行渲染函数，更新视图。

const template = `<div>{{ state.count }}</div>`;
const render = compile(template);

effect(() => {
  const vnode = render(state);
  // 将 vnode 渲染到 DOM
});