前言
本文将详细介绍 Vue 3 中的响应式数据类型之一：基本类型的响应式数据（ref），并通过一个实例演示如何在 Vue 3 项目中创建和使用 ref 对象。ref也是vue3中的一个重要知识点，欢迎大家评论区一起学习交流。
一、ref 的作用与语法
在 Vue 3 中，ref 是用来定义响应式变量的。通过使用 ref 函数，我们可以轻松地为一个变量添加响应式特性。ref 的语法如下：
代码语言：javascript复制let xxx = ref(初始值);
返回值：一个RefImpl的实例对象，简称ref对象或ref，ref对象的value属性是响应式的。执行上述代码后，会得到一个 RefImpl 的实例对象，简称 ref 对象或 ref。ref 对象的 value 属性具有响应式特性，当 value 值发生变化时，与其关联的视图将自动更新。
二、ref 对象的使用与注意事项
在 Vue 3 中，操作 ref 对象需要注意以下几点：
- 在 JavaScript 代码中操作 ref 对象时，需要使用
.value访问其 value 属性。 - 在模板中，无需使用
.value，直接使用 ref 对象即可。 - 当 ref 对象被包裹在响应式对象（如 reactive，下一篇文章会讲解）内时，无需使用
.value。 - 当 ref 对象未被包裹在响应式对象内时，需要使用
.value。
以以下代码为例，主要是需要改变姓名和年龄，将数据改变之后能直接响应到视图模板上。
代码语言：js复制<template>
<div class="person">
<h2>姓名：{{name}}</h2>
<h2>年龄：{{age}}</h2>
<button @click="changeName">修改名字</button>
<button @click="changeAge">年龄 1</button>
<button @click="showTel">点我查看联系方式</button>
</div>
</template>
<script setup lang="ts" name="Person">
import {ref} from 'vue'
let name = ref('张三')
let age = ref(18)
let tel = '13888888888'
function changeName(){
name.value = '李四'
console.log(name.value)
}
function changeAge(){
age.value = 1
console.log(age.value)
}
function showTel(){
alert(tel)
}
</script>在这个示例中，创建了两个响应式变量（ref 对象）：name 和 age，以及一个普通字符串变量 tel。在模板中，可以直接使用 name 和 age，而无需使用 .value。对于 tel，因为它不是一个响应式变量，所以不会自动触发视图更新。
运行结果如下：
总结
Vue 3 中的 ref 提供了一种简便的方法来创建响应式变量。通过使用 ref，可以轻松地为 JavaScript 代码和模板添加响应式特性。需要注意的是，在使用 ref 时，要根据实际情况选择是否需要使用 .value 访问其 value 属性。希望本文能帮助大家更好地理解 Vue 3 中的响应式数据（ref），并在实际项目中运用自如。其实关于响应数据还可以使用reactive创建，这个到后面会单独讲解，并在比较两者区别。
