文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

vue3原始值响应丢失如何解决

2023-07-06 10:39

关注

今天小编给大家分享一下vue3原始值响应丢失如何解决的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。

一、ref 的引入

ref 就是解决 proxy 无法直接代理原始值的问题。我们先来看 ref 的使用:

const name = ref('小黑子')

ref 是怎么实现的呢?其实就是用对象“包裹”原始值。我们再来看一下 ref 的实现:

function ref(val){    // 使用对象包裹原始值    const wrapper = {        value:val        }    // 利用 reactive 将对象变成响应式数据    return reactive(wrapper)}

ref 的实现就是这么简单。

ref 对原始值响应主要就做了这两件事:

二、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} = objobj.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 的一个键。

这样 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} = objobj.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原始值响应丢失如何解决”这篇文章的所有内容,感谢各位的阅读!相信大家阅读完这篇文章都有很大的收获,小编每天都会为大家更新不同的知识,如果还想学习更多的知识,请关注编程网行业资讯频道。

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯