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)