Vue3 Reactive全家桶

Reactive全家桶

1、reactive：用于绑定复杂数据类型（引用数据类型）

注意：不能绑定基本数据类型

问题一：

数组异步赋值：这样赋值脱离了响应式

import { reactive } from 'vue';
let arr = reactive<number[]>([]);
setTimeout(() => {
    arr = [1, 2, 3];
    console.log(arr);// 数据变化了，但模板没变化
}, 100);

解决方法一：使用push方法

import { reactive } from 'vue';
let arr = reactive<number[]>([]);
setTimeout(() => {
    const newArr = [1, 2, 3];
    arr.push(...newArr);
    console.log(arr);
}, 100);

解决方法二：将数组定义为对象中的一个属性

import { reactive } from 'vue';
type T = {
    arr: Array<number>;
};
let list = reactive<T>({
    arr: [],
});
setTimeout(() => {
    list.arr = [1, 2, 3];
    console.log(list.arr);
}, 100);

2、readonly的作用：拷贝一份proxy对象将其设为只读

import { readonly } from 'vue';
const num = reactive({ count: 1 })
const copy = readonly(num)// 拷贝一份num
// 不可以修改copy，但是可以修改num
// copy对象会受到num对象的影响，如果num对象中的值改变了，copy的值也将改变

3、shallowReactive的作用：只能对浅层的数据响应式

import { shallowReactive } from 'vue';
const obj: any = shallowReactive({
  foo: {
    bar: {
      num:1
    }
  }
})
const change = () => {
  obj.foo.bar.num2 = 222 //数据发生改变，但是页面不变
  obj.foo = { name: 'zhangsan' } //数据和页面均发生了改变
  console.log(obj)
}