全面解析Vue3 Reactive家族和Ref家族API

作者: microkof | 来源:发表于2020-12-30 11:18 被阅读0次

前言

你是不是习惯了Vue2的赋值即响应式？Vue2还有个Vue.observable但你从没用过？结果Vue3像跳跳糖一样跳出来这么多的响应式API，你有没有懵逼的感觉？

不慌，挨个学。由于官方文档写的晦涩难懂，所以我写下这篇。原创：简书microkof。

首先说明，全文提到的“基本数据”是指“数据类型为基本数据类型的数据”，“原始数据”是指被转变为响应式数据之前的纯对象或基本数据。

reactive

Vue 3的根基。返回对象的响应式副本，响应式转换是“深层”的——它影响所有嵌套property。返回Proxy对象，不等于原始对象。建议只操作Proxy对象，不要操作原始对象。

官方建议，对来自于服务器的数据或者注定要响应式的数据执行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对象，它有一个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的二次包装，ref定义的数据被访问的时候要用.value。

到此，我们清楚了ref与reactive都必须存在的理由，那么，reactive有一套兄弟API，ref也有一套，它们都是干什么用的？先看reactive的：

reactive与shallowReactive的区别

打印的话，乍一看没有区别，但是，shallow的中文意义是“浅层的”，shallowReactive不代理深层property，只会指向原始对象的深层property。

注意，给shallowReactive传入Proxy是没有意义的，即便这么做，直接返回该Proxy。

shallowReactive的用途是：ajax得到一个List之后，假如每个元素对象不需要被修改，只用于被展示，那么此时没必要深层响应，这时候用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)); // true
    console.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)); // true
    console.log(isReactive(s.b)); // false
    return {
      s
    };
  },
};
</script>

最后我们看ref和它的兄弟API。

ref与shallowRef的区别

	ref	shallowRef
本质	reactive({value: 原始数据})	shallowReactive({value: 原始数据})
区别点	{value: 原始数据}被深层响应式	只有value被响应式，原始数据没有响应式
传入基本类型	两个API无差别	两个API无差别
传入引用类型	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>

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>

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 timeout
  return customRef((track, trigger) => {
    return {
      get() {
        track()
        return value
      },
      set(newValue) {
        clearTimeout(timeout)
        timeout = setTimeout(() => {
          value = newValue + 1
          console.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>

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是什么

这个不说了。