vue3中关于setup的两种写法:传统写法 setup() 和 Composition API的语法糖 <script setup>

以下是关于 Vue 3 中 <script setup> 和传统写法的详细说明,帮助你理解它们的区别和使用方式:


Vue 3 的两种主要写法

Vue 3 支持两种组件编写方式:Options API(类似 Vue 2)和 Composition API。而 <script setup> 是 Composition API 的语法糖,让代码更简洁。


1. 传统写法(不使用 <script setup>

需要手动通过 setup() 函数返回暴露的内容。

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

export default {
  name: 'MyComponent',
  setup() {
    // 定义响应式数据
    const count = ref(0);
    const state = reactive({ name: 'Vue 3' });

    // 定义方法
    const increment = () => {
      count.value++;
    };

    // 生命周期钩子
    onMounted(() => {
      console.log('组件已挂载');
    });

    // 必须返回模板中需要使用的数据和方法
    return {
      count,
      state,
      increment
    };
  }
}
</script>

特点

  • 必须使用 export default 定义组件。

  • 需要在 setup() 函数中手动返回暴露的内容。

  • 适合需要明确控制暴露内容的场景。


2. <script setup> 语法(推荐)

自动暴露顶层变量和方法,无需手动返回。

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

// 定义响应式数据
const count = ref(0);
const state = reactive({ name: 'Vue 3' });

// 定义方法
const increment = () => {
  count.value++;
};

// 生命周期钩子
onMounted(() => {
  console.log('组件已挂载');
});
</script>

特点

  • 不需要 export default,整个脚本视为 setup() 函数。

  • 所有顶层变量、函数自动暴露给模板,无需手动返回。

  • 代码更简洁,适合大多数场景。


关键区别

特性传统写法 (setup())<script setup>
是否需要 export default
暴露内容 需手动 return 自动暴露顶层变量和方法
代码简洁性 较冗长 更简洁
适用场景 需要精细控制暴露内容的场景 大多数场景,推荐默认使用

常见问题解答

1. 为什么要用 <script setup>

  • 更简洁:减少样板代码,自动暴露变量。

  • 更易维护:逻辑集中,避免 return 遗漏。

  • 性能优化:编译时优化,生成更高效的代码。

2. 如何在 <script setup> 中引入组件?

<script setup>
import ChildComponent from './ChildComponent.vue';
</script>

直接引入即可,无需在 components 选项中注册。

3. 如何定义生命周期钩子?

使用 onMounted, onUpdated 等函数:

<script setup>
import { onMounted } from 'vue';

onMounted(() => {
  console.log('组件已挂载');
});
</script>

4. 需要手动返回内容吗?

  • 不需要!所有顶层变量(如 const, let, function)自动暴露。

  • 如果某些变量不想暴露,可以用 const _internalVar = ...(以下划线开头约定为私有)。

    //关于这里不想暴露变量,可以以下划线开头约定为私有,个人对这句话的疑问见 关于Vue 3 <script setup> 中变量私有化和暴露的详细解答


总结

  • <script setup>:代码更简洁,适合大多数场景,无需手动返回内容。

  • 用传统写法:需要精细控制暴露内容,或兼容旧代码时使用。

 
 
--------------------------    分割线(以下为个人注解,可以忽略)  ------------------------
以上文章由deepseek生成,记录一下个人的问题和deepseek的思考过程。
个人问题:
我看有的vue3的代码是在 script 的开始标签加 setup,关于setup的写法总共有几种,分别怎么写?

我看有的vue3代码就没有export default,这个加与不加有什么区别?

传统写法setup()代码最后还有通过return“返回所有需要暴露的内容”,这个是一定要写的吗?是不是不暴露就在html中没法引用了?是不是在script的开始标签中加了 setup ,最后就不用返回需要暴露的内容了。

deepseek的思考过程:

好的,我需要回答用户关于Vue 3中`<script setup>`用法的问题。用户提到在转换Vue 2代码到Vue 3时,有些代码使用了`<script setup>`而有些没有,想了解这两种写法的区别以及是否需要返回暴露的内容。

首先,我需要回忆Vue 3的Composition API和`<script setup>`的语法。

Vue 3主要有两种编写组件的方式:Options API和Composition API。而`<script setup>`是Composition API的语法糖,用于更简洁地编写组件。 1. **Options API vs Composition API**- Options API是Vue 2的写法,通过`data`, `methods`, `mounted`等选项组织代码。 - Composition API引入`setup()`函数,允许更灵活的代码组织,尤其是逻辑复用。 2. **`<script setup>`的作用**- `<script setup>`是编译时的语法糖,简化了Composition API的使用。 - 在`<script setup>`中,声明的变量、函数等自动暴露给模板,无需显式返回。 3. **是否需要`export default`**- 使用`<script setup>`时,不需要`export default`,因为整个脚本被视为组件的`setup()`函数。 - 不使用`<script setup>`时,仍需要`export default`来定义组件选项。 4. **暴露内容的方式**- 在普通`setup()`函数中,需要返回一个对象,包含需要暴露给模板的属性和方法。 - 在`<script setup>`中,所有顶层绑定(如变量、函数)自动暴露,无需手动返回。 接下来,我需要用简单易懂的语言解释这些概念,并给出示例代码,帮助用户理解不同写法的区别和使用场景。同时,要提醒用户在使用`<script setup>`时需要注意的事项,比如如何引入组件、使用生命周期钩子等。 在整理答案时,要确保步骤清晰,避免技术术语过多,让新手能够轻松理解。最后,通过对比不同写法,说明各自的优缺点,帮助用户根据项目需求选择合适的编码方式。
posted @ 2025-03-15 16:48  smil、梵音  阅读(2767)  评论(0)    收藏  举报