前端高阶1 - Vue3 + TS - 7-Reactive全家桶-绑定对象

reactive

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

• 使用reactive 去修改值无须.value

• 实例：

  • let person = reactive({

    • name: 'abc'
  • })
  • person.name = 'def'

数组异步赋值问题

• 解决方案1：使用push

  • 定义：let person = reactive<number[]>([])

  • 异步赋值：setTimeout(() => {

    • const arr = [1, 2, 3]
    • person.push(...arr)
    • console.log(person);
  • },1000)

• 方案2：包裹一层对象

readonly

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

• 实例：

  • const person = reactive({count:1})
  • const copy = readonly(person)

shallowReactive

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