Vue 3源码深度解析之：`setup`函数的执行时机与生命周期钩子：它们之间的关系。

观众朋友们，大家好！我是今天的讲师，我们今天要聊聊Vue 3里那个既神秘又关键的setup函数，以及它和生命周期钩子之间那点儿剪不断理还乱的关系。

首先，咱们得达成一个共识：Vue 3的setup函数，它不是一个普通的函数，它是一个披着函数外衣的超级英雄，负责组件初始化的大部分工作。而生命周期钩子，就像是超级英雄的后勤保障团队，在特定的时间点提供支持。

一、setup函数的执行时机：跑得比香港记者还快

简单来说，setup函数在组件实例创建之前就被调用了。具体来说，它发生在以下几个时间点之间：

1. beforeCreate 生命周期钩子函数之前 (Vue 2 的 beforeCreate、created 在 Vue 3 中已经不推荐使用，因为 setup 函数的出现，使得它们的功能几乎被完全取代)。
2. props 解析之后，data 初始化之前。
3. setup函数内部没有 this，因为这个时候组件实例还没创建好呢！你想访问 this？没门！

可以用一个表格来更清晰地说明：

时间点	发生的事情
组件被实例化	Vue 3 开始创建一个新的组件实例。
beforeCreate (Vue 2)	Vue 2 时代的生命周期钩子，在 Vue 3 中已经不推荐使用。
props 解析	接收父组件传递过来的 props，并进行解析，准备用于后续的数据初始化。
setup 函数调用	重点来了！ setup 函数被调用，这是初始化组件状态、注册生命周期钩子、设置响应式数据的关键步骤。
data 初始化	Vue 2 中的 data 选项在这里被初始化。在 Vue 3 中，响应式数据通常在 setup 函数中使用 reactive 或 ref 创建。
created (Vue 2)	Vue 2 时代的生命周期钩子，在 Vue 3 中已经不推荐使用。
组件实例创建完成	组件实例创建完成，可以通过 this 访问组件实例。

代码示例：

<template>
  <div>
    <p>Message: {{ message }}</p>
  </div>
</template>

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

export default {
  props: {
    initialMessage: {
      type: String,
      default: ''
    }
  },
  setup(props, context) {
    console.log("setup 函数被调用");
    console.log("props:", props); // 可以访问 props
    // console.log("this:", this); // 报错，this 为 undefined

    const message = ref(props.initialMessage);

    onMounted(() => {
      console.log("组件挂载完成");
    });

    return {
      message
    };
  }
};
</script>

在这个例子中，当你加载组件时，你会先在控制台中看到 "setup 函数被调用"，然后才是 "组件挂载完成"。这证明了 setup 函数确实比 onMounted 钩子函数执行得更早。

二、setup函数与生命周期钩子的关系：相爱相杀的战友

setup函数本身并不直接替代所有的生命周期钩子，而是提供了一个更灵活的方式来组织组件逻辑，并且可以间接地使用生命周期钩子。

在Vue 3中，一些常用的生命周期钩子（比如 mounted、updated、unmounted 等）需要通过 onMounted、onUpdated、onUnmounted 等函数来注册，这些函数都需要在 setup 函数内部调用。

为什么要在setup里调用？

因为setup函数是响应式数据创建的“主战场”。只有在setup内部注册的生命周期钩子，才能访问到这些响应式数据，并且能够正确地响应数据的变化。

代码示例：

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

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

export default {
  setup() {
    const count = ref(0);

    const increment = () => {
      count.value++;
    };

    onMounted(() => {
      console.log("组件挂载完成，初始 Count:", count.value);
    });

    onUpdated(() => {
      console.log("组件更新，当前 Count:", count.value);
    });

    onUnmounted(() => {
      console.log("组件卸载");
    });

    return {
      count,
      increment
    };
  }
};
</script>

在这个例子中，onMounted、onUpdated 和 onUnmounted 钩子函数都被注册在 setup 函数内部。它们可以访问到 count 这个响应式数据，并在组件挂载、更新和卸载时执行相应的逻辑。

生命周期钩子的“新面孔”：

Vue 2 生命周期钩子	Vue 3 setup 函数中的对应函数	描述
mounted	onMounted	组件挂载后调用。可以访问 DOM 元素。
updated	onUpdated	组件更新后调用。响应式数据发生变化时触发。
unmounted	onUnmounted	组件卸载后调用。用于清理副作用，例如取消订阅事件、清除定时器等。
beforeMount	几乎不需要，setup 已经足够	在 Vue 2 中，beforeMount 用于在挂载之前执行一些操作。在 Vue 3 中，由于 setup 函数在组件创建之前调用，因此可以在 setup 函数中执行类似的操作。如果确实需要在挂载之前执行某些操作，可以在 onBeforeMount 中注册钩子函数。
beforeUpdate	onBeforeUpdate	在 Vue 2 中，beforeUpdate 在数据更新但尚未应用到 DOM 之前调用。在 Vue 3 中，可以使用 onBeforeUpdate 注册对应的钩子函数。
activated	onActivated	keep-alive 组件被激活时调用。
deactivated	onDeactivated	keep-alive 组件被停用时调用。
beforeUnmount	onBeforeUnmount	组件卸载之前调用。
errorCaptured	onErrorCaptured	当捕获一个来自子孙组件的错误时被调用。这个钩子会收到三个参数：错误对象、发生错误的组件实例以及一个包含错误来源信息的字符串。此钩子可以修改错误。如果你返回 false 以阻止该错误继续向上传播，则该错误将被阻止传播。
renderTracked	onRenderTracked	在渲染过程中追踪依赖时调用。用于调试。
renderTriggered	onRenderTriggered	在渲染被触发时调用。用于调试。

三、setup 函数的返回值：决定组件的命运

setup 函数的返回值至关重要，它决定了哪些数据、方法和计算属性可以被模板访问。

• 返回一个对象： 这是最常见的方式。对象中的属性和方法将会被合并到组件实例中，可以在模板中直接使用。
• 返回一个渲染函数： 这是一种更高级的用法，允许你完全控制组件的渲染过程。通常用于编写更灵活、更高效的组件。

代码示例（返回对象）：

<template>
  <div>
    <p>Name: {{ name }}</p>
    <p>Age: {{ age }}</p>
    <button @click="sayHello">Say Hello</button>
  </div>
</template>

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

export default {
  setup() {
    const name = ref('张三');
    const age = ref(30);

    const sayHello = () => {
      alert(`你好，我是${name.value}，今年${age.value}岁。`);
    };

    return {
      name,
      age,
      sayHello
    };
  }
};
</script>

在这个例子中，name、age 和 sayHello 都被返回的对象中，因此可以在模板中直接使用 {{ name }}、{{ age }} 和 @click="sayHello"。

代码示例（返回渲染函数）：

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

export default {
  setup() {
    const message = ref('Hello, world!');

    return () => {
      return h('div', { class: 'my-component' }, [
        h('p', {}, message.value),
        h('button', { onClick: () => message.value = '你好，世界！' }, 'Change Message')
      ]);
    };
  }
};
</script>

在这个例子中，setup 函数返回了一个渲染函数。这个函数使用 h 函数（Vue 3 中的 createElement）来创建虚拟 DOM 树，并最终渲染成真实的 DOM 元素。

四、setup函数的参数：props 和 context

setup函数接收两个参数：

1. props： 一个响应式的对象，包含了父组件传递过来的所有 props。注意：props是响应式的，这意味着当父组件更新 props 时，setup 函数内部的 props 对象也会自动更新。
2. context： 一个普通 JavaScript 对象，暴露了一些有用的属性和方法：
   • attrs：一个包含了组件的所有 attribute (除了 props) 的对象。
   • slots：一个包含了组件的所有插槽的对象。
   • emit：一个用于触发自定义事件的函数。

代码示例：

<template>
  <div>
    <p>Name: {{ name }}</p>
    <button @click="emitHello">Emit Hello</button>
  </div>
</template>

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

export default {
  props: {
    name: {
      type: String,
      required: true
    }
  },
  setup(props, context) {
    console.log("props.name:", props.name); // 可以访问 props
    console.log("attrs:", context.attrs); // 可以访问 attrs
    console.log("slots:", context.slots); // 可以访问 slots

    const emitHello = () => {
      context.emit('hello', '来自子组件的消息');
    };

    return {
      emitHello
    };
  }
};
</script>

在这个例子中，setup 函数接收了 props 和 context 两个参数。props 包含了父组件传递过来的 name 属性，context.emit 用于触发一个名为 hello 的自定义事件。

五、setup函数的最佳实践：让你的代码更优雅

1. 清晰地组织代码： 将相关的逻辑放在一起，使用注释来解释代码的功能。
2. 合理地使用响应式数据： 只有需要响应变化的数据才应该使用 ref 或 reactive。
3. 避免在 setup 函数中直接操作 DOM： 尽量使用模板来渲染 DOM 元素。如果确实需要操作 DOM，可以使用 onMounted 钩子函数。
4. 及时清理副作用： 在 onUnmounted 钩子函数中清理副作用，例如取消订阅事件、清除定时器等。
5. 充分利用 Composition API： 将相关的逻辑提取到独立的函数中，并在 setup 函数中调用这些函数，可以提高代码的可重用性和可测试性。

代码示例（使用 Composition API）：

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

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

// 提取 increment 逻辑到独立的函数中
function useCounter() {
  const count = ref(0);

  const increment = () => {
    count.value++;
  };

  onMounted(() => {
    console.log("Counter 组件挂载完成");
  });

  onUnmounted(() => {
    console.log("Counter 组件卸载");
  });

  return {
    count,
    increment
  };
}

export default {
  setup() {
    const { count, increment } = useCounter();

    return {
      count,
      increment
    };
  }
};
</script>

在这个例子中，useCounter 函数封装了 count 和 increment 的逻辑，并在 setup 函数中调用了这个函数。这样可以提高代码的可读性和可重用性。

六、总结：setup函数是Vue 3的灵魂

setup函数是Vue 3中非常重要的一个概念，它改变了我们编写组件的方式，提供了更灵活、更高效的开发体验。理解setup函数的执行时机、与生命周期钩子的关系以及如何正确地使用它，是成为一名合格的Vue 3开发者的关键。

希望今天的讲座能帮助大家更好地理解setup函数，并在实际项目中灵活运用。谢谢大家！