Vue3丨进一步了解这 20 个响应式 API，写码如有神
共 31489字，需浏览 63分钟
·
2021-02-08 15:49
（关注前端精，让你前端越来越精 ~ ）
前面说的话
在 Vue2 中，个人觉得对于数据的操作比较 “黑盒” 。
而 Vue3 把响应式系统更显式地暴露出来，使得我们对数据的操作有了更多的灵活性。
所以，对于 Vue3 的几个响应式的 API ，我们需要更加的理解掌握，才能在实战中运用自如。
先了解，什么是响应式 ？
Vue3 官网有举过一个例子
var val1 = 2
var val2 = 3
var sum = val1 + val2
我们希望 val1 或 val2 的值改变的时候，sum 也会响应的做出正确的改变。
大白话
我依赖了你，你变了。你就通知我让我知道，好让我做点 “操作” 。
从 Vue3 的源码来讲
让我们记住三个关键的英语单词，它们的顺序也是完成一个响应式的顺序。
effect > track > trigger > effect
浅浅的解释一下：在组件渲染过程中，假设当前正在走一个 “effect”（副作用），这个 effect 会在过程中把它接触到的值（也就是说会触发到值的 get 方法），从而对值进行 track（追踪）。当值发生改变，就会进行 trigger（触发），执行 effect 来完成一个响应！
用代码来解释
在 Vue 中，有三种 effect ，且说是视图渲染effect、计算属性effect、侦听器effect
<template>
<div>count：{{count}}div>
<div>computedCount：{{computedCount}}div>
<button @click="handleAdd">addbutton>
template>
// ...
setup() {
const count = ref(1);
const computedCount = computed(() => {
return count.value + 1;
});
watch(count, (val, oldVal) => {
console.log('val :>> ', val);
});
const handleAdd = () => {
count.value++;
};
return {
count,
computedCount,
handleAdd
};
}
// ...
上面这段代码，对于依赖值的追踪之后会被存放于这样的一个集合中，如图：
注：以上的最内层集合数组里的 reactiveEffect 方法分别是 侦听器effect、视图渲染effect、计算属性effect。
当执行 handleAdd 动作时，就会触发 count.value 的 set 方法，进行 trigger 响应式调用集合相关的 3 个 effect ，然后分别去更新视图，更新 computedCount 的值，调用 watch 侦听器的回调方法进行输出。
不太理解没关系，脑袋瓜先有个大体的结构即可 ~
简单的介绍了响应式是什么之后，让我们来进入本文的主题，进一步了解 Vue3 的响应式 API ~
Vue3 内置的 20 个响应式 API
1. reactive
先看 Proxy
在了解 reactive 之前，我们先来了解一波实现 reactive API 的关键类 > ES6 的 Proxy ，它还有一个好基友 Reflect。这里我们先看一个简单的例子：
const targetObj = {
id: 1,
name: 'front-refined',
childObj: {
hobby: 'coding'
}
};
const proxyObj = new Proxy(targetObj, {
get(target, key, receiver) {
console.log(`get key：${key}`);
return Reflect.get(...arguments);
},
set(target, key, value, receiver) {
console.log(`set key：${key}，value：${value}`);
return Reflect.set(...arguments);
}
});
我们来分析两件事：
在浏览器打印一下代理之后的对象
[[Handler]]：处理器，目前拦截了 get、set [[Target]]：代理的目标对象[[IsRevoked]]：代理是否撤销
第一次接触 [[IsRevoked]] 的时候，有点好奇它的作用。也好奇的小伙伴看下这段代码：
// 用 Proxy 的静态方法 revocable 代理一个对象
const targetObj = { id: 1, name: 'front-refined' };
const { proxy, revoke } = Proxy.revocable(targetObj, {});
revoke();
console.log('proxy-after :>> ', proxy);
proxy.id = 2;
输出如图：
报错：因为代理已经被撤回了，所以不能对 id 进行 set 动作
对上面的代码在控制台打印看看输出了啥？
proxyObj.name
// get key：name
proxyObj.name="hello~"
// set key：name，value：hello~
proxyObj.childObj.hobby
// get key：childObj
proxyObj.childObj.hobby="play"
// get key：childObj
我们可以看到对于 hobby 的 get/set 输出只到了 childObj 。如果是这样的话，不就拦截不了 hobby 的 get/set 了，那怎么进行追踪，触发更新？让我们带着疑问继续往下看。
reactive 源码（深层对象的代理）
我们可以看到不管对 hobby 进行 get 或 set，都会先去 get childObj // get key：childObj，那么我们就可以在 get 访问器里做点操作，这里拿 reactive 相关源码举个例子（我知道看源码复杂，所以我已经精简了，并且加上了注释。这段代码可以直接 copy 运行哦~）：
// 工具方法：判断是否是一个对象（注：typeof 数组 也等于 'object'
const isObject = val => val !== null && typeof val === 'object';
// 工具方法：值是否改变，改变才触发更新
const hasChanged = (value, oldValue) =>
value !== oldValue && (value === value || oldValue === oldValue);
// 工具方法：判断当前的 key 是否是已经存在的
const hasOwn = (val, key) => hasOwnProperty.call(val, key);
// 闭包：生成一个 get 方法
function createGetter() {
return function get(target, key, receiver) {
const res = Reflect.get(target, key, receiver);
console.log(`getting key：${key}`);
// track(target, 'get' /* GET */, key);
// 深层代理对象的关键！！！判断这个属性是否是一个对象，是的话继续代理动作，使对象内部的值可追踪
if (isObject(res)) {
return reactive(res);
}
return res;
};
}
// 闭包：生成一个 set 方法
function createSetter() {
return function set(target, key, value, receiver) {
const oldValue = target[key];
const hadKey = hasOwn(target, key);
const result = Reflect.set(target, key, value, receiver);
// 判断当前 key 是否已经存在，不存在的话表示为新增的 key ，后续 Vue “标记”新的值使它其成为响应式
if (!hadKey) {
console.log(`add key：${key}，value：${value}`);
// trigger(target, 'add' /* ADD */, key, value);
} else if (hasChanged(value, oldValue)) {
console.log(`set key：${key}，value：${value}`);
// trigger(target, 'set' /* SET */, key, value, oldValue);
}
return result;
};
}
const get = createGetter();
const set = createSetter();
// 基础的处理器对象
const mutableHandlers = {
get,
set
// deleteProperty
};
// 暴露出去的方法，reactive
function reactive(target) {
return createReactiveObject(target, mutableHandlers);
}
// 创建一个响应式对象
function createReactiveObject(target, baseHandlers) {
const proxy = new Proxy(target, baseHandlers);
return proxy;
}
const proxyObj = reactive({
id: 1,
name: 'front-refined',
childObj: {
hobby: 'coding'
}
});
proxyObj.childObj.hobby
// get key：childObj
// get key：hobby
proxyObj.childObj.hobby="play"
// get key：childObj
// set key：hobby，value：play
可以看见经过 Vue 的“洗礼”之后，我们就可以拦截到 hobby 的 get/set 了。
不需要 Vue.set() 了
在 Vue3 我们已经不需要用 Vue.set 方法来动态添加一个响应式 property，因为背后的实现机制已经不同：
在 Vue2，使用了 Object.defineProperty 只能预先对某些属性进行拦截，粒度较小。
在 Vue3，使用的 Proxy，拦截的是整个对象。
简单用代码解释如：
// Object.defineProperty
const obj1 = {};
Object.defineProperty(obj1, 'a', {
get() {
console.log('get1');
},
set() {
console.log('set1');
}
});
obj1.b = 2;
上面的代码无任何输出！
// Proxy
const obj2 = {};
const proxyObj2 = new Proxy(obj2, {
get() {
console.log('get2');
},
set() {
console.log('set2');
}
});
proxyObj2.b = 2;
// set2
触发了 set 访问器。
2. shallowReactive
第一次看见这个 shallow 的字眼，我就联想到了 React 中经典的浅比较，这个「浅」的概念是一致的，让我们来看下：
const shallowReactiveObj = shallowReactive({
id: 1,
name: 'front-refiend',
childObj: { hobby: 'coding' }
});
// 改变 id 是响应式的
shallowReactiveObj.id = 2;
// 改变嵌套对象的属性是非响应式的，但是本身的值是有被改变的
shallowReactiveObj.childObj.hobby = 'play';
我们看看在源码中是怎么控制的，让我们对上面的 reactive 精简过的源码加点东西（这里简单用 // +++ 注释来表示新增的代码块）：
// ...
// +++ 新增了 shallow 入参
// 闭包：生成一个 get 方法
function createGetter(shallow = false) {
return function get(target, key, receiver) {
const res = Reflect.get(target, key, receiver);
console.log(`get key：${key}`);
// track(target, 'get' /* GET */, key);
// +++
// shallow=true，就直接 return 结果，所以不会深层追踪
if (shallow) {
return res;
}
// 深层代理对象的关键！！！判断这个属性是否是一个对象，是的话继续代理动作，使对象内部的值可追踪
if (isObject(res)) {
return reactive(res);
}
return res;
};
}
// +++
const shallowGet = createGetter(true);
// +++
// 浅处理器对象，合并覆盖基础的处理器对象
const shallowReactiveHandlers = Object.assign({}, mutableHandlers, {
get: shallowGet
});
// +++
// 暴露出去的方法，shallowReactive
function shallowReactive(target) {
return createReactiveObject(target, shallowReactiveHandlers);
}
// ...
3. readonly
官网：获取一个对象 (响应式或纯对象) 或 ref 并返回原始 proxy 的只读 proxy。只读 proxy 是深层的：访问的任何嵌套 property 也是只读的。
举例：
const proxyObj = reactive({
childObj: {
hobby: 'coding'
}
});
const readonlyObj = readonly(proxyObj);
// 如果被拷贝对象 proxyObj 做了修改，打印 readonlyObj.childObj.hobby 也会看到有变更
proxyObj.childObj.hobby = 'play';
console.log('readonlyObj.childObj.hobby :>> ', readonlyObj.childObj.hobby);
// readonlyObj.childObj.hobby :>> play
// 只读对象被改变，警告
readonlyObj.childObj.hobby = 'play';
// ⚠️ Set operation on key "hobby" failed: target is readonly.
在这个例子中，readonlyObj 与 proxyObj 共享所有，除了不能被改变。它的所有属性也都是响应式的，让我们再看下源码，我们依然是对上面 reactive 精简过的源码加点东西：
// +++ 新增了 isReadonly 参数
// 闭包：生成一个 get 方法
function createGetter(shallow = false, isReadonly = false) {
return function get(target, key, receiver) {
const res = Reflect.get(target, key, receiver);
console.log(`get key：${key}`);
// +++
// 当前是只读的情况，自己不会被改变，所以就没必要进行追踪变化
if (!isReadonly) {
// track(target, "get" /* GET */, key);
}
// shallow=true，就直接 return 结果，所以不会深层追踪
if (shallow) {
return res;
}
// 深层代理对象的关键！！！判断这个属性是否是一个对象，是的话继续代理动作，使对象内部的值可追踪
if (isObject(res)) {
// +++
// 如果是只读，也要同步进行深层代理
return isReadonly ? readonly(res) : reactive(res);
}
return res;
};
}
// +++
const readonlyGet = createGetter(false, true);
// +++
// 只读处理器对象
const readonlyHandlers = {
get: readonlyGet,
// 只读，不允许 set ，所以这里警告
set(target, key) {
{
console.warn(
`Set operation on key "${String(
key
)}" failed: target is readonly.`,
target
);
}
return true;
}
};
// +++
// 暴露出去的方法，readonly
function readonly(target) {
return createReactiveObject(target, readonlyHandlers);
}
如上，新增了一个 isReadonly 参数，用来标记是否进行深层代理。
上面的 readonly 例子就类似是“代理一个代理”，即：proxy（proxy（原始对象）），如图：
我们平常接触最多的子组件接收父组件传递的 props。它就是用 readonly 创建的，所以保持了只读。要修改的话只能通过 emit 提交至父组件，从而保证了 Vue 传统的单向数据流。
4. shallowReadonly
顾名思义，就是这个代理对象 shallow=true & readonly=true，那这样会发生什么呢?
举个例子：
const shallowReadonlyObj = shallowReadonly({
id: 1,
name: 'front-refiend',
childObj: { hobby: 'coding' }
});
shallowReadonlyObj.id = 2;
// ⚠️ Set operation on key "id" failed: target is readonly.
// 对象本身的属性不能被修改
shallowReadonlyObj.childObj.hobby = 'runnnig';
// 嵌套对象的属性可以被修改，但是是非响应式的！
我们看看在源码中是怎么控制的，让我们继续对上面的 reactive 精简过的源码加点东西：
// ...
// +++
// shallow=true & readonly=true
const shallowReadonlyGet = createGetter(true, true);
// +++
// 浅只读处理器对象，合并覆盖 readonlyHandlers 处理器对象
const shallowReadonlyHandlers = Object.assign({}, readonlyHandlers, {
get: shallowReadonlyGet
});
// +++
// 暴露出去的方法，shallowReadonly
function shallowReadonly(target) {
return createReactiveObject(target, shallowReadonlyHandlers);
}
// ...
5. ref
个人觉得，ref 方法更加提升我们去理解 js 中的引用类型。简单的来讲就是把一个简单类型包装成一个对象，使它可以被追踪（响应式）。
ref 返回的是一个包含 .value 属性的对象。
例子：
const refNum = ref(1);
refNum.value++;
让我们来扒一扒背后的实现原理（精简了 ref 相关源码）：
// 工具方法：值是否改变，改变才触发更新
const hasChanged = (value, oldValue) =>
value !== oldValue && (value === value || oldValue === oldValue);
// 工具方法：判断是否是一个对象（注：typeof 数组 也等于 'object'
const isObject = val => val !== null && typeof val === 'object';
// 工具方法：判断传入的值是否是一个对象，是的话就用 reactive 来代理
const convert = val => (isObject(val) ? reactive(val) : val);
function toRaw(observed) {
return (observed && toRaw(observed['__v_raw' /* RAW */])) || observed;
}
// ref 实现类
class RefImpl {
constructor(_rawValue, _shallow = false) {
this._rawValue = _rawValue;
this._shallow = _shallow;
this.__v_isRef = true;
this._value = _shallow ? _rawValue : convert(_rawValue);
}
get value() {
// track(toRaw(this), 'get' /* GET */, 'value');
return this._value;
}
set value(newVal) {
if (hasChanged(toRaw(newVal), this._rawValue)) {
this._rawValue = newVal;
this._value = this._shallow ? newVal : convert(newVal);
// trigger(toRaw(this), 'set' /* SET */, 'value', newVal);
}
}
}
// 创建一个 ref
function createRef(rawValue, shallow = false) {
return new RefImpl(rawValue, shallow);
}
// 暴露出去的方法，ref
function ref(value) {
return createRef(value);
}
// 暴露出去的方法，shallowRef
function shallowRef(value) {
return createRef(value, true);
}
核心类 RefImpl ，我们可以看到在类中使用了经典的 get/set 存取器，来进行追踪和触发。convert 方法让我们知道了 ref 不仅仅用来包装一个值类型，也可以是一个对象/数组，然后把对象/数组再交给 reactive 进行代理。直接看个例子：
const refArr = ref([1, 2, 3]);
const refObj = ref({ id: 1, name: 'front-refined' });
// 操作它们
refArr.value.push(1);
refObj.value.id = 2;
6. unref
展开一个 ref：判断参数为 ref ，则返回 .value ，否则返回参数本身。
源码：
function isRef(r) {
return Boolean(r && r.__v_isRef === true);
}
function unref(ref) {
return isRef(ref) ? ref.value : ref;
}
为了方便开发，Vue 处理了在 template 中用到的 ref 将会被自动展开，也就是不用写 .value 了，背后的实现，让我们一起来看一下：
这里用「模拟」的方式来阐述，核心逻辑没有改变~
// 模拟：在 setup 内定义一个 ref
const num = ref(1);
// 模拟：在 setup 返回，提供 template 使用
function setup() {
return { num };
}
// 模拟：接收了 setup 返回的对象
const setupReturnObj = setup();
// 定义处理器对象，get 访问器里的 unref 是关键
const shallowUnwrapHandlers = {
get: (target, key, receiver) =>
unref(Reflect.get(target, key, receiver)),
set: (target, key, value, receiver) => {
const oldValue = target[key];
if (isRef(oldValue) && !isRef(value)) {
oldValue.value = value;
return true;
} else {
return Reflect.set(target, key, value, receiver);
}
}
};
// 模拟：返回组件实例上下文
const ctx = new Proxy(setupReturnObj, shallowUnwrapHandlers);
// 模拟：template 最终被编译成 render 函数
/*
num：{{num}}
*/
function render(ctx) {
with (ctx) {
// 模拟：在template中，进行赋值动作 "onUpdate:modelValue": $event => (num = $event)
// num = 666;
// 模拟：在template中，进行读取动作 {{num}}
console.log('num :>> ', num);
}
}
render(ctx);
// 模拟：在 setup 内部进行赋值动作
num.value += 1;
// 模拟：num 改变 trigger 视图渲染effect，更新视图
render(ctx);
7. shallowRef
ref 的介绍已经包含了 shallowRef 方法的实现：this._value = _shallow ? _rawValue : convert(_rawValue);
如果传入的 shallow 值为 true 那么直接返回传入的原始值，也就是说，不会再去深层代理对象了，让我们来看两个场景：
传入的是一个对象
const shallowRefObj = shallowRef({
id: 1,
name: 'front-refiend',
});
上面的对象加工之后，我们可以简单的理解成:
const shallowRefObj = {
value: {
id: 1,
name: 'front-refiend'
}
};
既然是 shallow（浅层）那就止于 value ，不再进行深层代理。也就是说，对于嵌套对象的属性不会进行追踪，但是我们修改 shallowRefObj 本身的 value 属性还是响应式的，如：shallowRefObj.value = 'hello~';
传入的是一个简单类型
const shallowRefNum = shallowRef(1);
当传入的值是一个简单类型时候，结合这两句代码：const convert = val => (isObject(val) ? reactive(val) : val); ，this._value = _shallow ? _rawValue : convert(_rawValue);
我们就可以知道 shallowRef 和 ref 对于入参是一个简单类型时，其最终效果是一致的。
8. triggerRef
个人觉得这个 API 理解起来较为抽象，小伙伴们一起仔细琢磨琢磨~
triggerRef 是和 shallowRef 配合使用的，例子：
const shallowRefObj = shallowRef({
name: 'front-refined'
});
// 这里不会触发副作用，因为是这个 ref 是浅层的
shallowRefObj.value.name = 'hello~';
// 手动执行与 shallowRef 关联的任何副作用，这样子就能触发了。
triggerRef(shallowRefObj);
看下背后的实现原理：
在开篇我们有讲到的 effect 这个概念，假设当前正在走 视图渲染effect 。
template 绑定的了值，如：
<template> {{shallowRefObj.name}} template>
当执行 “render” 时，就会读取到了 shallowRefObj.value.name ，由于当前的 ref 是浅层的，只能追踪到 value 的变化，所以在 value 的 get 方法进行 track 如：track(toRaw(this), "get" /* GET */, 'value');
track 方法源码精简：
// targetMap 是一个大集合
// activeEffect 表示当前正在走的 effect ，假设当前是 视图渲染effect
function track(target, type, key) {
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()));
}
if (!dep.has(activeEffect)) {
dep.add(activeEffect);
}
}
打印 targetMap
也就是说，如果 shallowRefObj.value 有改变就可以 trigger 视图渲染effect 来更新视图，或着我们也可以手动 trigger 它。
但是，我们目前改变的是 shallowRefObj.value.name = 'hello~';，所以我们要 “骗” trigger 方法。手动 trigger，只要我们的入参对了，就会响应式更新视图了，看一下 triggerRef 与 trigger 的源码：
function triggerRef(ref) {
trigger(toRaw(ref), 'set' /* SET */, 'value', ref.value);
}
// trigger 响应式触发
function trigger(target, type, key, newValue, oldValue, oldTarget) {
const depsMap = targetMap.get(target);
if (!depsMap) {
// 没有被追踪，直接 return
return;
}
// 拿到了 视图渲染effect 就可以进行排队更新 effect 了
const run = depsMap.get(key);
/* 开始执行 effect，这里做了很多事... */
run();
}
我们用 target 和 key 拿到了 视图渲染的effect。至此，就可以完成一个手动更新了~
9. customRef
自定义的 ref 。这个 API 就更显式的让我们了解 track 与 trigger，看个例子：
<template>
<div>name：{{name}}div>
<input v-model="name" />
template>
// ...
setup() {
let value = 'front-refined';
// 参数是一个工厂函数
const name = customRef((track, trigger) => {
return {
get() {
// 收集依赖它的 effect
track();
return value;
},
set(newValue) {
value = newValue;
// 触发更新依赖它的所有 effect
trigger();
}
};
});
return {
name
};
}
让我们看下源码实现：
// 自定义ref 实现类
class CustomRefImpl {
constructor(factory) {
this.__v_isRef = true;
const { get, set } = factory(
() => track(this, 'get' /* GET */, 'value'),
() => trigger(this, 'set' /* SET */, 'value')
);
this._get = get;
this._set = set;
}
get value() {
return this._get();
}
set value(newVal) {
this._set(newVal);
}
}
function customRef(factory) {
return new CustomRefImpl(factory);
}
结合我们上面有提过的 ref 源码相关，我们可以看到 customRef 只是把 ref 内部的实现，更显式的暴露出来，让我们更灵活的控制。比如可以延迟 trigger ，如：
// ...
set(newValue) {
clearTimeout(timer);
timer = setTimeout(() => {
value = newValue;
// 触发更新依赖它的所有 effect
trigger();
}, 2000);
}
// ...
10. toRef
可以用来为响应式对象上的 property 新创建一个 ref ，从而保持对其源 property 的响应式连接。举个例子：
假设我们传递给一个组合式函数一个响应式数据，在组合式函数内部就可以响应式的修改它：
// 1. 传递整个响应式对象
function useHello(state) {
state.name = 'hello~';
}
// 2. 传递一个具体的 ref
function useHello2(name) {
name.value = 'hello~';
}
export default {
setup() {
const state = reactive({
id: 1,
name: 'front-refiend'
});
// 1. 直接传递整个响应式对象
useHello(state);
// 2. 传递一个新创建的 ref
useHello2(toRef(state, 'name'));
}
};
让我们看下源码实现：
// ObjectRef 实现类
class ObjectRefImpl {
constructor(_object, _key) {
this._object = _object;
this._key = _key;
this.__v_isRef = true;
}
get value() {
return this._object[this._key];
}
set value(newVal) {
this._object[this._key] = newVal;
}
}
// 暴露出去的方法
function toRef(object, key) {
return new ObjectRefImpl(object, key);
}
即使 name 属性不存在，toRef 也会返回一个可用的 ref，如：我们在上面那个例子指定了一个对象没有的属性：
useHello2(toRef(state, 'other'));
这个动作就相当于往对象新增了一个属性 other，且会响应式。
11. toRefs
toRefs 底层就是 toRef。
将响应式对象转换为普通对象，其中结果对象的每个 property 都是指向原始对象相应 property 的 ref，保持对其源 property 的响应式连接。
toRefs 的出现其实也是为了开发上的便利。让我们直接来看看它的几个使用场景：
解构 props
export default {
props: {
id: Number,
name: String
},
setup(props, ctx) {
const { id, name } = toRefs(props);
watch(id, () => {
console.log('id change');
});
// 没有使用 toRefs 的话，需要通过这种方式监听
watch(
() => props.id,
() => {
console.log('id change');
}
);
}
};
这样子我们就能保证能监听到 id 的变化（没有使用 toRefs 的解构是不行的），因为通过 toRefs 方法之后，id 其实就是一个 ref 对象。
setup return 时转换
<template>
<div>id：{{id}}div>
<div>name：{{name}}div>
template>
// ...
setup() {
const state = reactive({
id: 1,
name: 'front-refiend'
});
return {
...toRefs(state)
};
}
这样的写法我们就更加方便的在模板上直接写对应的值，而不需要 {{state.id}} ， {{state.name}}
让我们看下源码：
function toRefs(object) {
const ret = {};
for (const key in object) {
ret[key] = toRef(object, key);
}
return ret;
}
12. compouted
开头有讲过，compouted 是一个 “计算属性effect” 。它依赖响应式基础数据，当数据变化时候会触发它的更新。computed 主要的靓点就是缓存了，可以缓存性能开销比较大的计算。它返回一个 ref 对象。
让我们一起来看一个 computed 闭环的精简源码（主要是了解思路，虽然精简了，但代码还是有一丢丢多，不够看完你肯定有收获。直接 copy 可以运行哦~）：
<body>
<fieldset>
<legend>包含get/set方法的 computedlegend>
<button onclick="handleChangeFirsttName()">changeFirsttNamebutton>
<button onclick="handleChangeLastName()">changeLastNamebutton>
<button onclick="handleSetFullName()">setFullNamebutton>
fieldset>
<fieldset>
<legend>只读 computedlegend>
<button onclick="handleAddCount1()">handleAddCount1button>
<button onclick="handleSetCount()">handleSetCountbutton>
fieldset>
<script>
// 大集合，存放依赖相关
const targetMap = new WeakMap();
// 当前正在走的 effect
let activeEffect;
// 精简：创建一个 effect
const createReactiveEffect = (fn, options) => {
const effect = function reactiveEffect() {
try {
activeEffect = effect;
return fn();
} finally {
// 当前的 effect 走完之后（相关的依赖收集完毕之后），就退出
activeEffect = undefined;
}
};
effect.options = options;
// 该副作用的依赖集合
effect.deps = [];
return effect;
};
//#region 精简：ref 方法
// 工具方法：值是否改变，改变才触发更新
const hasChanged = (value, oldValue) =>
value !== oldValue && (value === value || oldValue === oldValue);
// ref 实现类
class RefImpl {
constructor(_rawValue) {
this._rawValue = _rawValue;
this.__v_isRef = true;
this._value = _rawValue;
}
get value() {
track(this, 'get', 'value');
return this._value;
}
set value(newVal) {
if (hasChanged(newVal, this._rawValue)) {
this._rawValue = newVal;
this._value = newVal;
trigger(this, 'set', 'value', newVal);
}
}
}
// 创建一个 ref
function createRef(rawValue) {
return new RefImpl(rawValue);
}
// 暴露出去的方法，ref
function ref(value) {
return createRef(value);
}
//#endregion
//#region 精简：track、trigger
const track = (target, type, key) => {
if (activeEffect === undefined) {
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()));
}
if (!dep.has(activeEffect)) {
dep.add(activeEffect);
// 存储该副作用相关依赖集合
activeEffect.deps.push(dep);
}
};
const trigger = (target, type, key, newValue) => {
const depsMap = targetMap.get(target);
if (!depsMap) {
// 没有被追踪，直接 return
return;
}
const effects = depsMap.get(key);
const run = effect => {
if (effect.options.scheduler) {
// 调度执行
effect.options.scheduler();
}
};
effects.forEach(run);
};
//#endregion
//#region 精简：computed 方法
const isFunction = val => typeof val === 'function';
// 暴露出去的方法
function computed(getterOrOptions) {
let getter;
let setter;
if (isFunction(getterOrOptions)) {
getter = getterOrOptions;
setter = () => {
// 提示，当前的 computed 如果是只读的，也就是说没有在调用的时候传入 set 方法
console.warn('Write operation failed: computed value is readonly');
};
} else {
getter = getterOrOptions.get;
setter = getterOrOptions.set;
}
return new ComputedRefImpl(getter, setter);
}
// computed 核心方法
class ComputedRefImpl {
constructor(getter, _setter) {
this._setter = _setter;
this._dirty = true;
this.effect = createReactiveEffect(getter, {
scheduler: () => {
// 依赖的数据改变了，标记为脏值，等 get value 时进行计算获取
if (!this._dirty) {
this._dirty = true;
}
}
});
}
get value() {
// 脏值需要计算 _dirty=true 代表需要计算
if (this._dirty) {
console.log('脏值，需要计算...');
this._value = this.effect();
// 标记脏值为 false，进行缓存值（下次获取时，不需要计算)
this._dirty = false;
}
return this._value;
}
set value(newValue) {
this._setter(newValue);
}
}
//#endregion
//#region 例子
// 1. 创建一个只读 computed
const count1 = ref(0);
const count = computed(() => {
return count1.value * 10;
});
const handleAddCount1 = () => {
count1.value++;
console.log('count.value :>> ', count.value);
};
const handleSetCount = () => {
count.value = 1000;
};
// 2. 创建一个包含 get/set 方法的 computed
// 获取的 computed 数据
const consoleFullName = () =>
console.log('fullName.value :>> ', fullName.value);
const firsttName = ref('san');
const lastName = ref('zhang');
const fullName = computed({
get: () => firsttName.value + '.' + lastName.value,
set: val => {
lastName.value += val;
}
});
// 改变依赖的值触发 computed 更新
const handleChangeFirsttName = () => {
firsttName.value = 'si';
consoleFullName();
};
// 改变依赖的值触发 computed 更新
const handleChangeLastName = () => {
lastName.value = 'li';
consoleFullName();
};
// 触发 fullName set，如果 computed 为只读就警告
const handleSetFullName = () => {
fullName.value = ' happy niu year~';
consoleFullName();
};
// 必须要有读取行为，才会进行依赖收集。当依赖改变时候，才会响应式更新！
consoleFullName();
//#endregion
script>
body>
computed 的闭环流程是这样子的：
computed 创建的 ref 对象初次被调用 get（读 computed 的 value），会进行依赖收集，当依赖改变时，调度执行触发 dirty = true，标记脏值，需要计算。下一次再去调用 computed 的 get 时候，就需要重新计算获取新值，如此反复。
13. watch
关于 watch ，这里直接先上一段稍长的源码例子（代码挺长，但是都是精简过的，而且有注释分块。小伙伴们耐心看，copy 可以直接运行哦~）
<body>
<button onclick="handleChangeCount()">点我触发watchbutton>
<button onclick="handleChangeCount2()">点我触发watchEffectbutton>
<script>
// 大集合，存放依赖相关
const targetMap = new WeakMap();
// 当前正在走的 effect
let activeEffect;
// 精简：创建一个 effect
const createReactiveEffect = (fn, options) => {
const effect = function reactiveEffect() {
try {
activeEffect = effect;
return fn();
} finally {
// 当前的 effect 走完之后（相关的依赖收集完毕之后），就退出
activeEffect = undefined;
}
};
effect.options = options;
// 该副作用的依赖集合
effect.deps = [];
return effect;
};
//#region 精简：ref 方法
// 工具方法：判断是否是一个 ref 对象
const isRef = r => {
return Boolean(r && r.__v_isRef === true);
};
// 工具方法：值是否改变，改变才触发更新
const hasChanged = (value, oldValue) =>
value !== oldValue && (value === value || oldValue === oldValue);
// 工具方法：判断是否是一个方法
const isFunction = val => typeof val === 'function';
// ref 实现类
class RefImpl {
constructor(_rawValue) {
this._rawValue = _rawValue;
this.__v_isRef = true;
this._value = _rawValue;
}
get value() {
track(this, 'get', 'value');
return this._value;
}
set value(newVal) {
if (hasChanged(newVal, this._rawValue)) {
this._rawValue = newVal;
this._value = newVal;
trigger(this, 'set', 'value', newVal);
}
}
}
// 创建一个 ref
function createRef(rawValue) {
return new RefImpl(rawValue);
}
// 暴露出去的方法，ref
function ref(value) {
return createRef(value);
}
//#endregion
//#region 精简：track、trigger
const track = (target, type, key) => {
if (activeEffect === undefined) {
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()));
}
if (!dep.has(activeEffect)) {
dep.add(activeEffect);
// 存储该副作用相关依赖集合
activeEffect.deps.push(dep);
}
};
const trigger = (target, type, key, newValue) => {
const depsMap = targetMap.get(target);
if (!depsMap) {
// 没有被追踪，直接 return
return;
}
const effects = depsMap.get(key);
const run = effect => {
if (effect.options.scheduler) {
// 调度执行
effect.options.scheduler();
}
};
effects.forEach(run);
};
//#endregion
//#region 停止监听相关
// 停止侦听，如果有 onStop 方法一并调用，onStop 也就是 onInvalidate 回调方法
function stop(effect) {
cleanup(effect);
if (effect.options.onStop) {
effect.options.onStop();
}
}
// 清空改 effect 收集的依赖相关，这样子改变了就不再继续触发了，也就是“停止侦听”
function cleanup(effect) {
const { deps } = effect;
if (deps.length) {
for (let i = 0; i < deps.length; i++) {
deps[i].delete(effect);
}
deps.length = 0;
}
}
//#endregion
//#region 暴露出去的 watchEffect 方法
function watchEffect(effect, options) {
return doWatch(effect, null, options);
}
//#endregion
//#region 暴露出去的 watch 方法
function watch(source, cb, options) {
return doWatch(source, cb, options);
}
function doWatch(source, cb, { immediate, deep } = {}) {
let getter;
// 判断是否 ref 对象
if (isRef(source)) {
getter = () => source.value;
}
// 判断是一个 reactive 对象，默认递归追踪 deep=true
else if (/*isReactive(source)*/ 0) {
// 省略...
// getter = () => source;
// deep = true;
}
// 判断是一个数组，也就是 Vue3 新的特性，watch 可以以数组的方式侦听
else if (/*isArray(source)*/ 0) {
// 省略...
}
// 判断是否是一个方法，这样子的入参
else if (isFunction(source)) {
debugger;
// 这里是类似这样子的入参，() => proxyObj.id
if (cb) {
// 省略...
} else {
// cb 为 null，表示当前为 watchEffect
getter = () => {
if (cleanup) {
cleanup();
}
return source(onInvalidate);
};
}
}
// 判断是否 deep 就会递归追踪
if (/*cb && deep*/ 0) {
// const baseGetter = getter;
// getter = () => traverse(baseGetter());
}
// 清理 effect
let cleanup;
const onInvalidate = fn => {
cleanup = runner.options.onStop = () => {
fn();
};
};
let oldValue = undefined;
const job = () => {
if (cb) {
// 获取改变改变后的新值
const newValue = runner();
if (hasChanged(newValue, oldValue)) {
if (cleanup) {
cleanup();
}
// 触发回调
cb(newValue, oldValue, onInvalidate);
// 把新值赋值给旧值
oldValue = newValue;
}
} else {
// watchEffect
runner();
}
};
// 调度
let scheduler;
// default: 'pre'
scheduler = () => {
job();
};
// 创建一个 effect，调用 runner 其实就是在进行依赖收集
const runner = createReactiveEffect(getter, {
scheduler
});
// 初始化 run
if (cb) {
if (immediate) {
job();
} else {
oldValue = runner();
}
} else {
// watchEffect 默认立即执行
runner();
}
// 返回一个方法，调用即停止侦听
return () => {
stop(runner);
};
}
//#endregion
//#region 例子
// 1. watch 例子
const count = ref(0);
const myStop = watch(
count,
(val, oldVal, onInvalidate) => {
onInvalidate(() => {
console.log('watch-clear...');
});
console.log('watch-val :>> ', val);
console.log('watch-oldVal :>> ', oldVal);
},
{ immediate: true }
);
// 改变依赖的值触发 触发侦听器回调
const handleChangeCount = () => {
count.value++;
};
// 停止侦听
// myStop();
// 2. watchEffect 例子
const count2 = ref(0);
watchEffect(() => {
console.log('watchEffect-count2.value :>> ', count2.value);
});
// 改变依赖的值触发 触发侦听器回调
const handleChangeCount2 = () => {
count2.value++;
};
//#endregion
script>
body>
以上的代码简单的实现了 watch 监听 ref 对象的例子，那么我们该如何去正确的使用 watch 呢？让我们一起结合源码一起看两点：
关于侦听源的写法，官网有描述，可以是返回值的 getter 函数，也可以直接是 ref，也就是：
const state = reactive({ id: 1 });
// 使用
() => state.id
// 或
const count = ref(0);
// 使用 count
count
// 看完源码，我们也可以这样子写~
() => count.value
结合源码，我们发现也可以直接侦听一个 reactive 对象，而且默认会进进行深度监听（deep=true），会对对象进行递归遍历追踪。但是侦听一个数组的话，只有当数组被替换时才会触发回调。如果你需要在数组改变时触发回调，必须指定 deep 选项。当没有指定 deep = true：
const arr = ref([1, 2, 3]);
// 只有这种方式才会生效
arr.value = [4, 5, 6];
// 其他的无法触发回调
arr.value[0] = 111;
arr.value.push(4);
个人建议尽量避免深度侦听，因为这可能会影响性能，大部分场景我们都可以使用侦听一个 getter 的方式，比如需要侦听数组的变化 () => arr.value.length。如果你想要同时监听一个对象多个值的变化，Vue3 提供了数组的操作：
watch(
[() => state.id, () => state.name],
([id, name], [oldId, oldName]) => {
/* ... */
}
);
watch 返回值也就是一个停止侦听的方法，它与 onInvalidate 本质是不同的，当我们调用了停止侦听，底层是做了移除当前清空该 effect 收集的依赖集合，这样子依赖数据改变了就不再继续触发了，也就是“停止侦听”。而 onInvalidate，个人认为，它就是提供了一个在回调之前的操作，具体的例子，可以参考之前写过的一篇文章《Vue3丨从 5 个维度来讲 Vue3》 变化 详情看 watchEffect vs watch 内容。
14. watchEffect
和 watch 共享底层代码，在 watch 分析中我们已经有体现了，小伙伴们可以往上再看看，这里不再赘述~
看了那么多有些许复杂的源码之后，让我们来轻松一下，来看下 Vue3 一些响应式 API 的小工具。小伙伴应该都有看到一些源码中带有 `__v_` 前缀的属性，其实这些属性是用来做一些判断的标识，让我们一起来看看：
15. isReadonly
检查对象是否是由 readonly 创建的只读 proxy。
function isReadonly(value) {
return !!(value && value["__v_isReadonly" /* IS_READONLY */]);
}
// readonly
const originalObj = reactive({ id: 1 });
const copyObj = readonly(originalObj);
isReadonly(copyObj); // true
// 只读 computed
const firsttName = ref('san');
const lastName = ref('zhang');
const fullName = computed(
() => firsttName.value + ' ' + lastName.value
);
isReadonly(fullName); // true
其实在创建一个 get 访问器的时候，利用闭包就已经记录了，然后通过对应的 key 去获取，如：
function createGetter(isReadonly = false, shallow = false) {
return function get(target, key, receiver) {
// ...
if (key === '__v_isReadonly') {
return isReadonly;
}
// ...
};
}
16. isReactive
检查对象是否是 reactive 创建的响应式 proxy。
function isReactive(value) {
if (isReadonly(value)) {
return isReactive(value["__v_raw" /* RAW */]);
}
return !!(value && value["__v_isReactive" /* IS_REACTIVE */]);
}
createGetter 方法判断相关：
// ...
if (key === '__v_isReactive' /* IS_REACTIVE */) {
return !isReadonly;
} else if (key === '__v_isReadonly' /* IS_READONLY */) {
return isReadonly;
}
// ...
17. isProxy
检查对象是否是由 reactive 或 readonly 创建的 proxy。
function isProxy(value) {
return isReactive(value) || isReadonly(value);
}
18. toRaw
toRaw 可以用来打印原始对象，有时候我们在调试查看控制台的时候，就比较方便。
function toRaw(observed) {
return ((observed && toRaw(observed["__v_raw" /* RAW */])) || observed);
}
toRaw 对于转换 ref 对象，仍然保留包装过的对象，例子：
const obj = reactive({ id: 1, name: 'front-refiend' });
console.log(toRaw(obj));
// {id: 1, name: "front-refiend"}
const count = ref(0);
console.log(toRaw(count));
// {__v_isRef: true, _rawValue: 0, _shallow: false, _value: 0, value: 0}
createGetter 方法判断相关：
// ...
if (
key === '__v_raw' /* RAW */ &&
receiver === reactiveMap.get(target)
) {
return target;
}
// ...
我们可以在 createGetter 时就会把对象用 {key:原始对象，value:proxy 代理对象} 这样子的形式存放于 reactiveMap ，然后根据键来取值。
19. markRaw
标记一个对象，使其永远不会转换为 proxy。返回对象本身。
const def = (obj, key, value) => {
Object.defineProperty(obj, key, {
configurable: true,
enumerable: false,
value
});
};
function markRaw(value) {
// 标记跳过对该对象的代理
def(value, "__v_skip" /* SKIP */, true);
return value;
}
createReactiveObject 方法相关：
function createReactiveObject(target) {
//...
// 判断对象中是否含有 __v_skip 属性是的话，直接返回对象本身
if (target['__v_skip']) {
return target;
}
const proxy = new Proxy(target);
// ...
return proxy;
}
20. isRef
判断是否是 ref 对象。__v_isRef 标识就是我们在创建 ref 的时候在 RefImpl实现类里赋值的 this.__v_isRef = true;
function isRef(r) {
return Boolean(r && r.__v_isRef === true);
}
总结
以上的 20 个API，在我们项目实战中，有些也许几乎没有用到。因为有部分API，是 Vue3 整个框架设计有使用到的。对于我们的业务场景来说，目前使用频次较高的应该是 reactive，ref，computed，watch，toRefs...
理解所有响应式 API 对于我们在编码会更加有自信，不会有那么多的疑惑。也帮助我们更加理解框架的底层，如：proxy 怎么用的？Vue3 怎么追踪一个简单类型的？怎样去编码才能让我们系统更优。这才是本文分析这几个 API 的初衷。
怎么样，你了解这 20 个响应式 API 了吗？
😁 前端精，求关注~
2021年，公众号关注「前端精」（front-refined），我们一起学 Vue3，用 Vue3，深入 Vue3 。
最后，祝小伙伴们新年快乐，开开心心过春节~
感谢您的点赞和在看 ❤️