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全家桶）的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。