Vue3响应式数据ref

ref 函数：用于创建 基础数据类型，例如：string、number、boolean 等。

ref 函数：也能创建 引用数据类型，不过更推荐使用：《Vue3 响应式数据 reactive》 创建。

// 引入 ref 函数
import { ref } from "vue";
// 创建数据
let 变量名 = ref(数据);

创建基础数据类型

<template>
  <h3>响应式数据 ref</h3>
  <p>商品数量：{{ num }}</p>
  <button @click="addNum">增加</button>
</template>

<script setup>
// 引入 ref 函数
import { ref } from "vue";
// 使用 ref 创建基本数据
let num = ref(10);

const addNum = () => {
  num.value++;
  console.log(num);
}
</script>

效果：

注：在 script 标签中，需要通过 value 属性才能使用或修改 ref 数据。而在 template 标签中可以直接使用。 

创建引用数据类型【不推荐】

<template>
  <h3>响应式数据 ref</h3>
  <p>姓名：{{ info.name }}</p>
  <p>年龄：{{ info.age }}</p>
  <button @click="editInfo">编辑</button>
</template>

<script setup>
// 引入 ref 函数
import { ref } from "vue";
// 使用 ref 创建引用数据
let info = ref({
  name: "张三",
  age: 20
});

const editInfo = () => {
  info.value.name = "李四";
  info.value.age = 99;
  console.log(info.value);
}
</script>

原创作者：吴小糖

创建时间：2024.1.10