介绍reactive

reactive和ref都是把我们想要的数据变成响应式的数据，两者还是有区别的，ref是支持所有的类型，reactive只支持引用类型 Array Object 等

import { reactive } from "vue";
 
type M = {
  name: string,
  age: number
}
let datalist = reactive<M>({
  name: '小石',
  age: 18
})

在我们改变reactive包裹的值的时候，不需要在.value的方式去操作了，直接使用就好了，datalist.name就可以获取到小石的name了，渲染dom和v2的写法还是一样的，还需要注意的是reactive是proxy代理的对象，注意直接赋值的话会把这个代理的对象直接覆盖的，是不能直接赋值的，dom不会渲染的，

举例：如果是数组，可以利用操作数组的方法去添加数据,再借助扩展运算符...xxx,对象的话，就是数组中定义对象

//数组
let datalist = reactive<string[]>([])

const change = (() => {
  let res = ['A', 'B', 'C'];
  datalist.push(...res)
})
//对象
let datalist = reactive<{
  arr:string[]
}>({
  arr: []
})

const change = (() => {
  let res = ['A', 'B', 'C'];
  datalist.arr = res
})

介绍 readonly

我们知道想将属性设置为只读的，设置readonly即可，但你不知道的是readonly和reactive一起使用，readonly就会受到影响，工作中用的不多

介绍 ShallowReactive

ShallowReactive是浅层的，修改数据只能是浅层的修改，dom是不会得到渲染的，是不能修改最里面的，最深层的，想修改，只能修改最外面的value

Vue3的reactive全家桶的使用

介绍reactive

介绍 readonly

介绍 ShallowReactive