iis服务器助手广告广告
返回顶部
首页 > 资讯 > 精选 >vue3原始值响应丢失如何解决
  • 476
分享到

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

2023-07-06 10:07:40 476人浏览 薄情痞子
摘要

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

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

    一、ref 的引入

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

    const name = ref('小黑子')

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

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

    ref 的实现就是这么简单。

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

    • 使用对象包裹原始值。

    • 使用 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} = 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 的一个键。

    • 第一部分就是设置声明一个对象,对象先设置了 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} = 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原始值响应丢失如何解决”这篇文章的所有内容,感谢各位的阅读!相信大家阅读完这篇文章都有很大的收获,小编每天都会为大家更新不同的知识,如果还想学习更多的知识,请关注编程网精选频道。

    --结束END--

    本文标题: vue3原始值响应丢失如何解决

    本文链接: https://www.lsjlt.com/news/357943.html(转载时请注明来源链接)

    有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

    本篇文章演示代码以及资料文档资料下载

    下载Word文档到电脑,方便收藏和打印~

    下载Word文档
    猜你喜欢
    • vue3原始值响应丢失如何解决
      今天小编给大家分享一下vue3原始值响应丢失如何解决的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。一、ref 的引入ref ...
      99+
      2023-07-06
    • vue3原始值响应方案及响应丢失问题怎么解决
      一、ref 的引入ref 就是解决 proxy 无法直接代理原始值的问题。我们先来看 ref 的使用:const name = ref('小黑子')ref 是怎么实现的呢?其实就是用对象“包裹”原始值。我们再来看一下 ref...
      99+
      2023-05-14
      Vue3
    • vue3原始值响应方案及响应丢失问题解读
      目录前言一、ref 的引入二、isref 的实现三、响应丢失1、toRef登场2、toRefs 加入3、诡异的其它响应式丢失情况四、unref 自动脱 ref   ...
      99+
      2023-05-16
      vue3原始值响应 vue3响应丢失 vue3响应
    • vue3中给数组赋值丢失响应式的解决
      目录vue3给数组赋值丢失响应式的解决reactive响应式数据赋值问题总结vue3给数组赋值丢失响应式的解决 由于vue3使用proxy,对于对象和数组都不能直接整个赋值。 只有...
      99+
      2023-05-16
      vue3给数组赋值 vue3丢失响应式 vue3赋值
    • Vue3中reactive丢失响应式问题怎么解决
      本篇内容主要讲解“Vue3中reactive丢失响应式问题怎么解决”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“Vue3中reactive丢失响应式问题怎么解决”吧!问题描述:使用 reacti...
      99+
      2023-07-05
    • Vue3 ref构建响应式变量失效如何解决
      const title = ref("Hello, Vue 3!");ref 接收参数并将其包裹在一个带有 value 属性的对象中返回,然后可以使用该属性访问或更改响应式变量的值,比如上面的代码我们使用 count.v...
      99+
      2023-05-14
      Vue3 ref
    • 如何解析Vue3的响应式原理
      本篇文章给大家分享的是有关如何解析Vue3的响应式原理,小编觉得挺实用的,因此分享给大家学习,希望大家阅读完这篇文章后可以有所收获,话不多说,跟着小编一起来看看吧。Vue2响应式原理回顾// 1.对象响应化:遍历每个key,定义g...
      99+
      2023-06-22
    • vue3中defineProps传值使用ref响应式失效详解
      子组件接收父组件的传参。 父组件: <template> <Son :data="data"/> </template> <script ...
      99+
      2024-04-02
    • vue3结构赋值失去响应式引发的问题怎么解决
      这篇文章主要介绍“vue3结构赋值失去响应式引发的问题怎么解决”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“vue3结构赋值失去响应式引发的问题怎么解决”文章能帮助大家解决问题。原始值的响应式系统的...
      99+
      2023-07-02
    • Windows桌面的开始菜单丢失该如何解决
      这期内容当中小编将会给大家带来有关Windows桌面的开始菜单丢失该如何解决,文章内容丰富且以专业的角度为大家分析和叙述,阅读完这篇文章希望大家可以有所收获。近日帮他们处理电脑问题,发现不熟悉计算机的人弄出来的问题确实是匪夷所思啊 有人不知...
      99+
      2023-06-14
    • windows qt5core.dll丢失如何解决
      本篇内容介绍了“windows qt5core.dll丢失如何解决”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!qt5core.dll丢失解...
      99+
      2023-07-02
    • win7丢失nodedll如何解决
      如果在Windows 7上丢失了nodedll文件,您可以尝试以下步骤解决问题:1. 重新安装Node.js:重新下载并安装最新版本...
      99+
      2023-08-26
      win7
    • vue3解构赋值失去响应式引发的问题思考
      目录前言原始值的响应式系统的实现为什么ES6 解构,不能随意使用会破坏他的响应式特性proxy背景实现原理解构 props 对象,因为它会失去响应式直接赋值rea...
      99+
      2024-04-02
    • jquery load js丢失如何解决
      这篇文章主要讲解了“jquery load js丢失如何解决”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“jquery load js丢失如何解决”吧!jquery load js丢失的解决...
      99+
      2023-07-05
    • 电脑丢失xlive.dll如何解决
      今天小编给大家分享一下电脑丢失xlive.dll如何解决的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。电脑丢失xlive.d...
      99+
      2023-07-01
    • java中数值范围的精度丢失如何解决
      java中数值范围的精度丢失如何解决?相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能解决这个问题。1.java中int,float,long,double取值范围public class Te...
      99+
      2023-05-31
      java ava
    • php-cgi丢失msvcr110如何解决
      这篇文章主要讲解了“php-cgi丢失msvcr110如何解决”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“php-cgi丢失msvcr110如何解决”吧!什么是PHPCGI丢失MSVCR1...
      99+
      2023-07-05
    • windows msvcr120.dll丢失如何解决
      这篇文章主要介绍“windows msvcr120.dll丢失如何解决”,在日常操作中,相信很多人在windows msvcr120.dll丢失如何解决问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”windo...
      99+
      2023-07-01
    • 电脑丢失msvcp如何解决
      今天小编给大家分享一下电脑丢失msvcp如何解决的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。电脑丢失msvcpdll文件解...
      99+
      2023-07-01
    • Vue3 ref构建响应式变量失效怎么解决
      这篇“Vue3 ref构建响应式变量失效怎么解决”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“Vue3 ...
      99+
      2023-07-06
    软考高级职称资格查询
    编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
    • 官方手机版

    • 微信公众号

    • 商务合作