开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第8天，点击查看活动详情

前面几篇，基本上是vue3的基础内容，也就是你写组件的基础语法，但是真正写好一个组件，你还需要对vue3新的响应式系统有所了解。

我们之前有说到，vue3的响应式API主要有ref和reactive,那么我们就从真实例子出发,看一下怎么使用这两个api。

首先，我是不建议把所有数据都放在一个reative里的。除非你是在写全局的状态的存储，这时候我们一般需要放在一个变量里，方便管理。

ref

ref在vue2中其实不存在的，因为我们都知道，vue2其实并没有ref这个概念的，由于使用的defineProperty的限制，它实际上只能用于对象之上，所以我可以理解，vue2就是把你定义的全部状态放到一个对象里，然后使用defineProperty去实现响应，然后通过一些hack，让你的this.xxx ---> this.$data.xxx。

但是在vue3中，我们重新设计了一种数据格式，ref.它的大概结构如下，在这种结构下，我们可以通过代理value属性来实现响应式(PS.这里是我个人理解，不一定对)

interface ref{
    value:any;
    _value:any;
    _isRef:boolean;
}

由此可以看出，当我们赋值时，我们要修改value属性。

const a = ref('')
//修改值
a.value = '123'
// 读取值
a.value === '123'

很多人可能觉得很麻烦，一不注意就忘写value。这时候就能体现用const的优势，如果你在赋值的时候忘写.value,那么编辑器会报错。那么，当你读取的时候忘写.value，怎么办呢

vue3提供了一个新的api，unref，它是自动判断这个变量是否是ref，如果是ref就返回它的value。因此我们上面那个代码可以写成unref(a) === '123',这样就可以不用管.value了。

当你在template中使用时，不用关心.value，vue会自动处理。

同时，你有没有想过，ref真的只能处理基本类型吗？

这里我要介绍另一个api:shallowRef.这也是我常用的一个api,有的时候处理引用类型，不一定非要用reactive。但这个api有一个特点，是value的地址发生改变时才会触发更新等等。

const obj = shallowRef({a:1})
// 此时赋值不会更新页面
obj.value.a = 2
// 此时会更更新
obj.value = {a:2}

我最常用的做法是，新建一个shallowRef，调取接口，如果接口返回正常，我给shallowRef.value赋值，如果接口报错或者什么，我不赋值，这样页面更新次数会更少。

本章内容到此结束，下一章我们来看看reactive的基本使用

vue3就应该这样学-8

ref