Vue响应式原理全解析

前言

大家好，我是程序员蒿里行。浅浅记录一下面试中的高频问题，请你谈一下Vue响应式原理。必备前置知识，Vue2官方文档中深入响应式原理及Vue3官方文档中深入响应式系统。

什么是响应式

响应式本质是当数据变化的时候，会自动执行一些相关函数。

const apple = {price: 2,amount: 3
}
const totalPrice = () => apple.price * apple.amount;

假设去水果店买苹果，价格为两元，买三个，总价是六元。但是苹果价格调整后，我还得重新计算一遍总价，即调用totalPrice函数。针对我们前端场景，数据的变动，无法直接响应页面变化，还需要做额外操作，如获取DOM，将数据设置到对应节点上。为了减少程序员的开发负担，响应式也就诞生了。

下面的例子实现了极简的响应式，数据变动，会自动更新页面。

<div class="card"><p id="firstName"></p><p id="lastName"></p><p id="age"></p>
</div>
<form><input oninput="user.name = this.value"/><input type="date" onchange="user.birthday = this.value">
</form>


var user = {name: '张三',birthday: '2000-1-1'
};observe(user) // 观察对象// 显示姓氏
function showFirstName () {var firstName = document.getElementById('firstName');firstName.textContent = '姓: ' + (user.name[0] || '');
}// 显示名字
function showLastName () {var lastName = document.getElementById('lastName');lastName.textContent = '名: ' + user.name.slice(1);
}// 显示年龄
function showAge () {var age = document.getElementById('age');var birth = new Date(user.birthday);var now = new Date();age.textContent = '年龄: ' + (now.getFullYear() - birth.getFullYear());
}autoRun(showFirstName)
autoRun(showLastName)
autoRun(showAge)/*** 观察某个对象的所有属性* @param {Object} obj*/
function observe(obj) {for(const key in obj) {let internalValue = obj[key];let funcs = new Set();Object.defineProperty(obj, key, {get() {// 依赖收集，记录：是哪个函数在用我if (window.__func && !funcs.has(window.__func)) {funcs.add(window.__func);}return internalValue;},set(val) {internalValue = val;// 派发更新，运行：执行用我的函数for (const func of funcs) {func();}}});}
}function autoRun(fn){window.__func = fnfn()window.__func = null;
}

为何需要响应式

没有响应式系统时开发者要更新页面，通常需要手动更新DOM，抑或使用模板引擎。下面是最古老的模板引擎mastche.js的用法：

const Mustache = require('mustache');const view = {title: "Joe",calc: () => ( 2 + 4 )
};const template = `<div>{{title}} spends {{calc}}</div>`const output = Mustache.render(template, view);
// <div>Joe spends 6</div>

Vue有自己的模板引擎，它的文本插值使用的也是“Mustache”语法 (即双大括号)。

上面两种方式不仅无法自动更新视图，而且含有大量的节点操作，代码可维护性和可读性差。响应式不仅使得数据变化能够自动更新视图，无需手动操作DOM，而且解耦了数据和视图逻辑，简化了代码结构，提高了代码可维护性和可读性。说了这么多响应式的好处，下面让我们来简单探究下Vue是如何实现一个响应式。

实现响应式

Vue的数据响应式原理是通过数据劫持结合发布-订阅者模式实现的。大概原理如下：

数据劫持：Vue通过Object.defineProperty或Proxy对数据进行劫持。
发布-订阅者模式：Vue使用发布-订阅者模式来实现数据变动时的通知和更新。

Object.defineProperty与Proxy

Object.defineProperty会直接在一个对象上定义一个新属性，或修改其现有属性，并返回此对象。它接收三个参数，分别为

/*** obj: 要定义属性的对象。* prop: 一个字符串或 Symbol，指定了要定义或修改的属性键。* descriptor: 要定义或修改的属性的描述符。*/
Object.defineProperty(obj, prop, descriptor)

Object.defineProperty自定义 setter 和 getter

function Archiver() {let temperature = null;const archive = [];Object.defineProperty(this, "temperature", {get() {console.log("get!");return temperature;},set(value) {temperature = value;archive.push({ val: temperature });},});this.getArchive = () => archive;
}const arc = new Archiver();
arc.temperature; // 'get!'
arc.temperature = 11;
arc.temperature = 13;
console.log(arc.getArchive()); // [{ val: 11 }, { val: 13 }]

Proxy对象用于创建一个对象的代理，从而实现基本操作的拦截和自定义（如属性查找、赋值、枚举、函数调用等）。它接收两个参数：

/*** target: 要使用 Proxy 包装的目标对象（可以是任何类型的对象，包括原生数组，函数，甚至另一个代理）。* handler: 一个通常以函数作为属性的对象，各属性中的函数分别定义了在执行各种操作时代理 p 的行为。*/
const p = new Proxy(target, handler)

Proxy自定义 setter 和 getter

// 目标对象
const target = {name: 'John',age: 30
};// 处理器对象
const handler = {// 自定义 getterget: function(target, property) {console.log(`Getting ${property}`);return target[property];},// 自定义 setterset: function(target, property, value) {console.log(`Setting ${property} to ${value}`);target[property] = value;}
};// 创建代理
const p = new Proxy(target, handler);// 访问属性
console.log(p.name); // 输出：Getting name// 输出：John// 修改属性
p.age = 40; // 输出：Setting age to 40

发布-订阅模式

发布-订阅模式（Publish-Subscribe Pattern）是一种设计模式，用于构建对象之间的解耦和通信。在这种模式中，发布者（Publisher）和订阅者（Subscriber）之间通过一个中介者（或称为主题、事件通道等）进行通信，而不直接相互关联。简而言之，发布者发布事件，而订阅者订阅这些事件。当事件发生时，发布者会将事件发送给所有订阅者。这样，订阅者就能够接收到事件并做出相应的响应。举个例子，比如DOM 事件处理：

<script>// 发布者（Publisher）： HTML 元素。const body = document.body;// 订阅者（Subscriber）： JavaScript 事件处理函数。const handleClick = () => {alert('body clicked!');}const handleDBClick = () => {alert('body dbclicked');}// 订阅（Subscribe）body.addEventListener('click', handleClick);body.addEventListener('dbclick', handleDBClick);// 发布（Publish）： HTML 元素触发了特定事件，所有订阅者的处理函数将被调用
</script>

Vue2响应式代码实现

// 依赖收集器
class Dep {constructor() {this.subscribers = [];}// 添加依赖depend() {if (Dep.target) {// 将当前Watcher添加到依赖列表this.subscribers.push(Dep.target);}}// 通知依赖更新notify() {this.subscribers.forEach(subscriber => {subscriber();});}
}// 全局变量，当前正在计算的Watcher
Dep.target = null;// Watcher
class Watcher {constructor(vm, update) {this.vm = vm;this.update = update;// 设置当前Watcher为Dep的targetDep.target = this.update;// 初始化时触发getter，收集依赖this.update();// 清空Dep的target，防止notify触发时，重复绑定Watcher与DepDep.target = null;}
}// 数据响应式
function defineReactive(obj, key) {const dep = new Dep();let val = obj[key];Object.defineProperty(obj, key, {enumerable: true,configurable: true,get() {console.log('Getter:', key);dep.depend(); // 添加依赖return val;},set(newVal) {if (newVal === val) {return;}val = newVal;console.log('Setter:', key);dep.notify(); // 通知依赖更新}});
}// 递归遍历对象，使其所有属性都变成响应式
function observe(obj) {if (typeof obj !== 'object' || obj === null) {return;}Object.keys(obj).forEach(key => {defineReactive(obj, key);observe(obj[key]);});
}// 创建响应式对象
function reactive(obj) {observe(obj);return obj;
}// 示例
const data = reactive({message: 'Hello, Vue!',
});// Watcher监听message属性
new Watcher(data, () => {console.log('Message Updated:', data.message);
});// 模拟视图中读取数据
console.log('Initial Message:', data.message);// 模拟视图中修改数据
data.message = 'Hello, Reactive!';// 可以在不同地方添加Watcher
new Watcher(data, () => {console.log('Another Watcher:', data.message);
});// 修改数据，触发所有相关Watcher更新
data.message = 'New Message!';

上述代码中Dep 类可以被视为发布者（Publisher），而 Watcher 类则是订阅者（Subscriber），具体来说：

Dep 类中的 depend() 方法用于将当前的 Watcher 添加到依赖列表中，notify() 方法用于通知所有订阅者进行更新。
Watcher 类则在初始化时将自身作为当前的 Dep.target，并在初始化过程中触发响应式数据的读取，从而将自身添加到依赖列表中。当数据变化时，被依赖的属性会触发** Watcher **的更新操作。

在这里插入图片描述

为什么要使用 Dep 和 Watcher 呢？

主要是为了实现数据响应式的机制，具体原因如下：

数据依赖追踪：Dep 负责收集数据与依赖的关系，确保在数据变化时能够准确通知到相应的订阅者（Watcher），实现数据的依赖追踪。
解耦数据与视图：Watcher 订阅数据的变化，但不直接操作视图，使得数据的变化能够更灵活地驱动视图的更新，实现数据与视图的解耦。
避免重复计算：每个响应式属性都有一个对应的 Dep 对象，它可以确保每个 Watcher 在依赖的数据变化时只会被触发一次，避免不必要的重复计算。
惰性求值：只有在真正需要的时候才会进行依赖收集和更新操作，减少不必要的性能开销。

Vue3响应式代码实现

// 响应式核心逻辑
function reactive(obj) {const handlers = {// 拦截对象属性的读取操作get(target, key, receiver) {track(target, key); // 收集依赖return Reflect.get(target, key, receiver);},// 拦截对象属性的设置操作set(target, key, value, receiver) {Reflect.set(target, key, value, receiver);trigger(target, key); // 触发更新return true;}};// 创建并返回代理对象return new Proxy(obj, handlers);
}// 依赖收集相关逻辑
let activeEffect = null; // 当前活跃的响应式副作用// 创建响应式副作用
function effect(callback) {activeEffect = callback; // 将当前回调函数设为活跃的响应式副作用callback(); // 调用一次以收集依赖activeEffect = null; // 调用结束后，将活跃的副作用置空
}// 使用 WeakMap 来存储对象的依赖关系
const targetMap = new WeakMap();// 收集依赖
function track(target, key) {if (!activeEffect) return; // 如果当前没有活跃的响应式副作用，则不进行依赖收集let depsMap = targetMap.get(target); // 获取目标对象的依赖映射if (!depsMap) {depsMap = new Map(); // 若不存在依赖映射，则创建一个新的 Map 对象targetMap.set(target, depsMap); // 将依赖映射存储到 WeakMap 中}let dep = depsMap.get(key); // 获取属性对应的依赖集合if (!dep) {dep = new Set(); // 若不存在依赖集合，则创建一个新的 Set 对象depsMap.set(key, dep); // 将依赖集合存储到 Map 中}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(); // 遍历依赖集合并执行每个副作用函数});}
}// 示例
const state = reactive({count: 0
});// 创建响应式副作用
effect(() => {console.log("Count updated:", state.count);
});console.log("Initial count:", state.count);state.count = 1; // 触发更新state.count = 2; // 触发更新

为何Vue 3 的响应式代码实现比 Vue 2 更简洁？

使用 Proxy 替代了 Object.defineProperty：Vue 3 使用 Proxy 对象来实现响应式，代替了 Vue 2 中复杂的 Object.defineProperty，这样减少了代码量和复杂度。
引入了 WeakMap 优化依赖收集：Vue 3 使用 WeakMap 存储对象的依赖关系，相比于 Vue 2 中使用闭包管理依赖关系，简化了代码。
副作用函数和依赖关系分离：VVue 3 中的副作用函数（effect）和依赖关系（track 和 trigger）分离得更清晰，使得代码结构更加简单易懂。
模块化的设计：Vue 3 的响应式代码实现更模块化，代码结构更清晰易于理解和维护。

结语

响应式是现代前端开发中非常重要的概念，它使得数据与视图能够保持同步，同时也提高了代码的可维护性和可读性。通过深入理解 Vue 的响应式原理，我们可以更加高效地利用 Vue 来构建复杂的前端应用程序。希望本文能够帮助大家更好地理解 Vue 的响应式实现方式，并在面试和实际项目开发中有所帮助。下篇开始从源码层面去分析Vue的响应式原理。

项目附件：点此下载