`reactive`

用来绑定复杂的数据类型例如对象数组

reactive 源码约束了我们的类型

他是不可以绑定普通的数据类型这样是不允许会给我们报错

import { reactive} from 'vue'let person = reactive('sad')

绑定普通的数据类型我们可以使用昨天讲到ref

你如果用ref去绑定对象或者数组等复杂的数据类型我们看源码里面其实也是去调用reactive

使用reactive 去修改值无须.value

reactive 基础用法

import { reactive } from 'vue'
let person = reactive({name:"小满"
})
person.name = "大满"

数组异步赋值问题

这样赋值页面是不会变化的因为会脱离响应式

let person = reactive<number[]>([])
setTimeout(() => {person = [1, 2, 3]console.log(person);},1000)

解决方案1

使用push

import { reactive } from 'vue'
let person = reactive<number[]>([])
setTimeout(() => {const arr = [1, 2, 3]person.push(...arr)console.log(person);},1000)

方案2

包裹一层对象

type Person = {list?:Array<number>
}
let person = reactive<Person>({list:[]
})
setTimeout(() => {const arr = [1, 2, 3]person.list = arr;console.log(person);},1000)

readonly

拷贝一份proxy对象将其设置为只读

import { reactive ,readonly} from 'vue'
const person = reactive({count:1})
const copy = readonly(person)//person.count++copy.count++

shallowReactive

只能对浅层的数据如果是深层的数据只会改变值不会改变视图

案例

<template><div><div>{{ state }}</div><button @click="change1">test1</button><button @click="change2">test2</button></div>
</template><script setup lang="ts">
import { shallowReactive } from 'vue'const obj = {a: 1,first: {b: 2,second: {c: 3}}
}const state = shallowReactive(obj)function change1() {state.a = 7
}
function change2() {state.first.b = 8state.first.second.c = 9console.log(state);
}</script> <style>
</style>

学习Vue3 第七章（认识Reactive全家桶）相关推荐

《SysML精粹》学习记录--第七章
<SysML精粹>学习记录第七章:序列图序列图简介序列图元素消息约束组合片段交互使用小结第七章:序列图序列图简介序列图是另一种可以用来说明系统动态行为信息的Sys ...
Effective C++ 学习笔记第七章：模板与泛型编程
第一章见 Effective C++ 学习笔记第一章:让自己习惯 C++ 第二章见 Effective C++ 学习笔记第二章:构造.析构.赋值运算第三章见 Effective C++ 学习笔记 ...
《Go语言圣经》学习笔记第七章接口
<Go语言圣经>学习笔记第七章接口目录接口是合约接口类型实现接口的条件 flag.Value接口接口值 sort.Interface接口 http.Handle接口 erro ...
学习Vue3 第六章（认识Ref全家桶）
视频教程小满Vue3(第六章 Ref 全家桶 & 源码解析)_哔哩哔哩_bilibili ref 接受一个内部值并返回一个响应式且可变的 ref 对象.ref 对象仅有一个 .value pr ...
Android 渗透测试学习手册第七章不太知名的 Android 漏洞
第七章不太知名的 Android 漏洞作者:Aditya Gupta 译者:飞龙协议:CC BY-NC-SA 4.0 在本章中,我们将了解一些不太知名的 Android 攻击向量,这在 Andr ...
吴恩达机器学习学习笔记第七章：逻辑回归
分类Classification分为正类和负类 (规定谁是正谁是负无所谓) 吴恩达老师举例几个例子:判断邮箱是否是垃圾邮箱一个在线交易是否是诈骗一个肿瘤是良性的还是恶性如果我们用之前学习的lin ...
广义相对论-学习记录16-第七章-史瓦西解与粒子运动1
第七章:史瓦西解与粒子运动史瓦西解是真空解:Rμν=0R_{\mu\nu}=0Rμν=0,并且具有下述两个条件: (1)引力源是球对称的,即gμνg_{\mu\nu}gμν中只能含有下述 ...
【机器学习-周志华】学习笔记-第七章
记录第一遍没看懂的记录觉得有用的其他章节: 第一章第三章第五章第六章第七章第八章 ...
DSP原理学习笔记--第七章--增强直接存储器访问(EDMA)
第七章增强直接存储器访问(EDMA) 第七章增强直接存储器访问(EDMA) DMA 数据传输 EDMA的特点 EDMA控制器的结构 EDMA传输中的术语 EDMA传输方式同步事件 EDMA通道与 ...
java学习笔记-第七章：面向对象编程（基础部分）
第七章:面向对象编程(基础部分) 总体内容类与对象引出类与对象类与对象概述类与对象的关系示意图属性概念及其细节类与对象快速入门案例对象内存布局类与对象内存分配机制引申:java内存的 ...

学习Vue3 第七章（认识Reactive全家桶）

`reactive`

readonly

shallowReactive

学习Vue3 第七章（认识Reactive全家桶）相关推荐

最新文章

热门文章