vue3进阶——setup

什么是setup？

在Vue.js 3中，setup 是一个新的组件选项，用于设置组件的初始状态和逻辑。

通过 setup 函数，可以使用 Composition API 的方式组织组件的状态和方法，增强了代码的可读性和灵活性。

setup 函数接收 props 和 context 作为参数，返回一个对象，其中包含在模板中可用的响应式状态和方法。这种方式使得组件的结构更加清晰，同时支持更好的逻辑复用。

setup的优点

使用setup和Composition API可以使开发更灵活、清晰、可维护，并且能够更好地满足大型项目的需求。

1. 更灵活的组织代码结构： setup 允许开发者使用 Composition API 来组织和重用组件逻辑，使得代码结构更加清晰和模块化。

2. 更好的 TypeScript 支持： setup 的使用有助于更好地结合 TypeScript，提供更强大的类型推断和类型检查。

3. 更直观的响应式状态管理： 使用 ref 和 reactive 创建的响应式状态更直观，而且在 setup 中声明的状态可以在模板中直接使用。

4. 更易于测试： setup 使得组件内部的逻辑可以更容易地进行单元测试，因为你可以在测试中直接访问 setup 返回的状态和方法。

5. 更好的逻辑复用： 使用 Composition API 可以更方便地将逻辑进行抽象和复用，有助于提高代码的可维护性和可读性。

setup的生命周期钩子

setup(){}

下面的组件使用setup选项和Composition API来定义其状态和逻辑。
通过ref创建了一个响应式状态count，并使用reactive创建了包含消息的响应式对象data。
使用computed创建了计算属性doubleCount和reversedMessage，分别展示了计算值和反转消息字符串。
生命周期钩子函数onMounted和onBeforeUnmount被用于在组件挂载和即将销毁时执行相应的逻辑。

<template>
  <div>
    <!-- 显示 count 的值 -->
    <p>Count: {{ count }}</p>
    <!-- 显示 doubleCount 的值 -->
    <p>Double Count: {{ doubleCount }}</p>
    <!-- 显示反转后的消息 -->
    <p>Reversed Message: {{ reversedMessage }}</p>
    <!-- 点击按钮触发 increment 方法 -->
    <button @click="increment">Increment</button>
  </div>
</template>

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

export default {
  setup() {
    // 使用 ref 创建响应式状态
    const count = ref(0);

    // 使用 reactive 创建响应式对象
    const data = reactive({
      message: 'Hello, Vue!'
    });

    // 使用 computed 创建计算属性
    const doubleCount = computed(() => count.value * 2);

    // 使用生命周期钩子函数，在组件被挂载时执行
    onMounted(() => {
      console.log('Component is mounted');
    });

    // 使用生命周期钩子函数，在组件即将被销毁时执行
    onBeforeUnmount(() => {
      console.log('Component is about to be unmounted');
    });

    // 定义一个方法，点击按钮时触发
    function increment() {
      count.value++;
    }

    // 创建一个 computed 属性，反转消息字符串
    const reversedMessage = computed(() => data.message.split('').reverse().join(''));

    // 返回状态和方法，将会在模板中可用
    return {
      count,
      doubleCount,
      reversedMessage,
      increment
    };
  }
}
</script>

<script setup>

<script setup>是在单文件组件 (SFC) 中使用组合式 API 的编译时语法糖。当同时使用 SFC 与组合式 API 时该语法是默认推荐。相比于普通的 <script> 语法，它具有更多优势：

1. 更少的样板内容，更简洁的代码。
2. 能够使用纯 TypeScript 声明 props 和自定义事件。
3. 更好的运行时性能 (其模板会被编译成同一作用域内的渲染函数，避免了渲染上下文代理对象)。
4. 更好的 IDE 类型推导性能 (减少了语言服务器从代码中抽取类型的工作)。

<template>
  <div>
    <!-- 显示 count 的值 -->
    <p>Count: {{ count }}</p>
    <!-- 显示 doubleCount 的值 -->
    <p>Double Count: {{ doubleCount }}</p>
    <!-- 显示反转后的消息 -->
    <p>Reversed Message: {{ reversedMessage }}</p>
    <!-- 点击按钮触发 increment 方法 -->
    <button @click="increment">Increment</button>
  </div>
</template>

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

// 使用 ref 创建响应式状态
const count = ref(0);

// 使用 reactive 创建响应式对象
const data = reactive({
  message: 'Hello, Vue!'
});

// 使用 computed 创建计算属性
const doubleCount = computed(() => count.value * 2);

// 使用生命周期钩子函数，在组件被挂载时执行
onMounted(() => {
  console.log('Component is mounted');
});

// 使用生命周期钩子函数，在组件即将被销毁时执行
onBeforeUnmount(() => {
  console.log('Component is about to be unmounted');
});

// 定义一个方法，点击按钮时触发
function increment() {
  count.value++;
}

// 创建一个 computed 属性，反转消息字符串
const reversedMessage = computed(() => data.message.split('').reverse().join(''));
</script>

参考文献

setup官方文档
<script setup>官方文档