vue项目实战系列三十二：vue3语法reactive

(3). reactive:

import { reactive } from 'vue'

①. 创建一个响应式对象:
    a. 与ref不同的是,reactive接受的参数是一个对象
    b. 可以使用toRef(infoObj)为对象中的每一个属性创建一个ref,可以保持对原属性的响应式链接

②. ref和reactive:
    a. 相同:
       (1). 创建一个响应式对象
    b. 不同:
       (1). reactive接受入参必须是对象,而ref可以是对象、一个单值
       (2). 读取/赋值不一样,ref必须从.value属性中读取值
       (3). ref存在异步问题

③. example:
    const infoObj = reactive({
      name:'Alex',
      age: '22'
    })

(4). reactive坑点:

①. 将接口请求到的列表数据赋值给响应数据array
    const arr = reactive([]);
    const load = () => {
      const res = [2, 3, 4, 5]; // 假设请求接口返回的数据
      // 方法1 直接赋值丢失了响应性
      arr = res;  // 让arr失去了响应式
      // 方法2 失败
      arr.concat(res);  // 只有push或者根据索引遍历赋值才可以保留reactive数组的响应性
      // 方法3 可以,但是很麻烦
      res.forEach(e => {
        arr.push(e);
      });
    };

②. 原因:
    a. vue3使用proxy,对于对象和数组都不能直接整个赋值
    b. reactive声明的响应式对象被arr代理
    c. 操作代理对象需要有代理对象的前缀,直接覆盖会丢失响应式

③. 如何方便的将整个数组拼接到响应式数据上?
    // 方案1：创建一个响应式对象,对象的属性是数组(推荐)
    const state = reactive({
      arr: []
    });
    state.arr = [1, 2, 3]

    // 方案2: 使用ref函数
    const state = ref([])
    state.value = [1, 2, 3]

    // 方案3: 使用数组的push方法
    const arr = reactive([])
    arr.push(...[1, 2, 3])