全面解析Vue3 Reactive家族和Ref家族API
共 17115字，需浏览 35分钟
·
2021-10-26 10:39
来源 | https://www.jianshu.com/p/cfe25e757d0e
前言
reactive
<template><button @click="r.a++">count is: {{ r.a }}</button></template><script>import { reactive } from "vue";export default {setup() {let r = reactive({ a: 1 });return {r,};},};</script>
ref
ref说白了就是reactive({value: 原始数据})。下方代码如果打印r对象，会得到RefImpl（ref）对象，它有一个value属性指向基础类型值30。
<template><button @click="r++">count is: {{ r }}</button></template><script>import { ref } from "vue";export default {setup() {let r = ref(30);return {r,};},};</script>
为什么似乎Proxy已经解决所有问题，还要有ref API呢？
因为ES的Proxy API是为引用数据类型服务的，它无法为基本数据类型提供代理。如果强行代理，Vue会有提示：value cannot be made reactive: 30。
那么为什么Vue2的defineproperty并没有区分基本数据类型和引用数据类型呢？
因为defineproperty就是Object的静态方法，它只是为对象服务的，甚至无法对数组服务，因此Vue 2弄了一个data根对象来存放基本数据类型，这样无论什么类型，都是根对象的property，所以也就能代理基本数据类型。
而Proxy能对所有引用类型代理，Vue 3也不再用data根对象，而是一个个的变量，所以带来了新问题，如何代理基本数据类型呢？并没有原生办法，只能构建一个{value: Proxy Object}结构的对象，这样Proxy也就能代理了。
问题来了，同样是响应式结构，ref跟reactive的区别是什么？
ref与reactive的区别
| 对比 | ref | reactive |
|---|---|---|
| 返回数据类型 | RefImpl对象（也叫ref对象） | Proxy对象 |
| 传入基本类型返回 | {value: 基本类型} | 禁止这么做 |
| 传入引用类型返回 | {value: Proxy对象} | Proxy对象 |
两者分别适用场合：
ref可以为基本类型添加响应式，也可以为引用类型添加响应式，reactive只能为引用类型添加响应式。
对于引用类型，什么时候用ref，什么时候用reactive？简单说，如果你只打算修改引用类型的一个属性，那么推荐用reactive，如果你打算变量重赋值，那么一定要用ref。具体见下文。
使用组合式API的话，请一定了解“重赋值自身”和“重赋值自身属性”的区别
这一点非常重要。先看配置项式API中重赋值Proxy的范例，跟Vue 2没有区别，页面会渲染出[ { "name": "赵六", "age": 21 } ]字符：
<template><div>{{ jsonData }}</div></template><script>export default {data() {return {jsonData: [{name: "牛二",age: 13,},],};},created() {this.jsonData = [{name: "王五",age: 19,},];},mounted() {this.jsonData = [{name: "赵六",age: 21,},];},};</script>
而使用组合式API，你会发现，reactive后的Proxy在onMounted中重赋值无法触发渲染，最终页面显示[ { "name": "王五", "age": 19 } ]而不是赵六：
<template><div>{{ jsonData }}</div></template><script>import { onMounted, reactive } from "vue";export default {setup() {let jsonData = reactive([{name: "牛二",age: 13,},]);jsonData = reactive([{name: "王五",age: 19,},]);onMounted(() => {jsonData = reactive([{name: "赵六",age: 100,},]);});return {jsonData,};},};</script>
原因在于jsonData尽管是响应式的，但是响应式的是它的属性，而不是它自身，重赋值它自身跟重赋值它的属性是两码事。
所以，想在组合式API中让数据具备响应式，必须用ref，因为ref又对Proxy包装了一层，修改ref其实是修改它的value，它的value一定是响应式的，因此视图就正常更新了。
再多说一点，如果数据是服务器返回的LIST数据，而且只显示、不变更，那么最好是使用shallowRef来包装数据，可以节能。如果会有变更，那么应该用ref。
下例中采用了Ref语法糖。页面会显示Michael的信息：
<template><div>{{ jsonData }}<ul><li v-for="item in jsonData" :key="item.name">{{ item.name }} - {{ item.age }}</li></ul></div></template><script setup>import { onMounted, ref } from "vue";ref: jsonData = [{name: "Jim",age: 13,},];jsonData = [{name: "Tom",age: 19,},];onMounted(() => {jsonData = [{name: "Michael",age: 100,},];});</script>
现在好像ref把引用数据类型也管起来了，到底啥时候才适合用reactive呢？很简单啊，如果你确信你只可能去改引用类型数据的属性，那么一定要用reactive，如果还有可能要整体重赋值，那还得用ref。
所以说：需要在组合式API里给变量重赋值的话，无论什么数据类型都必须用ref，不可以用reactive。
到此，我们清楚了ref与reactive都必须存在的理由，接着说，reactive有一套兄弟API，ref也有一套，它们都是干什么用的？先看reactive的：
reactive与shallowReactive的区别
打印的话，乍一看没有区别，但是，shallow的中文意义是“浅层的”，shallowReactive不代理深层property，只会指向原始对象的深层property。
注意，给shallowReactive传入Proxy是没有意义的，即便这么做，直接返回该Proxy。
shallowReactive的用途是：如果一个对象的深层不可能变化，那么就没必要深层响应，这时候用shallowReactive可以节省系统开销。
下例中，按下第2个button不会有反应，只有又去按下第1个button之后，视图刷新，第二个button才有反应。
<template><div><button @click="r.b.c++">count is: {{ r.b.c }}</button><button @click="s.b.c++">count is: {{ s.b.c }}</button></div></template><script>import { reactive, shallowReactive } from "vue";export default {setup() {let r = reactive({a: 1, b: {c: 2}});console.log(r);let s = shallowReactive({a: 1, b: {c: 2}});console.log(s);return {r,s};},};</script>
reactive与readonly的区别
reactive一般只接受ES普通的引用数据类型，尽管它也可以接受Proxy对象，但是没有意义、没有必要，但readonly可以接受Proxy对象，而且有实际意义，它可以获取纯对象或者Proxy或者RefImpl，返回原始代理的只读代理。说白了它做2步操作，先reactive，然后另生成一个只读Proxy。
readonly的只读是深层的只读：访问的任何嵌套property也是只读的。
readonly存在的意义有2个，一个是保护数据不被修改，另一个是提升性能。
下例中，第2个button点击不会有反应。
<template><div><button @click="r.b.c++">count is: {{ r.b.c }}</button><button @click="s.b.c++">count is: {{ s.b.c }}</button></div></template><script>import { reactive, readonly } from "vue";export default {setup() {let r = reactive({a: 1, b: {c: 2}});console.log(r);let s = readonly({a: 1, b: {c: 2}});console.log(s);return {r,s};},};</script>
readonly与shallowReadonly的区别
就像reactive与shallowReactive的一样，shallowReadonly只会给对象的第一层property设置只读，不去管深层property，因此深层property并没有被代理，只会指向原始对象。
下例中：
按下button1会有报错提示：Set operation on key "c" failed: target is readonly.，因为r是深层只读的。
按下button2没有任何反应，因为shallowReadonly的深层是指向原始值的，修改原始对象不会反映到视图上。
按下button3也会有报错提示：Set operation on key "a" failed: target is readonly.，因为shallowReadonly是浅层只读的，a恰好是浅层property。
<template><div><button @click="r.b.c++">count is: {{ r.b.c }}</button><button @click="s.b.c++">count is: {{ s.b.c }}</button><button @click="s.a++">count is: {{ s.a }}</button></div></template><script>import { readonly, shallowReadonly } from "vue";export default {setup() {let r = readonly({a: 1, b: {c: 2}});console.log(r);let s = shallowReadonly({a: 1, b: {c: 2}});console.log(s);return {r,s};},};</script>
shallowReactive与shallowReadonly的区别
首先说，两者对深层property的态度是一致的，即“不去代理”，深层property都是指向原始对象的深层property，都允许直接修改原始对象的深层property，区别在于对待浅层property方面。
shallowReactive允许修改浅层property，shallowReadonly不允许，Vue3会阻止并给出报错。
isReactive、isReadonly、isProxy的区别
isReactive：Proxy是否是由reactive创建，是则返回true
isReadonly：Proxy由readonly创建则返回true
isProxy：上面两个满足任意一条，就返回true
上例中，如果加入这3条打印会得到什么？
console.log(isReadonly(s)); // trueconsole.log(isReadonly(s.a)); // false，因为s.a得到的是a的值，而不是a自身，a的值当然不是响应式的console.log(isReadonly(s.b)); // false，道理同上
toRaw是什么
官方已经解释的很清楚，返回proxy的原始对象。这是一个转义口，2个作用：可用于临时读取而不会引起proxy访问/跟踪开销，也可用于写入而不会触发视图更新。
官方又说，不建议保留对原始对象的持久引用。请谨慎使用。这句话什么意思？就是说：
尽量不要把原始对象赋值给变量，尽量减少中间变量；
将原始对象转换为Proxy之后，如果你临时打算操作一下原始对象，那么也不要因为这个目的就早早的把原始对象赋值给变量，而是应该用toRaw(proxy)，以获取原始对象，比如得到一个变量R，然后你可以操作R，操作完成之后就不要再碰R，而应继续操作Proxy。
下例中：
按下button1，会发现button2也跟着变，这表明Proxy的基本原理：操作Proxy会反映到原始对象身上。
按下button2，没有任何反应，表明操作原始对象不会反映到视图上。这时候重新按下button1，会发现数字跳跃了几个数，这表明直接修改原始对象之后，Proxy对原始对象继续代理，并不需要重新reactive。
<template><div><button @click="r.b.c++">count is: {{ r.b.c }}</button><button @click="s.b.c++">count is: {{ s.b.c }}</button></div></template><script>import { reactive, toRaw } from "vue";export default {setup() {let r = reactive({a: 1, b: {c: 2}});console.log(r);let s = toRaw(r);console.log(s);return {r,s};},};</script>
markRaw与readonly的区别
markRaw是操作原始对象的，它的意义是将原始对象或者原始对象的某个浅层或深层property标记为“永远不允许被代理”。Vue3会给对象的第一层或某深层加一个标记__v_skip: true，这样，即便原始对象被reactive之后，得到的该层和更深层就不会被代理。
如果想给原始对象的某个property加markRaw，需要执行3步，先定义变量指向该property，然后markRaw这个变量得到新对象，然后让源对象的property指向新对象。
如果将加了标记的原始对象当做其他原始对象的属性，其他原始对象被reactive之后，加了标记的对象依然不会被reactive。也就是说，reactive见了__v_skip: true就绕着走。
注意：虽然Vue3只会在表层加标记，但是会影响深层的property。
markRaw与readonly的区别，在于侧重点不同：
markRaw允许被修改，但不允许被代理。这里尽管说允许修改，但是修改的意义不大，毕竟Vue的核心思想是响应式，在添加响应式之前修改意义不大。
readonly不允许被修改，但已经被代理。
它们两者相同点在于，从不同角度节省系统开销。
markRaw的用途：
首先说，直接给某个对象全盘markRaw是没有意义的，因为你就是开发者，你不想让某对象被reactive，那么你不去写reactive就好了啊。所以markRaw的用途应该是：允许对象被reactive，但是阻止对象的部分内容被reactive。
markRaw与shallowReactive的区别
| markRaw | shallowReactive | |
|---|---|---|
| 作用 | 阻止响应式 | 让浅层property响应式，不操作深层property |
| 浅层property | 阻止响应式 | 执行响应式 |
| 深层property | 阻止响应式 | 不执行响应式，也不阻止 |
如果希望阻止其他程序员将对象响应式，则可以使用markRaw来保护。
如果刚好打算不让从第2层到最深层的所有property响应式，那么用shallowReactive可能更好。
如果想要更定制化的阻止某些property被响应式，那么应当使用markRaw。例如下例中，x.b被标记，然后重复值给自己，此时再将x响应式，x.b依然没有被响应式。所以点击button不会有反应。
<template><div><button @click="s.b.c++">count is: {{ s.b.c }}</button></div></template><script>import { markRaw, reactive } from "vue";export default {setup() {let x = {a:1, b: {c: 2}};x.b = markRaw(x.b);let s = reactive(x);console.log(isReactive(s)); // trueconsole.log(isReactive(s.b)); // falsereturn {s};},};</script>
最后我们看ref和它的兄弟API。
ref与shallowRef的区别
| ref | shallowRef | |
|---|---|---|
| 本质 | reactive({value: 原始数据}) | shallowReactive({value: 原始数据}) |
| 区别点 | {value: 原始数据}被深层响应式 | 只有value被响应式，原始数据没有响应式 |
| 传入基本类型 | 两个API无差别 | 两个API无差别，性能考虑尽量用shallowRef |
| 传入引用类型 | value指向Proxy | value指向原始数据 |
shallowRef的作用是只对value添加响应式，因此，必须是value被重新赋值才会触发响应式。shallowRef的出现主要是为了节省系统开销。
下例中，点击button1会有反应，点击button2不会有反应。关键是点击button3，我们知道在<template>里，如果给s重新赋值，其实相当于给s.value重新赋值，由于value是响应式的，这时候button2和button3都会有变化。
<template><div><button @click="r.b.c++">count is: {{ r.b.c }}</button><button @click="s.b.c++">count is: {{ s.b.c }}</button><button @click="s = { a: 10, b: { c: 20 } }">count is: {{ s.b.c }}</button></div></template><script>import { ref, shallowRef } from 'vue';export default {setup() {let r = ref({ a: 1, b: { c: 2 } });let s = shallowRef({ a: 1, b: { c: 2 } });return {r,s,};},};</script>
toRef是咋回事
先看看这个题目，看看Proxy对象里面的基本数据是否具备响应式：
<template><div><button @click="r.a++">count is: {{ r.a }}</button><button>count is: {{ s }}</button></div></template><script>import { reactive, toRef } from "vue";export default {setup() {let r = reactive({a:1});console.log(r);let s = r.a;console.log(s);return {r,s};},};</script>
当我点击button1的时候，你说button2会变吗？并不会。变量s就是个基本数据，没有任何响应式。很不爽是不是？现在我改改，把let s = r.a;改成let s = toRef(r, 'a');，然后再试试？
可以看到button2的数字跟着变了！这就是toRef的作用：当一个变量指向一个对象的某个property，且这个property是基本数据类型时，必须用toRef才能变量与对象的响应式连接。如果这个property是引用数据类型，就不需要动用toRef。
toRef的用途之一是用于传参，可传递一个响应式的基本数据类型。
toRef还有一个特点是可以提前绑定，看个例子，r的原始数据并没有property叫c，但是我就任性，我就提前让s赋值为toRef(r, 'c')，这时候两个button上是没有数据的，毕竟property c是不存在的，在我点击button1之后，两个button都显示了3，说明提前绑定是有用的。
<template><div><button @click="r.c = 3">count is: {{ r.c }}</button><button>count is: {{ s }}</button></div></template><script>import { reactive, toRef } from "vue";export default {setup() {let r = reactive({a:{b:2}});console.log(r);let s = toRef(r, 'c');console.log(s);return {r,s};},};</script>
ref与toRef的区别
| ref | toRef | |
|---|---|---|
| 用法 | ref(原始值) | toRef(Proxy, 'xxprop') |
| 返回 | ref对象 | 同左 |
| 误区 | 不要给ref传入纯对象的属性，毫无意义且造成困惑，应传原始值 | 不要给toRef传入原始值，毫无意义且造成困惑，应传Proxy |
讲解一下误区。比如下例中：
点击button1，打印的ref对象是如期待的{ count: 4 }，视图也更新为4，但是原始值并没有变，依然是{ count: 3 }。这说明：给ref传纯对象的属性会造成困惑。
刷新页面，只点击button2，打印的ref对象变了，原始值也变了，但是视图没有更新，还是3。说明：给toRef传入原始值是错误的操作，应当传入Proxy，但也证明toRef对传入值是指向关系。
刷新页面，只点击button3，一切如期待，说明：上面的说法是正确的。
<template><div><p>{{ state1 }}</p><button @click="add1">增加</button><p>{{ state2 }}</p><button @click="add2">增加</button><p>{{ state3.a }} - {{ state4 }}</p><button @click="add3">增加</button></div></template><script>import { reactive, ref, toRef } from "vue";export default {setup() {const obj = { count: 3 };const state1 = ref(obj.count);const state2 = toRef(obj, "count");const state3 = reactive({ a: 5 });const state4 = toRef(state3, "a");function add1() {state1.value++;console.log("原始值obj：", obj);console.log("state1：", state1);}function add2() {state2.value++;console.log("原始值obj：", obj);console.log("state2：", state2);}function add3() {state4.value++;console.log("state3：", state3);console.log("state4：", state4);}return { state1, state2, state3, state4, add1, add2, add3 };},};</script>
toRef与toRefs的区别
toRefs可以看做批量版本的toRef。
| toRef | toRefs | |
|---|---|---|
| 用法 | toRef(Proxy, 'xxprop') | toRefs(Proxy) |
| 返回 | ObjectRefImpl对象 | 同左 |
| 作用 | 创建变量到Proxy属性的响应式连接 | 创建变量每个属性到Proxy每个属性的响应式连接 |
| 连接关系 | 一对一 | 多对多 |
下例中，当点击button1时，所有button都会有反应。
<template><div><button @click="r.c = 3">count is: {{ r.c }}</button><button>count is: {{ s }}</button><button>count is: {{ t.c.value }}</button></div></template><script>import { reactive, toRef, toRefs } from "vue";export default {setup() {let r = reactive({a:{b:2}, c: 4});console.log(r);let s = toRef(r, 'c');console.log(s);let t = toRefs(r);console.log(t.c)return {r,s,t};},};</script>
toRefs的一大用途是变相解构Proxy。首先了解一个常识，Proxy如果解构，基本数据会丢失响应式。现在我既想要解构Proxy，又不想丢失响应式，怎么办？可以使用toRefs。
下例中，变量c是基本数据，它不具备响应式，因此button1被点击之后，button2不会跟着变。如果将let {c} = r;改成let {c} = toRefs(r);，则变量c具备了响应式，button2会跟着变。
<template><div><button @click="r.c = 3">count is: {{ r.c }}</button><button>count is: {{ c }}</button></div></template><script>import { reactive, toRefs } from "vue";export default {setup() {let r = reactive({a:{b:2}, c: 4});let {c} = r;return {r,c};},};</script>
toRefs的简洁用法：
return {...toRefs(Proxy), others}可用于返回解构的Proxy，而不需要创建一个临时变量。
如果组件只需要返回一个解构的Proxy，可以更简略：return toRefs(Proxy)。
customRef是什么
customRef跟ref、toRef、toRefs有很大区别，它生成的ref对象会自定义get和set。
customRef的主要用途至少有2个：
时机上说，可以控制视图更新的时机，可以延迟更新。其他ref兄弟API都做不到。
内容上说，可以修改传入的原始数据，让原始数据与返回值不相同。其他兄弟API也做不到。
<template><div>{{text}} - <input v-model="text" /></div></template><script>function useDebouncedRef(value, delay = 200) {let timeoutreturn customRef((track, trigger) => {return {get() {track()return value},set(newValue) {clearTimeout(timeout)timeout = setTimeout(() => {value = newValue + 1console.log(value)trigger()}, delay)}}})}export default {setup() {return {text: useDebouncedRef('hello')}}}</script>
测试：在<input>里快速敲入一串字符，左边的{{text}}位置会延迟出现结果，而且会节流，而且console.log(value)也会延迟打印。
解释：track和trigger，其中track用于追踪，写在return之前。trigger是触发，用在赋值给value语句之后。
将ref改写成customRef应该怎么写？去掉延时，且value = newValue即可。
unref是什么
unref类似于toRaw。unref的本质就是解包，把{value: Proxy || 基本数据}解成Proxy || 基本数据。unref对toRefs创造的对象的各个属性也起作用，因为各个属性也是ref对象。
由于Vue3的开发原则是尽量不要直接修改内部值，对ref来讲就是尽量不要修改Proxy，如果某些场景下非要直接修改Proxy，需要用unref临时将ref还原为Proxy。与toRaw一样，修改完Proxy之后并不需要重新执行ref。
下例中，点击button1和button2，两个按钮都会有反应。
<template><div><button @click="r.b.c++">count is: {{ r.b.c }}</button><button @click="s.b.c++">count is: {{ s.b.c }}</button></div></template><script>import { ref, unref } from "vue";export default {setup() {let r = ref({a: 1, b: {c: 2}});let s = unref(r);return {r,s};},};</script>
toRaw与unref的区别
用这三行代码就很容易说明了：
const obj = { count: 3 };const state = ref(obj);console.log(toRaw(state.value) === toRaw(unref(state))); // true
说明：
当变量state为ref对象时，state.value === unref(state)为真，两边都是Proxy对象，也说明，想得到ref的Proxy，有2种方式：.value或者unref，完全等价。
当变量state为ref对象时，toRaw(state.value) === toRaw(unref(state))两边都是原始值，也说明想获得ref对象的原始值且原始值为引用类型时，有2种方式，toRaw(state.value)或者toRaw(unref(state))，如果原始值为基本类型，也有2种方式，state.value或者unref(state)。所以，toRaw并不是对ref没用，ref想得到原始对象就得用toRaw。
toRaw对ref对象无效，必须作用于ref.value。
triggerRef是什么
我们知道shallowRef返回的ref对象的value指向的是内部值，如果，我既想使用shallowRef生成ref对象（为了节省开销），又想偶尔修改value指向的内部值的某个property，又希望那个ref对象得到响应，我该怎么办？这时候可以用triggerRef。
下例中，如果注释掉triggerRef(r)，那么点击button不会看到任何反应，因为{a:{b:2}, c: 4}都是非响应式的。
<template><div><button @click="onClick">count is: {{ r.c }}</button></div></template><script>import { shallowRef, triggerRef } from "vue";export default {setup() {let r = shallowRef({a:{b:2}, c: 4});function onClick() {r.value.c = 6;triggerRef(r);}return {r, onClick};},};</script>
isRef是什么
这个不说了。
Vue 2的ref在Vue 3怎么用？
这算是一个附录。Vue 2的ref在Vue 3依然存在，依然那样标记：
<div ref="elA">div元素</div>
但是在setup() {}里并不是Vue 2那么用，而是定义一个顶层变量，值很简单，一律写成ref(null)即可，重要的是变量名，变量名必须与<div ref="elA">的elA一致，然后onMounted里才能获取、操作elA元素，elA.value就指向这个DOM元素，最后不要忘记return这个elA变量：
import { ref, onMounted } from 'vue'export default {setup() {const elA = ref(null);// 在挂载后才能通过 elA 获取到目标元素onMounted(() => {elA.value.innerhtml = '内容被修改'})return {elA}}}
学习更多技能
请点击下方公众号
