快速使用Vue3最新的15个常用API（1W5+字详解，前端面试前端基础

setup() {

const obj = {count: 3}

const state1 = ref(obj)

const state2 = reactive(obj)

console.log(state1)

console.log(state2)

}

}

来看一下打印结果

注意： 这里指的 .value 是在 setup 函数中访问 ref 包装后的对象时才需要加的，在 template 模板中访问时是不需要的，因为在编译时，会自动识别其是否为 ref 包装过的

那么我们到底该如何选择 ref 和 reactive 呢？

建议：

1. 基本类型值（String 、Nmuber 、Boolean 等）或单值对象（类似像 {count: 3} 这样只有一个属性值的对象）使用 ref

2. 引用类型值（Object 、Array）使用 reactive

（5）toRef

---

toRef 是将某个对象中的某个值转化为响应式数据，其接收两个参数，第一个参数为 obj 对象；第二个参数为对象中的属性名

代码如下：

但其实表面上看上去 toRef 这个API好像非常的没用，因为这个功能也可以用 ref 实现，代码如下

乍一看好像还真是，其实这两者是有区别的，我们可以通过一个案例来比较一下，代码如下

{{ state1 }}

<button @click=“add1”>增加

{{ state2 }}

<button @click=“add2”>增加

我们分别用 ref 和 toRef 将 obj 中的 count 转化为响应式，并声明了两个方法分别使 count 值增加，每次增加后打印一下原始值 obj 和被包装过的响应式数据对象，同时还要看看视图的变化

ref：

可以看到，在对响应式数据的值进行 +1 操作后，视图改变了，原始值未改变，响应式数据对象的值也改变了，这说明 ref 是对原数据的一个拷贝，不会影响到原始值，同时响应式数据对象值改变后会同步更新视图

toRef：

可以看到，在对响应式数据的值进行 +1 操作后，视图未发生改变，原始值改变了，响应式数据对象的值也改变了，这说明 toRef 是对原数据的一个引用，会影响到原始值，但是响应式数据对象值改变后会不会更新视图

总结：

1. ref 是对传入数据的拷贝；toRef 是对传入数据的引用

2. ref 的值改变会更新视图；toRef 的值改变不会更新视图

（6）toRefs

---

了解完 toRef 后，就很好理解 toRefs 了，其作用就是将传入的对象里所有的属性的值都转化为响应式数据对象，该函数支持一个参数，即 obj 对象

我们来看一下它的基本使用

打印结果如下：

返回的是一个对象，对象里包含了每一个包装过后的响应式数据对象

（7）shallowReactive

---

听这个API的名称就知道，这是一个渐层的 reactive，难道意思就是原本的 reactive 是深层的呗，没错，这是一个用于性能优化的API

其实将 obj 作为参数传递给 reactive 生成响应式数据对象时，若 obj 的层级不止一层，那么会将每一层都用 Proxy 包装一次，我们来验证一下

来看一下打印结果：

设想一下如果一个对象层级比较深，那么每一层都用 Proxy 包装后，对于性能是非常不友好的

接下来我们再来看看 shallowReactive

来看一下打印结果：

结果非常的明了了，只有第一层被 Proxy 处理了，也就是说只有修改第一层的值时，才会响应式更新，代码如下：

{{ state.a }}

{{ state.first.b }}

{{ state.first.second.c }}

<button @click=“change1”>改变1

<button @click=“change2”>改变2

来看一下具体过程：

首先我们点击了第二个按钮，改变了第二层的 b 和第三层的 c，虽然值发生了改变，但是视图却没有进行更新；

当我们点击了第一个按钮，改变了第一层的 a 时，整个视图进行了更新；

由此可说明，shallowReactive 监听了第一层属性的值，一旦发生改变，则更新视图

（8）shallowRef

---

这是一个浅层的 ref，与 shallowReactive 一样是拿来做性能优化的

shallowReactive 是监听对象第一层的数据变化用于驱动视图更新，那么 shallowRef 则是监听 .value 的值的变化来更新视图的

我们来看一下具体代码

{{ state.a }}

{{ state.first.b }}

{{ state.first.second.c }}

<button @click=“change1”>改变1

<button @click=“change2”>改变2

首先看一下被 shallowRef 包装过后是怎样的结构

然后再来看看改变其值会有什么变化

我们先点击了第二个按钮，发现数据确实被改变了，但是视图并没随之更新；

于是点击了第一个按钮，即将整个 .value 重新赋值了，视图就立马更新了

这么一看，未免也太过麻烦了，改个数据还要重新赋值，不要担心，此时我们可以用到另一个API，叫做 triggerRef ，调用它就可以立马更新视图，其接收一个参数 state ，即需要更新的 ref 对象

我们来使用一下

{{ state.a }}

{{ state.first.b }}

{{ state.first.second.c }}

<button @click=“change”>改变

我们来看一下具体过程

可以看到，我们没有给 .value 重新赋值，只是在修改值后，调用了 triggerRef 就实现了视图的更新

（9）toRaw

---

toRaw 方法是用于获取 ref 或 reactive 对象的原始数据的

先来看一段代码

{{ state.name }}

{{ state.age }}

<button @click=“change”>改变

来看看具体过程

我们改变了 reactive 对象中的数据，于是看到原始数据 obj 和被 reactive 包装过的对象的值都发生了变化，由此我们可以看出，这两者是一个引用关系

那么此时我们就想了，那如果直接改变原始数据 obj 的值，会怎么样呢？答案是： reactive 的值也会跟着改变，但是视图不会更新

由此可见，当我们想修改数据，但不想让视图更新时，可以选择直接修改原始数据上的值，因此需要先获取到原始数据，我们可以使用 Vue3 提供的 toRaw 方法

toRaw 接收一个参数，即 ref 对象或 reactive 对象

上述代码就证明了 toRaw 方法从 reactive 对象中获取到的是原始数据，因此我们就可以很方便的通过修改原始数据的值而不更新视图来做一些性能优化了

注意： 补充一句，当 toRaw 方法接收的参数是 ref 对象时，需要加上 .value 才能获取到原始数据对象

（10）markRaw

---

markRaw 方法可以将原始数据标记为非响应式的，即使用 ref 或 reactive 将其包装，仍无法实现数据响应式，其接收一个参数，即原始数据，并返回被标记后的数据

我们来看一下代码

{{ state.name }}

{{ state.age }}

<button @click=“change”>改变

我们来看一下在被 markRaw 方法处理过后的数据是否还能被 reactive 包装成响应式数据

从图中可以看到，即使我们修改了值也不会更新视图了，即没有实现数据响应式

（11）provide && inject

---

与 Vue2中的 provide 和 inject 作用相同，只不过在Vue3中需要手动从 vue 中导入

这里简单说明一下这两个方法的作用：

• provide ：向子组件以及子孙组件传递数据。接收两个参数，第一个参数是 key，即数据的名称；第二个参数为 value，即数据的值

• inject ：接收父组件或祖先组件传递过来的数据。接收一个参数 key，即父组件或祖先组件传递的数据名称

假设这有三个组件，分别是 A.vue 、B.vue 、C.vue，其中 B.vue 是 A.vue 的子组件，C.vue 是 B.vue 的子组件

// A.vue