Vue3之Reactive全家桶

reactive 申明响应式变量，但只能申明应用类型，例如Array、Object、Map和Set等，用来绑定复杂数据

 type F = {

    name:string,

    age:number

  }

  let form = reactive<F>({

    name:'安安',

    age:18

  })

  const changeForm = () => {

    form.age = 22

    form.name = '嘻嘻'

  }

ref和reactive的区别：ref支持所有类型 reactive只支持引用类型Array、Object、Map和Set等

ref取值赋值都需要.value,而reactive不需要

数组异步赋值问题：不能像vue2那样结构赋值[...aa,...bb]，必须使用数组.push()方法，或者包裹一层对象

let list = reactive<number[]>([1,2,3])

  const setList = () => {

    let aa = [4,5,6]

    list.push(...aa)

    console.log(list)

  }

readonly  拷贝一份proxy对象将其设置为只读 但被拷贝的本身不会收到影响

const obk = reactive({name:'aaa'})

const read = readonly(obk)

read.name不会被改变，只能读 但是obk.name='bb'可以被执行

shallowReactive 跟shallowRef性质一样