Vue 3 源码解读 -- 4. 响应式系统(下)

04

PART

响应式系统（下）

REACTIVITY · 面向开发者的响应式 API

// 第 1756 行

function reactive(target) {

　if (isReadonly(target)) return target;

　return createReactiveObject(

　　target, false,

　　mutableHandlers, mutableCollectionHandlers,

　　reactiveMap

　);

}

非对象直接返回（reactive（1） 无效，应使用 ref）

检查 __v_raw（已是代理）和 __v_skip（标记跳过）

从 proxyMap 缓存查找，避免重复代理同一个对象

判断类型：普通对象用 baseHandlers，Map/Set/WeakMap/WeakSet 用 collectionHandlers

创建 new Proxy（target， handlers） 并缓存

get(target, key, receiver) {

　const isReadOnly2 = this._isReadonly;

　const isShallow2 = this._isShallow;

　// 1. 处理内部标记（__v_isReactive 等）

　if (key === "__v_isReactive") return !isReadOnly2;

　if (key === "__v_isReadonly") return isReadOnly2;

　if (key === "__v_raw") return target;

　// 2. 数组方法查找 arrayInstrumentations

　const targetIsArray = isArray(target);

　if (!isReadOnly2 && targetIsArray && hasOwn(arrayInstrumentations, key)) {

　　return Reflect.get(arrayInstrumentations, key, receiver);

　}

　// 3. 获取值

　const res = Reflect.get(target, key, receiver);

　// 4. 收集依赖

　if (!isReadOnly2) track(target, "get", key);

　// 5. shallow 模式直接返回

　if (isShallow2) return res;

　// 6. Ref 自动解包

　if (isRef(res)) return isArray(target) && isIntegerKey(key) ? res : res.value;

　// 7. 对象自动深层代理

　if (isObject(res)) return isReadOnly2 ? readonly(res) : reactive(res);

　return res;

}

// 第 1881 行

class RefImpl {

　constructor(value, shallow) {

　　this.dep = new Dep(); // 独立的 Dep 实例

　　this.__v_isRef = true;

　　this._rawValue = shallow ? value : toRaw(value);

　　this._value = shallow ? value : toReactive(value);

　　this.__v_isShallow = shallow;

　}

　get value() {

　　this.dep.track(); // 收集依赖

　　return this._value;

　}

　set value(newValue) {

　　const oldValue = this._rawValue;

　　if (hasChanged(newValue, oldValue)) {

　　　this._rawValue = toRaw(newValue);

　　　this._value = toReactive(newValue);

　　　this.dep.trigger(); // 派发更新

　　}

　}

}

reactive vs ref

• reactive 适合对象/数组
• ref 适合基本类型（string/number/boolean）
• reactive 访问属性无需 。value
• ref 需要 。value（模板中自动解包）
• reactive 不能替换整个对象
• ref。value = newObj 可以替换

toRaw 与 toReactive

• toRaw（value）：剥除 Proxy 获取原始对象，用于存储 _rawValue
• toReactive（value）：如果是对象则调用 reactive（） 深层代理，否则直接返回
• 这保证了 ref（{a： 1}） 的 。value 是响应式的

// 第 2047 行

class ComputedRefImpl {

　constructor(getter, setter, isSSR) {

　　this.fn = getter;

　　this.setter = setter;

　　this.dep = new Dep(this); // 注意：传入 this

　　this.flags = 16; // DIRTY

　　this.globalVersion = globalVersion - 1;

　}

　get value() {

　　this.dep.track(); // 被下游依赖收集

　　refreshComputed(this); // 检查是否需要重算

　　if (this.deps) {

　　　// 更新所有 link 的 version

　　　let link = this.deps;

　　　while (link) {

　　　　link.version = link.dep.version;

　　　　link = link.nextDep;

　　　}

　　}

　　return this._value;

　}

}

// Ref

watch(countRef, (newVal, oldVal) => { ... })

// Getter 函数

watch(() => state.count, (newVal) => { ... })

// Reactive 对象（自动深层）

watch(reactiveState, (newState) => { ... })

// 多源数组

watch([ref1, ref2, () => state.prop], ([v1, v2, v3]) => { ... })

const state = reactive({ name: 'Vue', version: 3 });

// toRef：为单个属性创建 ref

const nameRef = toRef(state, 'name');

// toRefs：为所有属性创建 ref 对象

const { name, version } = toRefs(state);

// proxyRefs：自动解包 ref 的代理

// （setupState 使用此机制，模板中无需 .value）