Vue3源码系列之ref、toRef及toRefs的实现

本文主要是介绍Vue3源码系列之ref、toRef及toRefs的实现，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

前言 ref和reactive的区别

• reactive内部采用的proxy，ref内部采用的是defineProperty
• ref也可以放对象，只是取值的时候需要多取一层，如果是对象用reactive更加合理
• reactive你如果放普通类型，也就是非对象会直接返回，这个原因可以从我之前的博文中查找
• ref的出现就是因为reactive处理不了基本类型

  Ref核心源码   第一步 源码目录下创建ref.ts文件，创建ref函数   我们接下来要做的第一步就是将传入的普通类型变成一个对象，核心方法是createRef   插一句，源码写到现在，是不是发现很多方法里面又调其它方法，包了一层，原因就是我们其它的api也可能用到，并且通过传递不同的参数去实现不同的功能。所以说Vue3源码基本上都是高阶函数+科里化   第二步 createRef方法接收两个参数，value和是否是浅的   它内部需要返回一个实例-RefImpl，把参数传进去   RefImpl类   然后利用类的属性访问器，取值的时候track来进行依赖收集，设置值的时候调用trigger去触发更新 复用了我们之前写reactive时封装的track和tringger方法   可能有人会问了，我文章开头的时候说ref底层是利用的defineProperty，那在哪里呢？其实我们刚才写的代码经过babel转化成es5代码就是defineProperty   然后我们再去处理下_value   当我们取值时取的就是_value   当我们更新值的时候去比较一下新值和老值是否有变化，如果有变化就把新值作为老值   同时我们还要去把_value给改了，改成newVal，最后再去触发更新   然后再去处理shallow，如果是深度需要把里面的都编程响应式的   在我们设置值的时候也要去考虑一下shallow   此时你是不是就明白了，如果ref传入多层对象，底层也是会去调用reactive去把它变成响应式     toRef核心源码 可以把一个对象的值转化成ref类型   内部也会产生一个实例，它用的类跟ref不是同一个类   ObjectRefImpl类 相当于我们将某一个key对应的值，转化为ref，就是暴露出一个属性的代理出去，并不会做其它事情，所以这个属性是否是响应式的，取决于代理的对象target是否是响应式的。   toRef的使用场景 当我们从一个reactive处理过的对象拿出来某个属性进行操作的时候，你去重新给拿出来的这个属性赋值，并不会产生什么效果，因为拿出来的值就仅仅是个字符串，不会是响应式的。所以我们为了防止拿出来的值是个字符串，我们需要用toRef做一层代理，让   假如说我想代理多个呢？toRefs就诞生了，不然你总不能一个一个去代理吧   toRefs核心源码 参数可能是对象也可能是数组   有时候我们想把reactive处理过的值结构出来，但是结构出来的数据就不是响应式的了，所以我们需要toRefs处理一下，相当于Vue自己写了个对象解构方法   再多唠叨一下toRefs的使用场景 我们这样做，在模板中必须得state.来取，不太友好，有点麻烦，我想在模板中直接用，这个时候我们用toRefs 这样我们就可以在模板中直接用了

这篇关于Vue3源码系列之ref、toRef及toRefs的实现的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！