ref 函数

引用的实现

创建简单数据类型的响应式数据

简单数据类型为非对象、数组数据

ref 函数通过 Object.defineProperty 进行响应式数据的处理

• 定义数据

import { ref } from "vue";
export default {
  setup() {
    //定义响应式数据，数据类型为number
    let a = ref(1);
    return { a };
  },
};

• 修改数据

import { ref } from "vue";
export default {
  setup() {
    let a = ref(1);
    //修改响应式数据，通过修改ref对象的.value属性
    a.value = 2;
    return { a };
  },
};

• 使用数据

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

• 复杂数据类型

import { ref } from "vue";
export default {
  setup() {
    //定义响应式数据，数据类型为object复杂数据类型
    let a = ref({
      a: 1,
      b: 2,
    });
    //修改响应式数据
    a.value.a = 3;
    a.value.b = 4;
    return { a };
  },
};

数据类型为复杂数据类型时，第一层使用 ref 函数进行包装，需要使用.value 读取值，第二层复杂数据类型在内部采用 reactive 函数进行响应式数据的处理。