vue3原始值响应方案及响应丢失问题解读
作者：cj要学习
前言
我们了解到非原始值是使用 proxy 进行代理的，但是 proxy 无法对 原始值进行代理。vue2中 object.defineproperty 也无法直接截取原始值，但是我们是将数据放入 data 中，对 data 整个对象进行代理，自然就使得 data 中的原始值也能进行响应。
但是 vue3 没有 data 选项，哪是怎么实现原始值响应的？这就要介绍我们要学的内容了。
注意：下面的实现原理并非是真正的源码，可以看做是极简后的源码核心实现。这样做的目的是如果放入源码，源码非常多且杂，不能一目了然看出其核心原理实现。
一、ref 的引入
ref 就是解决 proxy 无法直接代理原始值的问题。我们先来看 ref 的使用：
const name = ref('小黑子')ref 是怎么实现的呢？其实就是用对象“包裹”原始值。我们再来看一下 ref 的实现：
function ref(val){
// 使用对象包裹原始值
const wrapper = {
value:val
}
// 利用 reactive 将对象变成响应式数据
return reactive(wrapper)
}ref 的实现就是这么简单。
ref 对原始值响应主要就做了这两件事：
- 1、使用对象包裹原始值。
- 2、使用 reactive 将包裹对象变为响应式数据。
二、isref 的实现
我们使用 ref 创建一个响应式对象，但是我们要怎么区别一个对象是普通对象还是 ref 对象呢？于是我们的 isref 出现了。
我们看一下它的使用：
const name = ref('cj') console.log(isRef(name)); // true那么它的实现原理是怎样的呢？主要实现还是在 ref API内部，我们来看一下具体实现代码：
function ref(val){
const wrapper = {
value:val
}
Object.defineProperty(warpper,'__v_isRef',{
value:true
})
return reactive(wrapper)
}原来就是在 ref 内部给 包裹对象添加一个不可枚举不可写的属性，并且值为 true 。这样我们就可以检查该属性来判断是不是 ref 了。
function isRef(val) {
return val.__v_isRef ?? false
}三、响应丢失
什么是响应丢失？响应丢失就是响应式数据不进行响应了。我们来看下方代码：
const obj = reactive({foo:1,bar:2})
const {foo,bar} = obj
obj.foo++ // foo不会改变，还是 1上面的 obj 已经响应丢失了，也就不会触发重新渲染。为什么会这样呢？其实就是因为使用了结构赋值，展开运算符也会使其失效。
const obj = reactive({foo:1,bar:2})
const newObj = {...obj}
obj.foo++ // newObj.foo不会改变，还是 1这就相当于重新定义了新的数据，而不再是原来的响应数据了，自然也就不具有响应式能力。
1、toRef登场
toRef 就是为了解决响应丢失的问题。我们来看一下它的实现：
function toRef(obj,key) {
const wrapper = {
get value() {
return obj[key]
},
set value(val) {
obj[key] = val
}
}
Object.defineProperty(wrapper,'__v_isRef',{
value:true
})
return wrapper
}传入两个参数，第一个是响应式数据，第二个是 obj 的一个键。
- 第一部分就是设置声明一个对象，对象先设置了 value 属性的 get 用于将访问 toRef 值时，将返回传入的响应式数据对应的属性值，然后设置了 value属性的 set 用于将设置 toRef 值时，就拿取设置的新值更新响应式数据对应的属性值。也就是说，toRef 返回的对象还是利用的响应式数据。
- 第二部分用于设置返回的数据是 ref 数据。因为 toRef 返回的数据类似 ref 数据，为了统一就直接认定为是一个 ref 数据。
- 第三部分就是返回响应式数据对应声明的属性对象
这样 toRef 就解决了响应丢失的问题。
2、toRefs 加入
toRefs 就是将整个响应式对象进行解构响应化。实现代码如下：
function toRefs() {
const ret = {}
for (const key in obj) {
ret[key] = toRef(obj,key)
}
return ret
}使用 for 循环逐一对属性进行转换。这下我们再来看一下使用：
const obj = reactive({foo:1,bar:2})
const {foo,bar} = toRefs(obj)
obj.foo++ // foo.value变为2了3、诡异的其它响应式丢失情况
当属性为非原始值的时候，解构之后还是依然能响应
const obj = reactive({foo:{age:18},bar:2})
const {foo,bar} = obj
obj.foo.age++ // foo.age变为2了
obj.bar++ // bar没有改变，还是1这是为什么？原因其实很简单，因为非原始值赋值的是引用地址，也就是说解构后的变量其实还是指向原响应式数据的属性。而原始值就是单纯的赋值，就不会进行响应。
reactive 响应数据重新赋值后不再响应，ref 响应数据赋值后依然响应
let obj1 = reactive({foo:1,bar:2})
let obj2 = ref({foo:1,bar:2})
// 假如 obj1 与 obj2 直接展示在页面上
obj1 = {boo:2,far:3} // 页面 obj1 还是 {foo:1,bar:2}
obj2.value = {boo:2,far:3} // 页面 obj2 变为 {boo:2,far:3} 了 这又是什么原因？reactive 重新赋值响应丢失，就是重新赋值了新的对象，自然就成为普通数据了，不再响应。而 ref 还是能响应，是因为 ref 在内部进行 set 处理。代码如下：
function ref(val){
const wrapper = {
value:val
set value(val) { // isObject 这里代表判断是否是非原始值的一个方法
value = isObject(val) === 'Object' ? reactive(val) : val
}
}
Object.defineProperty(warpper,'__v_isRef',{
value:true
})
return reactive(wrapper)
}我们明白了，其实 ref 在 set 中判断了设置的新值是否是非原始值，如果是就调用 reactive 将其变为响应式数据。
四、unref 自动脱 ref
我们在使用 ref 响应式数据时，会觉得总是需要 .value 来获取值，增加了用户的心智负担。
那可不可以不通过 .value 访问值，而时直接就能够访问值呢？
这样用于也不用关心某个数据到底是不是 ref 数据，需不需要通过 value 属性去获取值。
这就到了我们的 unref 出手了。unref 实现了自动脱 ref 能力，自动脱 ref 就是如果读取的属性是一个 ref，则直接将该 ref 对应的 value 属性值返回。
我们来看一下 unref 的实现：
function unref(target) {
return new Proxy(target,{
get(target,key,receiver) {
const value = Reflect.get(target,key,receiver)
return value.__v_isRef ? value.value : value
},
set(target,key,newValue,receiver) {
const value = target[key]
if (value.__v_isRef) {
value.value = newValue
return true
}
return Reflect.set(target,key,newValue,receiver)
}
})
}我们发现 unref 内部使用 Proxy 代理了目标对象，接收一个对象作为参数，并返回该对象的代理对象。当我们访问 unref 的数据时，触发 get 捕获器，然后再捕获器内部判断了传入对象是否是 ref 对象，如果是就直接返回 ref 的 .value 值。如果不是则直接返回代理对象。
当对 unref 返回的代理对象设置值时，触发 set 捕获器，如果代理的对象时 ref ，就将需要设置的新值赋值给 .value，不是则直接进行赋值处理。
知识扩展
当我们使用 ref 创建响应式数据后，将其在模板中展示，为什么不用 .value 了。
<script setup lang="ts">
import { ref } from 'vue'
const name = ref('小黑子')
</script>
<template>
<div>{{ name }}</div>
</template>其实原因很简单，在组件 setup 中声明的 ref 响应式数据会传递给 unref 函数进行处理。所以在模板中访问 ref 的值，无需通过 value 属性来访问。
我们使用的 reactive 其实也是有 自动脱 ref 功能的，看一下下方例子：
const count = ref(0)
const obj = reactive({conut})
obj.count // 0 我们可以看见 obj.count 是一个 ref 响应式数据。在 count 外层包裹一层对象，再传递给 reactive 后，再访问 obj.count 时就不需要再通过 value 属性访问值了。
也正是因为 reactive 内部也同样实现了自动脱 ref 的能力。
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。