reactive 函数

创建复杂数据类型的响应式数据

复杂数据类型为对象、数组数据

reactive 函数通过 Proxy 进行响应式数据的处理

返回的值为 Proxy 的实例对象，通过代理对象操作源对象内部的数据

• 定义数据

import { reactive } from "vue";
export default {
  setup() {
    //定义响应式数据，数据类型为object复杂数据类型
    let a = reactive({
      a: 1,
      b: 2,
    });
    //定义数组类型的响应式数据
    let b = reactive(["a", "b", "c"]);
    return { a, b };
  },
};

• 修改数据

import { reactive } from "vue";
export default {
  setup() {
    let a = reactive({
      a: 1,
      b: 2,
    });
    //修改对象类型的复杂数据
    a.a = 3;
    a.b = 4;
    let b = reactive(["a", "b", "c"]);
    //通过索引值修改数组类型的值，vue2不能这样操作
    b[0] = "d";
    return { a, b };
  },
};

• 使用数据

<template>
  <div>{{a.a}}</div>
  <div>{{a.b}}</div>
</template>

当数据类型为简单数据类型时，vue 会报错。

简单数据类型使用 ref 函数