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>
