在Vue 3中,shallowReactive和shallowRef是两种不同的响应式数据处理方式。 shallowReactive:shallowReactive用于创建一个浅层响应式对象。浅层响应式对象只会对对象的第一层属性进行响应式处理,而不会递归地对嵌套对象进行响应式处理。这意味着当嵌套对象的属性发生变化时,不会触发视图的更新。使用shallowReactive可...
shallowReactive:只处理对象最外层属性的响应式(浅响应式)。 shallowRef:只处理基本数据类型的响应式, 不进行对象的响应式处理。 什么时候使用? 如果有一个对象数据,结构比较深, 但变化时只是外层属性变化 ===> shallowReactive。 如果有一个对象数据,后续功能不会修改该对象中的属性,而是生新的对象来替换 ===> sh...
shallowReactive:只处理对象最外层属性的响应式(浅响应式)。 shallowRef:只处理基本数据类型的响应式, 不进行对象的响应式处理。 什么时候使用? 如果有一个对象数据,结构比较深, 但变化时只是外层属性变化 ===> shallowReactive。 如果有一个对象数据,后续功能不会修改该对象中的属性,而是生新的对象来替换 ===> sh...
1. 安装shallowreactive 要开始使用shallowreactive,首先需要安装它。可以使用npm或yarn来安装shallowreactive: ``` npm install shallowreactive ``` 或 ``` yarn add shallowreactive ``` 2. 导入shallowreactive 安装完成后,可以在应用程序中导入shallowreactive: ```javascript import { shallowreactive } from 'shallowre...
1.shallowReactive 与 shallowRef 注意点1: 问题:为啥shallowRef包裹的对象类型数据,不是响应式的? 答案:案例模拟如下 数据准备: let x = shallowRef({ y:0 }) console.log('***',x) --- let x = ref({ y:0 }) console.log('***',x) 1. 2. 3. 4. 5. 6. 7. 8. 9. 针对ref包裹的对象...
1. shallowReactive 函数 reactive() 的浅层作用形式。 只处理对象最外层属性的响应式(浅响应式)。 应用场景:如果一个对象属性数据,结构较深,但变化时只是外层属性变化。 <template> {{obj1.name}} {{obj1.info.age}} obj1Age {{obj2.name}} {{obj2.info.age}} {{obj...
柏拉文 越努力,越幸运 一、认识 shallowReactive是reactive的浅层作用形式。和reactive不同,这里没有深层级的转换:一个浅层响应式对象里只有根级别的属性是响应式的。属性的值会被原样存储和暴露,这也意味着值为ref的属性不会被自动解包了。 二、语法 ...
1.《vue3第三章》其它 Composition API(不常用,了解即可),包括shallowReactive 与 shallowRef、readonly 与 shallowReadonly等等 2.vue3知识点:shallowReactive 与 shallowRef 3.vue3知识点:readonly 与 shallowReadonly 4.vue3知识点:toRaw 与 markRaw
shallowReactive只会包装第一层的数据 默认情况它只能够监听数据的第一层。 如果想更改多层的数据,必须先更改第一层的数据,然后在去更改其他层的数据。这样视图上的数据才会发生变化。 使用shallowRef 非深度监听 开头已经说过了,shallowRef 函数,只能处理基本类型数据,为啥呢,因为 shallowRef 函数监听的是.value 变化。