分析一下vue3下会造成响应式丢失的情况

前言

在我们从vue2过渡到vue3的时候,对于数据响应式的变化其实是懵懵懂懂的。从以往直接在data函数里面定义变量到每一次都要使用ref/reactive时,是有些不适应的。但问题不大,毕竟在大前端时代中,如果不及时跟上时代的步伐,不仅技术没跟上,面试还容易被卡。所以今天来聊聊在使用vue3开发时对于数据响应式的理解。

 

vue3的响应式是基于 proxy 

从vue2的 Object.defineProperty 到vue3的 proxy 可谓是一个质的飞跃。vue2的响应式是需要递归+遍历每一个对象的属性进行数据劫持,而在vue3中只需要对对象层进行监听即可。好了话不多说,开始讲解一些常见的响应式问题。 

 

 1、refreactive之间的关系

如果我们用ref定义基本类型时,实际上还是使用 Object.defineProperty 进行数据劫持监听。但如果是定义引用类型时,底层代码上是借用 reactive 函数进行数据劫持的。因此ref和reactive关系是紧凑的。通过源码的我们是可以确认的。

9231ff4b5d1d9e1247db4b4cc37a89e.jpg

d91570718cc6d0a48585e0fb7f28b67.png

我们可以看到,this_value = useDirectValue ? newVal : toReactive(newVal) 是进行了判断,而 useDirectValue 是进行判断是否是浅层的、仅可读的数据。 那么如果我们传入的是一个对象,那么就会进入 toReactive(newVal) 这一步。 toReactive 函数就是进行reactive定义的函数入口。

  

2、reactive定义的变量重新赋值会失去响应式,而ref不会 

 我们一开始接触vue3的时候,会对这个问题十分的不解,只是知道有这个问题而不知其根,今天就来讲讲这个问题。

import {ref,reactive} from 'vue';
let test = {age:2};
let obj = reactive({age:1})
let obj1 = ref({age:1})obj = test;  //在vue2的响应式中,人们习惯直接赋值了。在进入到vue3的时候,大部分的开发者没有看文档或者基于vue2的习惯,会进行这样的赋值情况。比如对象的再次初始化的情况。
obj1.value = test;

通过reactive()包含的对象是进行了内部的proxy代理,因此具有响应式。但是像test这个对象,它是没有进行数据劫持的,而对象赋值的时候实际上是引用地址赋值。那么obj这个对象变成了一个没有数据劫持的引用地址,那么它也就失去了响应式。
但是obj1重新赋值时会保留自身的响应式。其实很简单,跟上图的代码是有关的。细心的人会发现,在 set 函数里面有这么一段代码。

image.png

是的,在我们对ref定义的变量重新赋值时会进入 set 函数,且重新赋值的是一个对象的话,那么它会再次进入 toReactive 函数进行数据劫持,这就是为什么ref定义的变量重新赋值对象时依旧保留响应式的根本原因。

let refObj = ref({name:1});
//内部set函数触发,进行判断,发现赋值是一个对象,那么就会对对象进行reactive,即等同于
refObj = reactive({value:{name:1}});
refObj.value.name = 1;  //以上就是ref不丢失响应式的本质

 

3、解构响应式对象会造成响应式丢失

通过上面我都知道,不管是ref还是reactive定义的对象变量,都会经过 reactive 函数来进行proxy代理。但是即使是对象,也会出现响应式丢失的情况。 

<script setup>
import {reactive,onMounted} from 'vue';
let obj = {a:18,aa:{age:18},aaa:{friend:{age:18}}
}
let rect = reactive(obj);
let {a,aa,aaa} = rect;
onMounted(()=>{setTimeout(()=>{a = 2;aa.age = 2;aaa.friend.age = 2;},2000)
})
</script>
<template><div>{{a}}</div><div>{{aa.age}}</div><div>{{aaa.friend.age}}</div>
</template>

 上面的运行结果就是,a变量没有响应式,aa和aaa都是响应式。这是因为在解构赋值中,如果是原始类型的话是按照值传递,如果是引用类型的话是按照引用地址传递。
除此之外 reactive() 定义的变量中 get函数 有这样的一个处理

5959afd368f4ae4b06221dbd21c6e95.png

df026a23aaf0a495b2dded1e26dceab.png

那么在上面的代码中,就是这样的情况。

a = rect.a; //rect.a是一个基本类型,所以是直接赋值
aa = rect.aa; //rect.aa是一个引用类型,在内部处理时触发条件判断,且非可读对象即从Map数据结构中返回已经代理的响应式对象
aaa = rect.aaa //跟rect.aa一个道理

 因此以后对响应式对象进行解构时,记住以上的内部判断逻辑就可以拿捏它们了(#^.^#)。
当然,对vuex或者pinia的取值也是这个道理,也就是为什么需要借助 computed() 来实现响应式了。因此 computed() 能返回响应式。

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/28531.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

WEB集群——负载均衡集群

目录 一、 LVS-DR 群集。 1、LVS-DR工作原理 2、LVS-DR模式的特点 3、部署LVS-DR集群 3.1 配置负载调度器&#xff08;192.168.186.100&#xff09; 3.2 第一台web节点服务器&#xff08;192.168.186.103&#xff09; 3.3 第二台web节点服务器&#xff08;192.168.186.…

LeetCode96. 不同的二叉搜索树

96. 不同的二叉搜索树 文章目录 [96. 不同的二叉搜索树](https://leetcode.cn/problems/unique-binary-search-trees/)一、题目二、题解 一、题目 给你一个整数 n &#xff0c;求恰由 n 个节点组成且节点值从 1 到 n 互不相同的 二叉搜索树 有多少种&#xff1f;返回满足题意的…

qt qml中各种Layout之间是如何对齐的?

问题描述&#xff1a; qt qml中下一个RowLayout如何对齐顶部到上方的ColumnLayout的底部略低一些间隔的位置&#xff1f; 我们怎么使用achors去锚定位置&#xff1f; 这些都是可以用anchors锚定属性&#xff0c;以及margin来设置的。 解决办法&#xff1a; 要实现将下一个R…

使用dockerfile安装各种服务组件

使用dockerfile安装各种服务组件 elasticsearch、minio、mongodb、nacos、redis 一、使用dockerfile安装elasticsearch:7.8.0 1、Dockerfile文件 FROM elasticsearch:7.8.0 #添加分词器 ADD elasticsearch-analysis-ik /usr/share/elasticsearch/plugins/elasticsearch-anal…

喆啡酒店十周年丨啡越时间限,ALL BY 10VE!

啡越时光热爱为伴 十年前&#xff0c;秉持对咖啡馆文化及复古风格的喜爱&#xff0c;喆啡酒店创造全新的Coffetel品类&#xff0c;将充满「温暖」「愉悦」「咖啡香」的格调体验带给消费者&#xff0c;成为无数人「旅途中的啡凡存在」。 十年间&#xff0c;喆啡酒店以热爱化为…

Dev控件 Gridcontrol,gridview 实现多选功能

在网上看了好多实现dev控件GridControl多选功能的方法&#xff0c;都很麻烦&#xff0c;其实GridControl有一个自带的实现多选功能的控件&#xff0c;很简单。 实现效果如下 无需代码代码&#xff0c;使用GridControl中自带的多选功能&#xff0c;在界面直接设置即可 1.找到要…

Redis的安装方法与基本操作

目录 前言 一、REDIS概述 二、REDIS安装 1、编译安装 2.yum安装 三、Redis的目录结构 四、基础命令解析 五、在一台服务器上启动多个redis 六、数据库的基本操作 &#xff08;一&#xff09;登录数据库 &#xff08;二&#xff09;基础命令 七、Redis持久化 &#xff08;一&…

小白编写一个Chrome

步骤 1&#xff1a;了解插件的基本结构和功能 首先&#xff0c;向小白解释什么是Chrome插件&#xff0c;它是如何工作的&#xff0c;以及它可以做什么。强调插件可以修改网页内容、添加功能等。 步骤 2&#xff1a;准备工作 安装Chrome浏览器&#xff1a;确保小白的计算机上…

遇到无法复现的 Bug

当我们在软件开发过程中遇到无法复现的 Bug 时&#xff0c;这可能会让我们感到头疼和困惑。处理这种 Bug 需要一些技巧和方法来帮助我们更好地解决问题。本篇博客将为大家总结一些常用的技术手段和策略&#xff0c;希望能对开发者们在日常工作中遇到类似问题时提供一些帮助。 …

84. 柱状图中最大的矩形

题目描述 给定 n 个非负整数&#xff0c;用来表示柱状图中各个柱子的高度。每个柱子彼此相邻&#xff0c;且宽度为 1 。 求在该柱状图中&#xff0c;能够勾勒出来的矩形的最大面积。 示例 1: 输入&#xff1a;heights [2,1,5,6,2,3] 输出&#xff1a;10 解释&#xff1a;最…

分立式BUCK电路原理与制作持续更新

一、分立式BUCK电路总体原理图 下面改图包含了电压环和电流环。 二、BUCK电路与LDO的区别 LDO不适合在压差大的环境下使用&#xff0c;因为三极管因为CE极承受了压差&#xff0c;压差越大损耗的功率就越大&#xff0c;将三极管换成MOS管&#xff0c;MOS管两端的压差很小所以效…

什么是行级锁和表级锁

行级锁和表级锁是数据库中常见的两种锁机制&#xff0c;用于在多个事务并发访问数据库时控制数据的访问权限和并发操作。 行级锁&#xff08;Row-Level Locking&#xff09;&#xff1a; 行级锁是指在数据库表中对每一行数据进行锁定&#xff0c;只有被锁定的行才不能被其他事…

【Spring专题】手写简易Spring容器过程分析

前置知识 《【Spring专题】Spring底层核心原理解析》 思路整理 我们在上一节《【Spring专题】Spring底层核心原理解析》课里面有简单分析过一个Spring容器的一般流程&#xff0c;所以&#xff0c;本节课我们这里尝试写一下简易的Spring容器。 手写源码示例 一、手写前的准…

List、Map、Set打印

List List&#xff1a;和数组类似&#xff0c;List可以动态增长&#xff0c;查找元素效率高&#xff0c;插入删除元素效率低&#xff0c;因为会引起其他元素位置改变。 普通[1,2] 1.循环 2.System.out.println(list); int数组[1,2,3,4,5,6,1,2,3] 1.for (int[] array : list)…

【ARM64 常见汇编指令学习 16 -- ARM64 SMC 指令】

文章目录 ARMv8 同步异常同步异常指令SMC TYPE 上篇文章&#xff1a;ARM64 常见汇编指令学习 15 – ARM64 标志位的学习 下篇文章&#xff1a;ARM64 常见汇编指令学习 17 – ARM64 BFI 指令 ARMv8 同步异常 在ARMv8架构中&#xff0c;同步异常主要包括以下几种&#xff1a; Un…

Llama 2:开放基础和微调聊天模型

介绍 大型语言模型(llm)作为高能力的人工智能助手,在复杂的推理任务中表现出色,这些任务需要广泛领域的专家知识,包括编程和创意写作等专业领域。它们可以通过直观的聊天界面与人类进行交互,这在公众中得到了迅速而广泛的采用。 法学硕士的能力是显著的考虑到训练的表面上…

重生之我要学C++第七天(匿名对象、内部类)

构造函数的隐式类型转化 1.单参数构造函数隐式类型转换 来看下面的代码 #include<iostream> using namespace std; class A { public:A(int x){_a x;} private:int _a; }; int main() {A a 3;return 0; } 此处这句代码 A a 3; 对于这里&#xff0c;编译完全正确&…

Mac M1 安装Oracle Java 与 IEDA

文章目录 1 官网下载2 安装IDEA参考 1 官网下载 https://www.oracle.com/ 使用finder中的拖拽进行安装即可 2 安装IDEA https://www.jetbrains.com/zh-cn/idea/download/?sectionmac 同样的&#xff0c;下载完后拖拽安装即可 参考 Mac M1 安装Java 开发环境 https://blog.…

HTML 元素的 class 和 id 属性有何区别?

聚沙成塔每天进步一点点 ⭐ 专栏简介⭐ 唯一性⭐ 选择器权重⭐ JS操作⭐ CSS和JavaScript引用⭐ 写在最后 ⭐ 专栏简介 前端入门之旅&#xff1a;探索Web开发的奇妙世界 记得点击上方或者右侧链接订阅本专栏哦 几何带你启航前端之旅 欢迎来到前端入门之旅&#xff01;这个专栏…

python+vue生成条形码码并展示

需求 最近想做一个小工具&#xff0c;大概要实现这样的效果&#xff1a;后端生成条形码后&#xff0c;不保存到服务器&#xff0c;直接返回给前端展示。 大概思路是&#xff0c;通过 python-barcode库 生成条码的字节流&#xff0c;生成字节流后直接编码成base64格式返回给前…