Vue前端篇——ref创建基本类型的响应式数据

前言

本文将详细介绍 Vue 3 中的响应式数据类型之一：基本类型的响应式数据（ref），并通过一个实例演示如何在 Vue 3 项目中创建和使用 ref 对象。ref也是vue3中的一个重要知识点，欢迎大家评论区一起学习交流。

一、ref 的作用与语法

在 Vue 3 中，ref 是用来定义响应式变量的。通过使用 ref 函数，我们可以轻松地为一个变量添加响应式特性。ref 的语法如下：

let xxx = ref(初始值);
返回值：一个RefImpl的实例对象，简称ref对象或ref，ref对象的value属性是响应式的。

执行上述代码后，会得到一个 RefImpl 的实例对象，简称 ref 对象或 ref。ref 对象的 value 属性具有响应式特性，当 value 值发生变化时，与其关联的视图将自动更新。

二、ref 对象的使用与注意事项

在 Vue 3 中，操作 ref 对象需要注意以下几点：

1. 在 JavaScript 代码中操作 ref 对象时，需要使用 .value 访问其 value 属性。
2. 在模板中，无需使用 .value，直接使用 ref 对象即可。
3. 当 ref 对象被包裹在响应式对象（如 reactive，下一篇文章会讲解）内时，无需使用 .value。
4. 当 ref 对象未被包裹在响应式对象内时，需要使用 .value。

以以下代码为例，主要是需要改变姓名和年龄，将数据改变之后能直接响应到视图模板上。

<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创建，这个到后面会单独讲解，并在比较两者区别。