shallowReactive：只处理对象最外层属性的响应式（浅响应式）。
shallowRef：只处理基本数据类型的响应式, 不进行对象的响应式处理。
什么时候使用?
- 如果有一个对象数据，结构比较深, 但变化时只是外层属性变化 ===> shallowReactive。可以做一些性能的优化。
- 如果有一个对象数据，后续功能不会修改该对象中的属性，而是生新的对象来替换 ===> shallowRef。

不管用的是 ref、reactive、shallowReactive、shallowRef，定义得到返回的数据、第一层指定是响应式数据，只不过是里数据往不往深挖这个问题。

shallowReactive 对比 reactive？

shallowReactive 浅层次的响应式:只是考虑对象类型的第一层响应式数据, 深层次是不被考虑的;
reactive：会遍历所有层次的数据, 给你调换成响应式；

<template><h4>{{ person }}</h4><h2>姓名: {{ name }}</h2><h2>年龄: {{ age }}</h2><h2>薪资: {{ job.j1.salary }} k</h2><button @click="name += '~'">修改姓名</button><button @click="age++">修改年龄</button><button @click="job.j1.salary++">修改薪资</button>
</template><script>
import { toRefs, shallowReactive } from "vue";
export default {name: "Demo",setup() {// shallowReactive 浅层次的响应式:只是考虑对象类型的第一层响应式数据, 深层次是不被考虑的;// reactive：会遍历所有层次的数据, 给你调换成响应式let person = shallowReactive({name: "张三",age: 18,// 层次很浅job里面的内容不是响应式的了！job: {j1: {salary: 20,},},});return {person,...toRefs(person),};},
};
</script>

ref 对比 shallowRef？

传入基本类型 ref(0) 的结果是等同于 shallowRef(0) 的！

不同的是: 如果是传入的是一个对象的？

shallowRef ()：不去处理对象类型的响应式数据；只能做基本类型的响应式数据。
ref()：
1. 对于对象类型的数据是通过: 底层是会求助 reactive 变成一个proxy代理对象, 从而实现了响应式！
2. 对于基本数据类型数据是通过: Object.defineProtytype() 实现get set 实现响应式;

<template><h4>当前的x.y值是: {{ x.y }} </h4><!-- 如果有一个对象数据，后续功能不会修改该对象中的属性，而是生新的对象来替换 ===> shallowRef。 --><!-- 将整个对象替换掉就会触发更新 --><button @click="x={y: 20}">点我x+1</button>
</template><script>
import { reactive, toRef, toRefs, shallowReactive, shallowRef, ref } from "vue";
export default {name: "Demo",setup() {/*** 情况1: 传入基本类型  ref(0) 的结果是等同于 shallowRef(0) 的！* 不同的是: 如果是传入的是一个对象 ? *  *  ref 与 shallowRef 的区别在于?*    shallowRef 不去处理对象类型的响应式数据; 只能做基本类型的响应式数据*  ref : 如果传入一个对象类型的数据?*      对于基本数据类型数据是通过:  Object.defineProtytype() 实现get set 实现响应式*      对于对象类型的数据是通过: 底层是会求助 reactive 变成一个proxy 代理对象    */let x = shallowRef({y:0})return {x};},
};
</script>

Day 11-常用 Composition API_shallowReactive shallowRef相关推荐

10个常用python标准库_【循序渐进学Python】11.常用标准库
安装完Python之后,我们也同时获得了强大的Python标准库,通过使用这些标准库可以为我们节省大量的时间.这里是一些常用标准库的简单说明.更多的标准库的说明,可以参考Python文档 sys 模块 ...
2016/07/11 常用正则表达式大全（转）
网上找到的常用正则表达式,留着以后可能用得上,正则表达式实在是不好写,只好拿来主义了,在Delphi中没有自己带有正则表达式的组件,靠第三方了,都说PerlRegEx 是首选, 去这里下载,官方网站: ...
c++11 常用语法
1.using用法 typedef void (*ptr)(int); using ptr = void (*)(int); 2.可调用对象 1.函数指针 2.具有operator()成员函数的对象( ...
QIIME 2教程. 22命令行界面q2cli(2020.11)
文章目录命令行界面`q2cli` 基本用法 Basic usage 开启命令行补全Enable command-line tab completion Bash Zsh 验证标签页完成 Verify ...
Java 常用API的运用，效率及技巧
1. Java面向对象基本概念 2. System 3. String, StringBuffer 4. 数值,字符,布尔对象与简单类型的操作 5. Class ...
VIM 使用技巧(常用提取)
支持中文: 在用户主目录中的.vimrc就加入下面二行 let &termencoding=&encoding set fileencodings=utf-8,gbk,ucs-bom, ...
建筑电气工程设计常用图形和文字符号_怎么看懂建筑电气工程图？用最直白方式，教你基础识图！超级详细...
如何看懂建筑电气工程图?我们可能知道AutoCAD,也可能知道在迅捷CAD图库下载建筑电气工程图纸,还可能会使用CAD绘制简单的图形对象.但是,当我们需要进行建筑识图的时候,你也可能连里面的经典图纸 ...
Linux之vi和vim编辑器常用命令
一.一般模式以vi打开一个档案就直接进入一般模式了(这是默认的模式).在这个模式中, 你可以使用『上下左右』按键来移动光标,你可以使用『删除字符』或『删除整行』来处理档案内容, 也可以使用『复制.贴 ...
Linux常用指令（ubuntu）
1. 操作系统作用(了解) 对上提供软件运行支持,对下控制硬件的运行 2. 操作系统分类(了解) 桌面(Windows).对服务器(Linux).嵌入式(Linux).移动设备操作系统(IOS\And ...

Day 11-常用 Composition API_shallowReactive shallowRef

shallowReactive 对比 reactive？

ref 对比 shallowRef？

Day 11-常用 Composition API_shallowReactive shallowRef相关推荐

最新文章

热门文章