Vue 中 setup 与传统生命周期钩子的深入理解

本文链接：https://blog.csdn.net/m0_57836225/article/details/142963849

Vue 中 setup 与传统生命周期钩子的深入理解

三、setup 与 created 的区别

在 Vue 的开发中，理解不同的组件初始化阶段和方法对于构建高效、可维护的应用至关重要。本文将深入探讨 Vue 中的 setup 函数以及传统的生命周期钩子，特别是 created，以帮助开发者更好地掌握 Vue 的组件架构。

一、`created` 生命周期钩子

created 是 Vue 组件的生命周期钩子之一，在组件实例被创建之后调用。在这个阶段，组件实例已经存在，开发者可以进行一些初始化操作，比如发起数据请求、设置一些初始状态等。

<template>
  <div>{{ message }}</div>
</template>

<script>
export default {
  name: 'MyComponent',
  data() {
    return {
      message: 'Initial message',
    };
  },
  created() {
    console.log(this.message); // 可以访问到在 data 中定义的初始数据
    // 可以在这里进行一些异步操作来更新数据
    setTimeout(() => {
      this.message = 'Updated message';
    }, 2000);
  },
};
</script>

在 created 钩子中，可以访问和修改在 data 中定义的数据，但它并不是简单地 “带上这些数据”，而是在组件创建的特定阶段，可以进行一些与数据相关的初始化和操作。

二、`setup` 函数的重要性

1. 响应式数据创建和初始化

setup 函数在组件创建之前执行，比 created 生命周期钩子更早。在 setup 中，可以使用 ref、reactive 等函数创建响应式数据，并进行初始化。
例如：

<template>
  <div>{{ count }}</div>
</template>

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

export default defineComponent({
  name: 'MyComponent',
  setup() {
    const count = ref(0);
    return {
      count,
    };
  },
});
</script>

这里在 setup 中创建了一个名为 count 的响应式数据，并初始化为 0。

2. 逻辑封装和复用

可以将组件的复杂逻辑封装在 setup 中，使得代码更加清晰和易于维护。同时，setup 中的逻辑可以通过提取为独立的函数进行复用。

例如，将函数定义在 setup 函数外：

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

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

function incrementCount(countRef) {
  // 这里如果需要访问组件内部其他特定变量，可能就会出现作用域问题，需要通过参数传递进来
  countRef.value++;
}

export const commonFunction = incrementCount;

export default defineComponent({
  name: 'MyComponent',
  setup() {
    const count = ref(0);
    return {
      count,
      increment: () => incrementCount(count),
    };
  },
});
</script>

在这个例子中，如果多个组件都需要使用这个计数增加的逻辑，就可以在不同组件中导入这个函数进行使用，提高了代码的复用性。并且将这个函数放在组件外部，使得组件的 setup 函数更加专注于组件自身的响应式数据和主要逻辑，代码结构更加清晰，易于理解和维护。然而，也存在作用域问题，如果函数需要访问组件内部的一些特定变量或状态，可能需要通过参数传递的方式将这些变量传递给外部函数，增加了一些复杂性，而且在某些情况下，可能会出现作用域不清晰的问题。

或者将函数定义在 setup 函数内：

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

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

export default defineComponent({
  name: 'MyComponent',
  setup() {
    const count = ref(0);
    function incrementCount() {
      count.value++;
    }
    return {
      count,
      increment: incrementCount,
    };
  },
});
</script>

这种方式作用域明确，函数可以直接访问 setup 函数内部的变量，无需进行复杂的参数传递，同时封装性更好，对于一些只在特定组件内部使用的逻辑函数，将其定义在 setup 函数内可以更好地封装组件的逻辑，避免外部的干扰。但缺点是可复用性降低，如果其他组件也需要相同的逻辑，就需要在每个组件中重复定义这个函数。

3. 接收参数和返回值

setup 接收两个参数 props 和 context，可以通过它们访问父组件传递的属性和一些其他有用的上下文信息。同时，setup 可以返回一个对象，其中的属性和方法可以在模板中直接使用。
例如：

<template>
  <div>{{ message }}</div>
</template>

<script>
import { defineComponent } from 'vue';

export default defineComponent({
  name: 'MyComponent',
  props: {
    initialMessage: {
      type: String,
      default: 'Default message',
    },
  },
  setup(props) {
    const message = props.initialMessage;
    return {
      message,
    };
  },
});
</script>

这里在 setup 中接收 props 参数，并将父组件传递的 initialMessage 属性赋值给一个局部变量 message，然后返回给模板使用。

三、`setup` 与 `created` 的区别

执行时机：setup 在组件实例创建之前执行，而 created 在组件实例创建之后调用。
数据创建和管理：在 setup 中可以更灵活地创建和管理响应式数据，并且可以提前进行数据的初始化和配置。在 created 中，可以访问和修改在 data 中定义的数据，但响应式数据的创建时机相对较晚。
逻辑封装和复用：setup 更适合进行逻辑封装和复用，可以将组件的逻辑拆分成可复用的函数和模块。而在 created 中，逻辑的封装和复用相对较困难。
参数接收：setup 可以接收 props 和 context 参数，方便访问父组件传递的属性和其他上下文信息。在 created 中，需要通过 this 来访问组件的属性和方法。

综上所述，setup 在 Vue 组件的初始化阶段起着重要的作用，它提供了一个更早的时机来进行数据创建、逻辑封装和参数接收等操作，使得组件的开发更加灵活和高效。虽然 created 生命周期钩子也有其特定的用途，但在很多情况下，setup 函数可以提供更好的代码组织和可维护性。在实际开发中，可以根据项目的需求和个人的开发习惯选择合适的方式来进行组件的初始化和逻辑处理。同时，对于 setup 中定义的函数和变量是否 export 需要根据具体情况来决定，如果有代码复用或测试等需求，export 可能是有意义的，但通常它们主要是服务于当前组件。