学习Vue3 第七章认识Reactive全家桶
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 = 8
-
state.first.second.c = 9
-
console.log(state);
-
}
-
-
-
-
-
</script>
-
-
-
<style>
-
</style>
这篇好文章是转载于:学新通技术网
- 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
- 本站站名: 学新通技术网
- 本文地址: /boutique/detail/tanhfjgahk
系列文章
更多
同类精品
更多
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
Android 11 保存文件到外部存储,并分享文件
Luke 10-12 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
excel下划线不显示怎么办
PHP中文网 06-23 -
excel打印预览压线压字怎么办
PHP中文网 06-22 -
TikTok加速器哪个好免费的TK加速器推荐
TK小达人 10-01 -
怎样阻止微信小程序自动打开
PHP中文网 06-13