04.vue3源码学习之ref实现
前言：
在实现ref和computed之前，先对以下问题做出一些思考
1.为什么在有reactive利用了proxy实现了数据劫持后，还需要用到ref
2.为什么ref的值调用要用.value的形式来取值
3.ref的性能比reative高？这到底是不是真的
带着这些问题，那我们就开始我们的探索之旅
1.reactive()的局限性
1.为什么不用reactive()一个API把所有的对象，数组，字符串，布尔等类型，全部代理成为响应式？
参考：proxy说明，proxy（target,handler),对于target的说明：要使用 Proxy 包装的目标对象（可以是任何类型的对象，包括原生数组，函数，甚至另一个代理）,那我们就理解了Proxy的代理仅对对象类型生效（对象，数组，Map,Set这样的集合数组），而对原始类型string,number和boolean等类型是无效
2.为什么对reactive()代理出的响应式对象，在那些时候会失去响应式？
1.代理对象重新赋值
<template>
<div @click="state.count++">测试 {{ state.count }}</div>
</template>
let state = reactive({ count: 0 })
// 上面的引用 ({ count: 0 }) 将不再被追踪（响应性连接已丢失！）
state = { count: 1 }
console.log(state) // { "count": 1}
可以看到，state被重新赋值后，他已经不是proxy会包裹的代理对象了，原因其实很简单：Vue的响应式系统是通过属性访问进行追踪的，因此我们必须始终保持对该响应式对象的相同引用，简单来说，就是我们这样重新赋值，堆内存空间已经改变
2.属性的重新赋值，属性的结构，属性传入一个函数
<template>
<div @click="state.count++">测试 {{ state.count }} {{ n }}</div>
</template>
let state = reactive({ count: 0 })
// n 是一个局部变量，同 state.count
// 失去响应性连接
let n = state.count
// 不影响原始的 state
n++
let { count } = state
// 不会影响原始的 state
count++
// 该函数接收一个普通数字，并且将无法跟踪 state.count 的变化
callSomeFunction(state.count)
得到显示页面
结论：这样直接取state的属性来赋值给一个变量，变量会失去响应式连接，参考基本数据类型的赋值
let a = 10;
let b = a;
b = 20;
console.log(a); // 此时a的值是多少，是 10？还是 20？
//10
总结：reactive()的种种限制归根到底是js没有可以作用于所有值类型的“引用”机制
2.ref()的诞生
基于reative()的限制，所有Vue提供了一个ref()方法允许我们可以创建可以使用任何值类型的响应式的ref
const count = ref(0)
console.log(count)
//RefImpl {
// "__v_isShallow": false,
// "__v_isRef": true,
// "_rawValue": 0,
// "_value": 0
// }
console.log(count.value) // 0
count.value++
console.log(count.value) // 1
ref()将传入参数的值包装成为一个带.value属性的ref对象，和响应式的对象属性类型，ref的.value属性也是响应式的，
一个包含对象类型值的 ref 可以响应式地替换整个对象：
const objectRef = ref({ count: 0 })
// 这是响应式的替换
objectRef.value = { count: 1 }
ref 被传递给函数或是从一般对象上被解构时，不会丢失响应性：
const obj = {
foo: ref(1),
bar: ref(2)
}
// 该函数接收一个 ref
// 需要通过 .value 取值
// 但它会保持响应性
callSomeFunction(obj.foo)
// 仍然是响应式的
const { foo, bar } = obj
简言之，ref() 让我们能创造一种对任意值的 “引用”，并能够在不丢失响应性的前提下传递这些引用。
但以下情况，仍跟reactive()一样
let state = ref({ count: 0 })
let n = state.value.count
// 不影响原始的 state
n++
let { count } = state.value
// 不会影响原始的 state
count++
// 该函数接收一个普通数字，并且将无法跟踪 state.count 的变化
callSomeFunction(state.value.count)
3.ref()的实现
1.ref和reactive的区别 reactive内部采用的proxy ref中内部使用的是defineProperty
2.ref的实现过程也是采用了函数柯里化的方式
3.本质上实现响应式，还是在get的时候调用track函数实现依赖收集，在set的时候，调用trigger函数实现依赖更新
- 实现ref函数
export function ref(value){
//将普通类型变成一个对象
return createRef(value) //通过柯里化，可以通过不同的传参，来得到不同的ref
}
function createRef(rawValue,shallow = false){
return new RefImpl(rawValue,shallow)
}
- 实现RefImpl类
const convert = (val) => isObject(val) ? reactive(val) : val
class RefImpl {
public _value //表示 声明了一个_value属性 但是没有赋值
public _v_isRef = true //产生的实例会被添加 _v_isRef 表示是一个ref属性
constructor(public rawValue,public shallow) { // 参数前面增加一个修饰符 标识此属性放到了实例上
this._value = shallow ? rawValue : convert(rawValue) //如果是深度 需要把里面的都变成响应式的
}
//类的属性访问器
get value(){ // 代理 取值取value 会帮我们代理到 _value上
track(this,'get','value')
return this._value
}
set value(newValue){
//比较两个值是否变化
if(hasChanged(newValue,this.rawValue)){
this.rawValue = newValue //新增会作为老值
this._value = this.shallow ? newValue : convert(newValue)
trigger(this,'set',value',newValue)
}
}
}
其实ref代码实现的过程很简单，大致上可以理解为：
1.判断传入进来的值，是不是对象类型的，如果是的话那么就调用reactive()进行劫持
2.如果不是对象，那么就调用的是defineProperty实现劫持方法
3.如果在对ref进行set的时候，如果赋值的是一个对象，那么就将该对象，再次调用reactive进行劫持
4.总结
那我们再对开头提出来的问题进行回顾
1..为什么在有reactive利用了proxy实现了数据劫持后，还需要用到ref
答：reactive是有很多局限性的，而且他调用的是proxy进行代理，只能对对象类型的进行代理劫持
2.为什么ref的值调用要用.value的形式来取值
答：我们希望ref() 让能创造一种对任意值的 “引用”,所以我们在内部将传入的值包装成为一个带.value属性的ref对象，并且让他具备响应式
3.ref的性能比reative高？这到底是不是真
答：不是真的，因为ref中传入的值是对象类型的时候，他内部会调用reactive，所以并不会存在ref的性能比reative高