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>
