上一篇文章咱们讲了reactive的源码解析，信任咱们现已对其现已有了深刻的了解，那么ref和它有什么不同呢？
这一篇文章，咱们就来了解一下ref是怎样完成的。上一篇文章提到，reactive是用于让目标变成呼应式，那么原始类型怎样办呢，运用ref完成吗，，没错，正如咱们所想的那样，原始类型的呼应式完成正是依托ref，而且ref功用更为强壮，它还能使目标变成呼应式，也便是说，它涵盖了reactive的功用。
引进
import { ref } from 'vue';
const count = ref(1)
console.log(count.value); // 1
上面的打印结果是1，信任咱们都能承受，可是为什么count后边要接.value呢。
首先呢，ref回来的是一个目标，访问目标里面的特点运用.xxx没缺点吧，至于为什么是.value，咱来看看这个目标里面有什么：
console.log(count.value);
咱们也看到了，里面封装的便是value，所以入情入理。那么究竟是怎样完成的呢？
完成一个简略的ref
咱们现已知道reactive完成的中心便是Proxy，那么ref肯定是不能这样的，因为Proxy只能承受目标作为为参数。所以咱们只能自己打造一个署理函数来完成呼应式。那应该怎样做呢？首先咱们得知道
- 当数据是目标时，继续运用Proxy署理
- 在函数内部咱们也运用一个
this.__V_isRef = true特点来记载是否现已是呼应式 - 运用
this._value = target存放传进来的数据 -
get value() {}用于获取值 相当于Proxy中的get -
set value(newVal) {}用于修正值 相当于Proxy中的set
class RefImal { // 创建一个结构函数，用于将val变成呼应式
constructor(target) {
this.__V_isRef = true // 给现已署理过的target打上标记,用于判断是否现已是呼应式
if(typeof target !== 'object' || target === null) {
this._value = target
} else { // 目标运用Proxy署理
this._value = new Proxy(target,{
get: (target,key,receiver) => {
const res = Reflect.get(target,key,receiver) // 获取值
// 搜集副作用函数（即用到了这个特点的函数）
track(target,key) // 用于搜集副作用函数，具体代码参考上一篇reactive的文章
return res
},
set: (target,key,value,receiver) => {
Reflect.set(target,key,value,receiver) // 修正值
// 值改变时触发副作用函数
trigger(target,key) // 用于触发副作用函数，具体代码参考上一篇reactive的文章
return true
}
})
}
}
// 获取值
get value() {
const res = this._value
if(typeof res === 'object' && res !== null) {
return res // 是目标，现已搜集过副作用函数，直接回来
}
track(this, 'value')
return res
}
// 修正值
set value(newVal) {
this._value = newVal
trigger(this, 'value')
return true
}
}
上面的是中心，接下来便是主体部分，这个比较简略，和reactive差不多
export function ref(target) {
// 判断是否现已是呼应式
if(target.__V_isRef){
return
}
// 将val变成呼应式
const refimal = new RefImal(target)
// 回来val
return refimal
}
这样咱们就完成了一个简略的ref，是不是很简略，接下来咱们来说说它们的差异。
差异
- 功用方面：
-
ref的功用显然是比reactive强壮的，它不仅可以使原始类型变成呼应式，还能使引用类型变成呼应式。 -
reactive只能使目标变成呼应式。
- 运用：
-
ref署理的数据在运用时要加上xxx.value,假如署理的数据是目标还要加上key，如xxx.value.key -
reactive署理的数据运用时只需要xxx.key - 所以原始类型的署理咱们一般运用
ref，目标一般运用reactive，这便是为什么ref明明涵盖了reactive的功用，还要打造一个reactive
假如您也和我相同，在预备春招。欢迎加我微信shunwuyu，这里有几十位专心去大厂的友友可以相互鼓励，分享信息，模拟面试，共读源码，齐刷算法，手撕面经。来吧，友友们！
