[从零开始的 Vue3 系列]：深入解析 setup语法糖（巨好用）

前言

本系列将从零开始，系统性地介绍 Vue 3 的常用 API，逐步深入每个核心概念与功能模块。通过详尽的讲解与实战演示，帮助大家掌握 Vue 3 的基础与进阶知识，最终具备独立搭建完整 Vue 3 项目的能力。

vue3中的setup

setup 语法糖是 Vue 3 中引入的一种新的语法，用于在组件中编写逻辑代码。它是组合式 API（Composition API）的一部分，通过在 setup 函数中集中处理组件的逻辑与状态，提供了一种更灵活和模块化的代码组织方式。

• 逻辑集中：将所有逻辑放在 setup 函数中，避免了传统 Options API 中散布在 data、methods、computed 等选项中的问题。
• 更好的类型支持：配合 TypeScript 使用时，能够获得更好的类型推断和提示。
• 便于逻辑复用：通过组合函数（Composition Functions），可以将组件逻辑拆分为多个可复用的模块，提升代码的可读性和可维护性。

1. setup函数

在这个示例中：
setup 函数中定义了一个响应式状态 state、一个计算属性 doubleCount 以及一个方法 increment。这些属性和方法通过 return 语句暴露给模板，在模板中可以直接使用 state.count、doubleCount 和 increment。

import { ref, reactive, computed } from 'vue';

export default {
  setup() {
    // 定义一个响应式数据对象
    const state = reactive({
      count: 0
    });

    // 定义一个计算属性
    const doubleCount = computed(() => state.count * 2);

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

    // 返回需要暴露给模板的属性和方法
    return {
      state,
      doubleCount,
      increment
    };
  }
};

2. setup语法糖

setup 语法糖通过将逻辑集中在一个函数中，使组件代码更加简洁和直观，也更易于拆分和复用逻辑。

现在我们只需要在script 中添加setup就可以直接定义变量、引入模块，而无需手动 return，这些变量和函数会自动暴露给模板。

这里语法糖还有一个好处就是，组件引入后无需注册直接就可以使用了

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

// 定义响应式数据
const count = ref(0);

// 定义计算属性
const doubleCount = computed(() => count.value * 2);

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

<template>
  <div>
    <p>Count: {{ count }}</p>
    <p>Double Count: {{ doubleCount }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

2.1 setup中新增api

1.响应式 API

• ref()：定义一个基础类型或对象的响应式引用。

  const count = ref(0);
  

• reactive()：将一个对象转换为响应式对象。

  const state = reactive({ count: 0 });
  

• readonly()：创建一个只读的响应式对象，用于防止对象被修改。

  const data = readonly({ count: 0 });
  

• toRefs()：将 reactive 对象的属性转换为 ref 类型，用于解构时保持响应性。

  const { count } = toRefs(state);
  

2.异步组件加载 API

• defineAsyncComponent()：用于定义一个异步加载的组件。

const AsyncComponent = defineAsyncComponent(() =>
  import('./components/AsyncComponent.vue')
);

3.依赖注入 API

• provide() 和 inject()：用于父组件向子组件提供依赖，或跨组件层级共享状态。

在父组件中
provide('theme', 'dark');

在子组件中
const theme = inject('theme');

4.模版引用

• ref() 可用于绑定模版中的 DOM 或组件实例。

const myButton = ref(null);

onMounted(() => {
  console.log(myButton.value); // 访问 DOM 元素
});

总结 :

以上内容仅为本人对 setup 语法糖的个人理解，如有不足之处，欢迎大家指正与交流，共同进步。