在 Vue 3 的 setup 函数中创建的 ref 或 reactive 变量，只有在通过 return 返回后，才能在 template 中直接引用

最新推荐文章于 2025-06-17 10:48:49 发布

原创最新推荐文章于 2025-06-17 10:48:49 发布 · 221 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

前端VUE3 专栏收录该内容

57 篇文章

订阅专栏

在 Vue 3 的 setup 函数中创建的 ref 或 reactive 变量，只有在通过 return 返回后，才能在 template 中直接引用。如果没有返回，这些变量在 template 中是无法访问的。

但是，VUE3 提供了新特性<script setup>语法糖，使得整个被包裹的代码块是一整个setup，无须写return语句，任何变量都可以被template直接引用。

1. `setup` 函数的作用

setup 是 Vue 3 组合式 API 的核心函数，用于定义组件的逻辑。setup 函数的返回值会暴露给 template，只有返回的变量或函数才能在 template 中使用。

2. `ref` 和 `reactive` 的行为

**ref**：创建一个响应式引用，其值通过 .value 属性访问。
**reactive**：创建一个响应式对象，直接访问其属性。

3. 是否需要 `return`

**需要 return**：只有通过 return 返回的变量才能在 template 中使用。
**不需要 return**：如果变量没有返回，它在 template 中是无法访问的。

示例代码

示例 1：返回变量

<template>
  <div>
    <p>Count: {{ count }}</p>
    <p>Name: {{ state.name }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

<script>
import { ref, reactive } from 'vue';

export default {
  setup() {
    const count = ref(0); // 使用 ref 创建响应式变量
    const state = reactive({ name: 'Vue' }); // 使用 reactive 创建响应式对象

    const increment = () => {
      count.value++;
    };

    // 返回 count 和 state，使其在 template 中可用
    return { count, state, increment };
  }
};
</script>

在这个例子中：

count 和 state 通过 return 返回，因此可以在 template 中直接使用。
increment 方法也通过 return 返回，因此可以在 template 中绑定到按钮的点击事件。

示例 2：未返回变量

<template>
  <div>
    <p>Count: {{ count }}</p> <!-- 错误：count 未定义 -->
    <p>Name: {{ state.name }}</p> <!-- 错误：state 未定义 -->
    <button @click="increment">Increment</button> <!-- 错误：increment 未定义 -->
  </div>
</template>

<script>
import { ref, reactive } from 'vue';

export default {
  setup() {
    const count = ref(0); // 使用 ref 创建响应式变量
    const state = reactive({ name: 'Vue' }); // 使用 reactive 创建响应式对象

    const increment = () => {
      count.value++;
    };

    // 没有返回 count、state 和 increment
    // 因此它们在 template 中无法访问
  }
};
</script>

在这个例子中：