Vue 的响应式数据 ref的使用

news2024/11/25 18:58:55

ref 是 vue 提供给我们用于创建响应式数据的方法。

ref 常用于创建基本数据，例如：string、number、boolean 等。

ref 还是通过 Object.defineProperty 的 get 与 set 方法，实现的响应式数据。

ref 创建基本数据：

<template>
  <p>商品数量：{{ num }}</p>
  <button @click="addNum">增加</button>
</template>

<script>
// 引入 ref 函数
import { ref } from 'vue'
export default {
  name: "Home",
  setup() {
    // 使用 ref 创建基本数据
    const num = ref(0);
    // 创建方法
    const addNum = () => {
      num.value++;
      // 返回的是一个对象，我们需要的值在 value 属性中
      console.log(num);
    }
    // 返回数据
    return {
      num,
      addNum
    }
  }
}
</script>

通过 ref 创建的数据是一个对象的格式，其中的 value 属性才是我们需要的值，所以在 script 标签中，需要通过 value 属性才能使用或修改 ref 数据。

注：在 template 模板中不需要写 value ，因为 template 模板会自动识别 ref 数据。

ref 创建引用数据【不推荐】：

<template>
  <p>姓名：{{ info.name }}</p>
  <p>年龄：{{ info.age }}</p>
  <p>性别：{{ info.sex }}</p>
  <button @click="editInfo">修改信息</button>
</template>

<script>
// 引入 ref 函数
import { ref } from 'vue'
export default {
  name: "Home",
  setup() {
    // 使用 ref 创建引用数据
    const info = ref({
      name: "张三",
      age: 20,
      sex: "男"
    });
    // 创建方法
    const editInfo = () => {
      info.value.name = "李四";
      info.value.age = 22;
      info.value.sex = "女";
      // info.value 是一个 proxy 对象，proxy 对象内的数据可以直接使用
      console.log(info.value);
    }
    // 返回数据
    return {
      info,
      editInfo
    }
  }
}
</script>

ref 也可以创建引用数据。并且在获取第一层数据时，需要使用 value 属性，之后的数据可以直接使用。