【Vue】ref，reactive 响应式引用的用法和原理（1）

问题清单：
这两个新的语法是解决什么样问题的？
响应式的引用的原理是什么？
响应式的引用有一个什么样的特性？

在之前的笔记中我们学习了 composition API 里面 setup 这个函数的使用。‍‍

现在我们继续 学习 composition API 里面的两个新的语法知识点，一个叫做reactive，一个叫做 ref。‍‍

我们来看一下这两个新的语法是解决什么样问题的？

代码示例：

代码解读：
我们来关注两个东西，一个叫做ref，‍‍一个叫做reactive，
我们定义一个 let 变量，‍‍name等于dell，

然后我再写一个延时器，setTimeout 两秒，‍‍
然后我让 name 等于 lee，我把name导出出去，然后页面上我来使用name，‍‍或者说模板里面我来使用name:

setup一开始等于dell，所以模版里肯定显示的是dell，

两秒之后 name改成lee，是不是它就会变成lee，我们可以到页面上刷新一下，看一下效果:

dell 两秒之后并没有改成 lee，

所以现在我的数据是分享式的一个数据，‍‍你也可以看到其实它就是一个普通的变量，这个变量它肯定不是一个响应式的变量，所以它变了‍‍模板也不会改变，只会维持它一开始导出的 dell 这样的一个值。‍‍

那么在composition API里面，实际上我们可以通过两个语法把这种‍‍普通的变量改成一个响应式的变量，或者我们叫做响应式的引用。

响应式的引用的原理是什么？
通过‍‍ proxy 对数据进行封装，当数据变化时‍‍触发模板等内容的更新。‍‍

我们可以举个例子先使用一下它，再来讲它的原理。
这里其实很简单，dell其实是一个普通的基础类型的数据，现在我用 ref 对‍‍ dell 这样的一个基础性数据做一个封装。

ref 处理‍‍基础类型的数据，
基础类型的数据 调用 ref 之后，它就会通过proxy，然后‍‍把 dell变成proxy 括号name或者说value‍‍ dell这样的响应式引用:

它的底层其实就是对 dell 做了一个proxy的封装，
然后因为proxy也就是‍‍这种双向绑定要用到的这种proxy的语法，

在js的原生里面，它支持传入对象的这种东西，‍‍所以 dell 是个基础类型，
我通过 ref 去处理它的时候，底层必须把它变成一个像 value dell 这样的对象，‍‍

所以 dell 就做了这样的一个转化 通过ref，
转化完了之后，它就变成了一个‍‍响应式的引用，响应式的引用有一个什么样的特性？

就是这种引用当你去改变它的值的时候，‍‍页面是可以跟着它去做变化的。‍‍
此时代码示例：

我们看因为 name 你对 dell 做转化之后，‍‍
它变成了一个对象，
{value:"dell"}这样的一个东西，‍‍所以你现在两秒钟之后想去改变 name的时候，你就不能直接去改变name，

必须得调name点value‍‍来去改变它的值才可以。‍‍
然后你再把name给返回出去，这里其实我们应该用 name点value:

保存一下，我们回到页面上刷新，大家会发现这个时候你点开控制台 说什么:

ta说‍‍ Uncaught:ref is not defined，
ta会说 ref这样的一个方法找不到，‍‍
其实 ref 应该怎么去找?

它从 Vue 里面去引入就行了，它是 Vue 提供给我们的一个语法，‍‍或者说一个composition API的语法，
我们到这里刷‍‍新，页面上也不报错，也不展示内容，‍‍

哎呀，不是说name的值都会存在value里面转化成这样的一个对象？

所以 dell 应该在‍‍name点value里面。
Vue 在做模板处理的时候，它会做一个转化。‍‍

也就是说当我在这写name的时候，ta如果知道name是一个‍‍ ref 返回的这样的一个响应式的引用的话，
它会自动的‍‍帮我们在底层调用name点value，所以在这里你就没必要自己再去写name点value了，直接写name就可以了：

保存一下我们的页面上刷新一下dell ，两秒钟之后你会发现它变成 lee 了‍‍:

普通的这种 js 基础类型的数据，通过 ref 一包装就变成了响应式的引用，‍‍可以实现一个响应式的效果了。‍‍

一定要记得 ref 处理的是基础类型的数据，‍‍像字符串、数字通过它来处理是比较合适的基础类型。‍‍
像这种数组和对象形式的东西，我就不建议大家使用 ref来处理，ref 也不方便去处理。‍‍‍‍

ref 的特点就是见到这种基础性的数据，因为本身 proxy 它没法‍‍代理这种基础性的数据，比如说你直接代理这个 dell是不行的，
就是 ref 底层做的事情，‍‍会先把这种基础性的数据转化成一个value 冒号这样的对象，‍‍

然后再去通过proxy做转化，所以其实 ref 只适合于处理基础类型的数据，你再传一个对象进去，‍‍value 然后后面在它等于这个对象其实意义也不大。‍‍

接着我们说除了这么去写我们的代码之外，我们还可以再换一个写法去写:
const reactive 等于6，

然后我们用reactive去写这样的代码，reactive处理‍‍非基础类型的数据，
代码示例：

需求是什么：

两秒钟去改变nameObj‍‍里面 name 的值，然后把对象返回出去，我们到页面上刷新，看一下有没有这样的变化：

数一数一二两秒是没有任何变化的，‍‍其实这种普通的对象本身它确实也就没有这种响应式的特性，但如果我们想让它具备响应式，‍‍
在 Vue 里面，ta会提供给我们一个新的语法特性叫做reactive，它是专门处理这种‍‍非基础类型数据的，比如说对象或者数组，我们先来看一看对象，

这里面我们这么去写，reactive，然后把这个对象变成一个响应式的引用。‍‍

也是通过proxy‍‍把这个name dell 变成一个proxy 这样响应式的引用。‍‍

这样的一个响应式引用，我们直接可以去改它里面的点name，

你看上面‍‍如果它是这样的一个形式，我可以直接改它的value:

下面也是这样的一个形式，我想改变它的直接改name就行了。‍‍当然我return也return一个nameObj。

上面我想用它里面的 name 也是这么写:

只要加一个reactive给一个对象再去调用对象里面的东西，就具备响应式的特性了，我们看一下是不是这样的，‍‍刷新:

所以我们能够看到，当你去做这样的一个非基础类型数据的响应式的处理的时候，就可以用reactive来做处理。‍‍