四、reactive函数

（一）作用

• 定义一个 对象类型 的响应式数据
• 基本类型不要用它，要用 ref 函数

（二）语法

• const 代理对象 = reactive(源对象)
• 接收一个对象（或数组）
• 返回一个 代理对象
  • Proxy 的实例对象，简称 proxy 对象

（三）层级

• reactive 定义的响应式数据是“深层次的”

（四）原理

• 内部基于 ES6 的 Proxy 实现
• 通过代理对象操作源对象内部数据进行操作

（五）使用

<script setup>
  /*
   * Object类型：使用Object.assign(target, source)赋值
   * Array类型：将数组定义为对象的一个属性，使用七大API操作
   * https://www.cnblogs.com/goloving/p/15437343.html
   */
  let obj = reactive({
    a: 0,
    b: 0,
    c: 0,
  });
  const data = {
    a: 299,
    b: 10,
    c: 3000,
  };
  // 直接赋值丢失响应性——不可行
  obj = data;
  // 使用Object类型内部封装的赋值方法——可行
  obj = Object.assign(obj, data);

  // 数组类型则应该使用七大API操作才能维持响应性
  let res = [1, 2, 3];
  let state = reactive({
    arr: [],
  });
  state.arr = res;
  state.arr = [];
  state.arr.push(4);
</script>