vue3原始值响应方案及响应丢失问题怎么解决

大家好，我们又见面了啊~本文《vue3原始值响应方案及响应丢失问题怎么解决》的内容中将会涉及到等等。如果你正在学习文章相关知识，欢迎关注我，以后会给大家带来更多文章相关文章，希望我们能一起进步！下面就开始本文的正式内容~

一、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 的能力。

今天关于《vue3原始值响应方案及响应丢失问题怎么解决》的内容就介绍到这里了，是不是学起来一目了然！想要了解更多关于Vue3的内容请关注golang学习网公众号！