【金秋打卡】第 8天 vue基础入门（下）| 2-4 toRef以及context参数（1）

这篇文章可以入选评委评选的最佳手记吗？期待ing…

学习内容：
一个是 composition API里面提供给我们的 toRef 的API；
另外就是我们之前讲过的setup，这个函数的第二个参数叫做context。

开始学习 toRef，‍‍之前我们学的是 toRefs 。‍‍

然后第就是 setup 里面的 context 的第二个参数。

代码示例：

代码解读：

首先我从里面引入 reactive 这样的内容，
然后定一个数据叫做data，‍‍它就是一个name dell，
然后我就把 data return出去，‍‍

在模板里面我可以直接用 data 点name就行了，保存一下，‍‍然后我们到浏览器上刷一下:

现在展示出 dell 没有任何的问题。‍‍

我们之前说我们做一个解构可以怎么做？

const叫name等于toRefs。‍‍然后把data传进来，当然 toRefs 你要引一下，这块要把name导出去，name就是一个‍‍响应式的数据，

比如说你写一个 setTimeout 两秒，然后让‍‍ name点value等于lee :

因为这个时候 name 被转化成一个 toRefs，toRefs 要改值的话得这么去改：

我们把‍‍响应式的引用改了之后应该就发生变化，一秒‍‍两秒会变成 lee，没有任何的问题:

假设我这里有一个age我把它改成age:

然后我把 age导出出去，这个时候我们会发现一个问题，‍‍一开始data里面并没有age，我把它提取出来，然后我去改，这样的话会生效吗？‍‍

如果会生效的话，一开始这个age应该是个空，然后变成 lee 。

那么看一下刷新一秒两秒，‍‍它不会有任何的变化：

控制台里面会报错，说value找不到：

那么说明什么？

toRefs 这种语法，‍‍它从 data 这样的一个显示对象里面去找数据的时候，如果找不到的话，‍‍
ta不会给 age一个默认的响应式的引用，
而是会给age一个 undefind。‍‍

那么这样的话，如果age一开始不存在于这个对象里的话，它后面就不具备响应式，你再改它也没有任何的效果，‍‍

如果想解决这个问题，我们就可以换一个语法，我们不用 toRefs 了，我们用toRef，‍‍然后我们这个age这么去写:

意思就是我从data这样的一个响应式对象里尝试取 age 这样的响应式数据，
如果能取到我就取到了，
如果取不到我就给ta一个默认空的响应式的数据。‍‍

即便age没有现在生成的新的变量，它也是一个响应式的空数据的内容，‍‍
那么你再对它进行赋值，它依然能够去具备响应式的一个特性。

保存一下，我们来看是不是这样的？我们刷一下，‍‍一开始什么也没有:

两秒钟之后我们看 lee 能展示出来了:

所以如果你想应对这种可能出现的‍‍对象里面没有对应的一个属性值的时候，又想让属性值一直具备响应式 特性的时候，‍‍
你就可以不用这个toRefs而使用toRef这样的一个语法。‍‍

所以这是 toRefs 语法它的一个意义和作用。‍‍
不过我建议大家不要这么写，‍‍一般来说如果你后面要用到 age 你不妨在这里直接给一个age等于空，

或者age给一个‍‍0 这样的一个默认值，

最好不要去后面往里面添加内容。