Vue3 set up 的使用

Set up 介绍;

set up语法糖（syntactic sugar）是编程语言中一种使用简洁的语法来表达常见操作的技术。它并不引入新的功能或概念，而是提供一种更便捷、易读的语法形式，使得代码更加简洁、易于理解和书写。

为什么称之为语法糖呢？这是因为在Vue 3之前，编写组件需要使用Vue的选项API，而"set up"函数是Vue 3中引入的Composition API的一部分。Composition API旨在提供更灵活、可组合和易于理解的方式来编写组件逻辑。

在Vue 3中，"set up"是一个特殊的函数，它被用作组件选项中的一个生命周期钩子函数。"set up"函数的主要功能是用于在组件实例被创建之前进行一些准备工作，并且可以返回响应式的数据、计算属性、方法等。

"set up"函数的命名与语法糖概念的本质相符。它提供了一种简洁明了的语法形式，使得编写组件的逻辑更加直观和易于阅读。通过将组件的响应式数据、计算属性、方法等定义在"set up"函数中，可以将相关代码整理在一起，并且更好地组织和重用组件逻辑。

"set up"函数的主要功能包括：

1. 初始化和配置组件的响应式数据。
2. 定义和计算计算属性。
3. 声明和处理组件的方法。
4. 调用其他自定义hooks函数或第三方库的函数。
5. 处理生命周期钩子函数的逻辑等

举个实例:

import { reactive, computed } from 'vue';
export default {
  setup() {
    // 初始化响应式状态
    const state = reactive({
      count: 0,
      message: 'Hello Vue 3',
    });
    // 计算属性
    const doubleCount = computed(() => state.count * 2);
    // 方法
    const increment = () => {
      state.count++;
    };
    return {
      state,
      doubleCount,
      increment,
    };
  },
};

在上面的示例中，setup函数返回一个对象，这个对象中包含了需要在组件模板中使用的响应式状态、计算属性和方法。

• 首先，我们使用reactive函数来创建一个响应式对象state，其中包含了count和message两个属性。这意味着当count或message发生变化时，相应的组件会自动重新渲染。
  
• 接下来，我们使用computed函数创建了一个名为doubleCount的计算属性，它的值是state.count的两倍。计算属性会根据它所依赖的响应式状态进行自动更新。
  
• 最后，我们定义了一个名为increment的方法，当被调用时会将state.count递增。
  

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

在"set up"函数中，我们可以更好地组织和管理组件逻辑，使得代码结构更清晰、易读，并提高开发效率。"set up"函数为我们提供了一种更灵活、可组合和易于理解的方式来编写Vue 3组件。