Vue.js 是一个流行的前端框架，其核心特性之一就是响应式系统。Vue3 在响应式系统方面进行了重大改进，引入了 Proxy 和 Reflect 等现代 JavaScript 特性，使得响应式系统更加高效和灵活。本文将深入分析 Vue3 的响应式机制源码，探讨其实现原理和设计思路。
Vue3 的响应式系统主要依赖于以下几个核心概念：
计算
安全
数据库
网络和加速
企业服务
reactive 函数创建的响应式对象，其属性变化会自动触发视图更新。ref 函数创建的响应式引用，通常用于包装基本类型的值。effect 函数创建的副作用函数，当依赖的响应式数据发生变化时，副作用函数会自动重新执行。Vue3 的响应式系统设计目标主要包括：
Proxy 和 Reflect 实现高效的属性访问和拦截。reactive 函数的实现reactive 函数是 Vue3 响应式系统的核心之一，用于创建响应式对象。其实现主要依赖于 Proxy 和 Reflect。
function reactive(target) {
// 如果 target 已经是响应式对象，则直接返回
if (target && target.__v_isReactive) {
return target;
}
// 创建 Proxy 对象
const proxy = new Proxy(target, {
get(target, key, receiver) {
// 拦截属性访问
const res = Reflect.get(target, key, receiver);
// 收集依赖
track(target, key);
// 如果属性值是对象，则递归创建响应式对象
return isObject(res) ? reactive(res) : res;
},
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;
},
deleteProperty(target, key) {
// 拦截属性删除
const hadKey = hasOwn(target, key);
const result = Reflect.deleteProperty(target, key);
// 触发更新
if (hadKey) {
trigger(target, key);
}
return result;
},
});
// 标记为响应式对象
proxy.__v_isReactive = true;
return proxy;
}
ref 函数的实现ref 函数用于创建响应式引用，通常用于包装基本类型的值。其实现主要依赖于 Reactive 和 Effect。
function ref(value) {
// 创建响应式对象
const r = reactive({
value,
});
// 标记为 ref 对象
r.__v_isRef = true;
return r;
}
effect 函数的实现effect 函数用于创建副作用函数，当依赖的响应式数据发生变化时，副作用函数会自动重新执行。其实现主要依赖于 Reactive 和 Scheduler。
function effect(fn, options = {}) {
// 创建副作用函数
const effect = createReactiveEffect(fn, options);
// 立即执行副作用函数
if (!options.lazy) {
effect();
}
return effect;
}
function createReactiveEffect(fn, options) {
const effect = function reactiveEffect() {
// 标记当前正在执行的副作用函数
activeEffect = effect;
// 执行副作用函数
const result = fn();
// 清除标记
activeEffect = undefined;
return result;
};
// 设置副作用函数的选项
effect.options = options;
effect.deps = [];
return effect;
}
依赖收集是响应式系统的核心机制之一，用于跟踪哪些副作用函数依赖于哪些响应式数据。Vue3 通过 track 函数实现依赖收集。
function track(target, key) {
// 如果没有正在执行的副作用函数，则直接返回
if (!activeEffect) {
return;
}
// 获取 target 的依赖映射
let depsMap = targetMap.get(target);
if (!depsMap) {
depsMap = new Map();
targetMap.set(target, depsMap);
}
// 获取 key 的依赖集合
let dep = depsMap.get(key);
if (!dep) {
dep = new Set();
depsMap.set(key, dep);
}
// 将当前副作用函数添加到依赖集合中
if (!dep.has(activeEffect)) {
dep.add(activeEffect);
activeEffect.deps.push(dep);
}
}
触发更新是响应式系统的另一个核心机制，用于在响应式数据发生变化时，通知所有依赖的副作用函数重新执行。Vue3 通过 trigger 函数实现触发更新。
function trigger(target, key) {
// 获取 target 的依赖映射
const depsMap = targetMap.get(target);
if (!depsMap) {
return;
}
// 获取 key 的依赖集合
const dep = depsMap.get(key);
if (!dep) {
return;
}
// 遍历依赖集合，执行副作用函数
const effects = new Set(dep);
effects.forEach(effect => {
if (effect.options.scheduler) {
effect.options.scheduler(effect);
} else {
effect();
}
});
}
Vue3 的响应式系统支持懒执行（lazy execution），即副作用函数不会立即执行，而是在需要时才执行。这种机制可以有效减少不必要的计算和渲染。
function effect(fn, options = {}) {
const effect = createReactiveEffect(fn, options);
// 如果 options.lazy 为 true，则不立即执行副作用函数
if (!options.lazy) {
effect();
}
return effect;
}
Vue3 的响应式系统支持调度器（scheduler），用于控制副作用函数的执行时机。调度器可以用于实现批量更新、异步更新等高级功能。
function trigger(target, key) {
const depsMap = targetMap.get(target);
if (!depsMap) {
return;
}
const dep = depsMap.get(key);
if (!dep) {
return;
}
const effects = new Set(dep);
effects.forEach(effect => {
// 如果存在调度器，则使用调度器执行副作用函数
if (effect.options.scheduler) {
effect.options.scheduler(effect);
} else {
effect();
}
});
}
computed 函数的实现computed 函数用于创建计算属性，其实现主要依赖于 Reactive 和 Effect。
function computed(getter) {
let value;
let dirty = true;
const runner = effect(getter, {
lazy: true,
scheduler() {
if (!dirty) {
dirty = true;
trigger(runner, 'value');
}
},
});
const obj = {
get value() {
if (dirty) {
value = runner();
dirty = false;
}
track(runner, 'value');
return value;
},
};
return obj;
}
watch 函数的实现watch 函数用于监听响应式数据的变化，其实现主要依赖于 Reactive 和 Effect。
function watch(source, cb, options = {}) {
let getter;
if (isFunction(source)) {
getter = source;
} else {
getter = () => traverse(source);
}
let oldValue;
const job = () => {
const newValue = runner();
cb(newValue, oldValue);
oldValue = newValue;
};
const runner = effect(getter, {
lazy: true,
scheduler: job,
});
if (options.immediate) {
job();
} else {
oldValue = runner();
}
}
Vue3 的响应式系统广泛应用于组件状态管理，包括 data、props、computed 等属性的响应式处理。
export default {
data() {
return {
count: 0,
};
},
computed: {
doubleCount() {
return this.count * 2;
},
},
methods: {
increment() {
this.count++;
},
},
};
Vue3 的响应式系统也可以用于全局状态管理，例如 Vuex 的状态管理库。
const store = reactive({
state: {
count: 0,
},
mutations: {
increment(state) {
state.count++;
},
},
});
export default store;
Vue3 的响应式系统通过 Proxy 和 Reflect 实现了高效的属性访问和拦截，通过 track 和 trigger 实现了依赖收集和触发更新，通过 effect 和 scheduler 实现了副作用函数的管理和调度。这些机制共同构成了 Vue3 响应式系统的核心，为 Vue3 的高效性和灵活性提供了坚实的基础。
通过本文的分析，我们深入了解了 Vue3 响应式系统的实现原理和设计思路，希望能够帮助读者更好地理解和使用 Vue3 的响应式系统。
亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
