vue3原始值响应方案及响应丢失问题解读
前言
我们了解到非原始值是使用 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 的能力。
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了Vue 插件及浏览器本地存储，插件通常用来为Vue添加全局功能，包含install方法的一个对象。更多相关介绍，需要的小伙伴可以参考下面文章内容2022-05-05
创建Vue3项目有两种常见的方式,一种是想vue2版本一样使用脚手架工具创建,创建vue3项目的脚手架必须是4版本以上的,另一种方法就是使用vite创建,这篇文章主要给大家介绍了关于如何使用vite创建vue3项目的相关资料,需要的朋友可以参考下2022-11-11
vue3+vite实现低版本浏览器兼容的解决方案(出现白屏问题)
项目全线使用vue3的时候,自然使用的是配套更加契合的vite打包工具,于是自然而然会用到很多新的语法,本文给大家介绍了vue3+vite实现低版本浏览器兼容的解决方案(出现白屏问题),需要的朋友可以参考下2024-04-04
vue3的ref,computed,reactive和toRefs你都了解吗
这篇文章主要为大家详细介绍了vue3的ref,computed,reactive和toRefs，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助2022-03-03
这篇文章主要介绍了Nuxt.js实战和配置，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-08-08
本文主要介绍了vue elementUI实现自定义正则规则验证，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-03-03
这篇文章主要为大家介绍了vue设计与实现合理的触发响应示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-08-08
vue-router+vuex addRoutes实现路由动态加载及菜单动态加载
本篇文章主要介绍了vue-router+vuex addRoutes实现路由动态加载及菜单动态加载，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-09-09
这篇文章主要介绍了关于Vue ui 的没反应、报错问题解决总结，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-09-09
在实际项目开发过程中，如果公共数据比较多我们会使用vuex做公共状态管理，但是在对浏览器进行刷新操作的时候，会导致vuex内的数据丢失，这种情况有些时候是没问题的，但是有的时候我们需要某些数据可以持久化的保存，这样就需要做对应的处理2023-01-01
最新评论