庖丁解牛之vue reactive源码解析（三）

前端

2023-09-05 05:39:22

揭秘 Vue.js Reactive 源码

简介

在 Vue.js 框架中，响应式系统扮演着至关重要的角色，它能自动更新视图，从而响应数据变化。这个响应式系统的核心正是 reactivity 模块。本文将深入剖析 reactivity 模块的源码，揭示其内部运作机制。

模块构成

reactivity 模块包含以下主要功能：

reactive 和 shallowReactive 函数：将普通对象转换成响应式对象。
toRaw 函数：将响应式对象转换成普通对象。
effect 和 stop 函数：用于跟踪响应式对象属性变化并执行相应函数。
shallowReadonly 和 readonly 函数：将普通对象转换成只读的响应式对象。
markRaw 函数：标记对象为原始对象，使其不会被响应式处理。

reactive 函数

reactive 函数是 reactivity 模块的核心。它利用 JavaScript 中的 Proxy 对象来拦截对象属性的访问和修改，从而实现响应式更新。

Proxy 对象的 handler 包含各种拦截方法，如 get、set 和 deleteProperty。当访问响应式属性时，会触发 get 方法，它负责返回最新属性值并触发响应式更新。当修改响应式属性时，会触发 set 方法，它负责保存新属性值并触发响应式更新。

effect 函数

effect 函数可用于跟踪响应式对象属性的变化并执行相应函数。它内部使用依赖收集器来收集属性依赖关系，并使用更新队列来存储需要执行的函数。当响应式属性发生变化时，依赖收集器会通知更新队列，从而执行存储的函数，实现响应式更新。

代码示例

// 创建一个响应式对象
const person = reactive({
  name: 'John',
  age: 30
});

// 跟踪 name 属性的变化
effect(() => {
  console.log(`Name: ${person.name}`);
});

// 修改 name 属性
person.name = 'Jane'; // 触发响应式更新，调用 effect 函数

// 停止跟踪 name 属性的变化
stop(); // 从更新队列中移除 effect 函数