vue3定义响应式数据（ref,reactive）

最新推荐文章于 2025-06-20 10:48:18 发布

原创

最新推荐文章于 2025-06-20 10:48:18 发布 · 2.7k 阅读

17 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

一 ref 定义响应式数据

在 Vue 3 中，ref 是一个用于创建响应式数据的 API。ref 可以用来使普通的 JavaScript 值（如字符串、数字、对象等）变得响应式，从而在 Vue 的模板中使用和自动更新。

基本用法

导入 ref：首先，你需要从 Vue 中导入 ref。
创建响应式数据：使用 ref 创建一个响应式的值。
访问和更新响应式数据：你可以通过 .value 属性来访问和更新响应式数据。

**作用：**定义响应式变量。
语法：let xxx = ref(初始值)。
**返回值：**一个RefImpl的实例对象，简称ref对象或ref，ref对象的value属性是响应式的。
注意点：

JS中操作数据需要：xxx.value，但模板中不需要.value，直接使用即可。
对于let name = ref('张三')来说，name不是响应式的，name.value是响应式的。

ref 创建：基本类型的响应式数据：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue 3 ref 示例</title>
    <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
    <div id="app">
        <p>当前计数: {
   
   {
   
    count }}</p>
        <button @click="increment">增加计数</button>
    </div>

    <script>
        const {
   
    ref, createApp } = Vue;

        createApp({
   
   
            setup() {
   
   
                // 创建一个响应式的计数器
                const count = ref(0);

                // 定义增加计数的函数
                function increment() {
   
   
                    count.value++;
                }

                // 返回响应式数据和方法以供模板使用
                return {
   
   
                    count