vue2、vue3，生命周期详解

一、Vue2.x

Vue2的生命周期

是指Vue实例从创建到销毁的整个过程中，会经历一系列的阶段和回调函数。它分为8个阶段，包括了组件的创建、挂载、更新和销毁等过程。

1、beforeCreate:

在实例初始化之后，但在数据观测和事件配置之前被调用。此时，data和methods等选项尚未初始化，并且无法访问this。

2、created:

实例已经完成数据观测和事件配置，但挂载阶段还未开始。在这个阶段，可以访问data和methods，并且可以进行一些异步操作。

3、beforeMount:

在挂载开始之前被调用。此时，模板编译已经完成，但尚未将模板渲染到DOM中。

4、mounted:

挂载完成时被调用。此时，实例已经将模板渲染到DOM中，并且可以对DOM进行操作。通常在这个阶段进行一些初始化的工作，比如获取远程数据。

5、beforeUpdate:

数据更新时调用，但在DOM重新渲染之前。在这个阶段，可以对数据进行一些处理或做一些其他操作。

6、updated:

数据更新完成时调用。此时，DOM已经重新渲染，可以对更新后的DOM进行操作。

7、beforeDestroy:

实例销毁之前调用。在这个阶段，实例仍然完全可用，可以进行一些清理工作。

8、destroyed:

实例销毁之后调用。在这个阶段，实例已经被销毁，所有的事件监听器和子组件也都被移除。

这些生命周期钩子函数提供了在不同阶段执行代码的机会，让我们可以更好地控制Vue实例的行为。

两个特殊的生命周期钩子函数

1、activated:

在使用<keep-alive>组件时调用。activated钩子函数在被缓存的组件激活时调用，可以用来执行一些需要在组件被激活时触发的操作。

2、deactivated:

在使用<keep-alive>组件时调用。deactivated钩子函数在被缓存的组件停用时调用，可以用来执行一些需要在组件被停用时触发的操作。

这两个钩子函数主要用于处理缓存组件（通过<keep-alive>包裹的组件）的状态变化，比如在页面切换时，缓存的组件从激活状态切换到停用状态，或者从停用状态切换到激活状态时，可以在这两个钩子函数中进行一些操作，例如更新数据、发送请求等。

总结起来，Vue的生命周期是指Vue实例从创建到销毁的整个过程中，会经历一系列的阶段和回调函数。这些生命周期钩子函数提供了在不同阶段执行代码的机会，让我们可以更好地控制Vue实例的行为，并且还有特殊的钩子函数用于处理缓存组件的状态变化。

两个全局的过渡钩子函数

1、beforeEnter:

在进入过渡之前调用。可以在此函数中定义进入过渡前的初始状态。

2、enter:

进入过渡完成时调用。可以在此函数中定义进入过渡后的最终状态。

这两个过渡钩子函数与Vue的过渡系统相关，用于定义元素进入过渡动画的状态。

自定义的钩子函数

1、beforeRouteEnter:

在路由进入组件前被调用。该钩子函数可以在组件加载前进行一些处理，比如获取数据、权限验证等操作。

2、beforeRouteUpdate:

在当前路由复用组件时调用（例如，从A路由跳转到B路由再返回A路由）。该钩子函数可以用来对路由参数或查询进行响应，以及在不同参数下重新执行组件逻辑。

3、beforeRouteLeave:

在离开当前路由时调用。该钩子函数可以用来做一些确认保存或取消操作，例如提示用户保存修改或取消离开。

这些自定义钩子函数是与Vue Router结合使用的，用于实现在路由切换过程中的额外逻辑处理。

总结起来，除了常见的生命周期钩子函数、特殊的钩子函数和全局的过渡钩子函数之外，Vue还提供了一些自定义的钩子函数，用于与Vue Router结合使用，在路由切换过程中进行额外的逻辑处理。这些钩子函数可以帮助我们更好地控制组件的行为并实现更丰富的交互体验。

其他较少使用的钩子函数

1、activated:

在 keep-alive 组件被激活时调用。keep-alive 组件用于缓存组件实例，当组件被激活时，activated 钩子函数会被调用。

2、deactivated:

在 keep-alive 组件被停用时调用。当组件被停用时，deactivated 钩子函数会被调用。

3、errorCaptured:

在捕获一个来自子孙组件的错误时调用，常用于全局错误处理。

4、render:

在组件 DOM 渲染完成后调用，可以在此钩子函数中访问到组件的真实 DOM 元素。

这些补充的钩子函数通常是为了满足特定的需求而存在的，并不是在每个组件中都常用到的。开发者根据具体场景和需求来选择是否使用这些钩子函数。

二、vue3.x

Vue 3生命周期

Vue 3 由于引入了组合式API，生命周期钩子函数的使用方式有所变化。下面是Vue 3中常见的生命周期钩子函数及其对应的组合式API：

beforeCreate（已被移除） => 在组件实例初始化之前调用。对应的组合式API：在 <script setup> 中直接编写初始化逻辑。
created（已被移除） => 在组件实例创建完成后调用。对应的组合式API：在 setup() 函数中编写初始化逻辑。
beforeMount（被取代） => 在组件挂载到DOM之前调用。对应的组合式API：可以在 onBeforeMount 钩子函数中进行操作。
mounted（被取代） => 在组件挂载到DOM后调用。对应的组合式API：可以在 onMounted 钩子函数中进行操作。
beforeUpdate（被取代） => 在组件更新之前调用。对应的组合式API：可以在 onBeforeUpdate 钩子函数中进行操作。
updated（被取代） => 在组件更新之后调用。对应的组合式API：可以在 onUpdated 钩子函数中进行操作。
beforeDestroy（被取代） => 在组件卸载之前调用。对应的组合式API：可以在 onBeforeUnmount 钩子函数中进行操作。
destroyed（被取代） => 在组件卸载之后调用。对应的组合式API：可以在 onUnmounted 钩子函数中进行操作。

需要注意的是，Vue 3中已经移除了一些生命周期钩子函数（如beforeCreate和created，beforeDestroy和destroyed），并且将它们替换为 onBeforeUnmount 和 onUnmounted。记住创建前后被setup取代，其他的前面加上了on。

此外，在使用 <script setup> 语法时，可以使用 defineProps、defineEmits、withDefaults 等组合式API来定义和处理组件的属性和事件。这些 API 可以在 setup() 函数内部调用，以增强对组件的控制。

总结起来，Vue 3中的生命周期钩子函数在使用方式上有所变化，通过组合式API中提供的钩子函数和相关函数，可以灵活地处理组件的初始化、更新和卸载等阶段的操作。

组合式API，setup（）：

在Vue 3中，引入了一个新的组合式API，用于替代Vue 2中的选项式API（如data、methods等）。这个新的API被称为"setup"。

"setup"函数是组件的入口点，在组件实例化之前执行。它接收两个参数：props和context。其中，props是组件的属性对象，context包含了一些上下文相关的属性和方法。

在"setup"函数中，可以使用响应式API（如ref、reactive）创建响应式数据、定义计算属性（通过computed）以及编写事件处理函数等。此外，还可以访问到父组件传递的props，并将其用于组件内部的逻辑。

下面是一个简单的示例：

<script>
import { ref } from 'vue';export default {props: ['initialCount'],setup(props) {// 创建一个响应式的计数器const count = ref(props.initialCount || 0);// 定义一个增加计数的方法const increment = () => {count.value++;};return {count,increment};}
};
</script><template><div><p>Count: {{ count }}</p><button @click="increment">Increment</button></div>
</template>

在上面的示例中，我们通过"setup"函数创建了一个响应式的计数器变量count，并定义了一个增加计数的方法increment。然后，将这些值返回给模板中使用。

需要注意的是，在"setup"函数中返回的变量和方法会暴露给模板，因此可以在模板中直接使用。而在Vue 2中，这些属性和方法需要在data或methods选项中声明，才能在模板中使用。

总结起来，"setup"函数是Vue 3中引入的组合式API的入口点，用于组件的初始化设置。在该函数中，我们可以使用响应式API创建响应式数据、定义计算属性、编写事件处理函数等，并将它们返回供模板使用。这种方式相较于Vue 2的选项式API更加灵活和直观。

<script setup>

在Vue 3中，还引入了一个更简洁的语法糖<script setup>，用于简化组件的"setup"函数的编写。使用<script setup>标签，可以将组件的选项和模板代码整合到同一个块内。

下面是一个使用<script setup>的示例：

<script setup>
import { ref } from 'vue';const count = ref(0);const increment = () => {count.value++;
};
</script><template><div><p>Count: {{ count }}</p><button @click="increment">Increment</button></div>
</template>

在上述示例中，我们使用<script setup>标签来替代传统的<script>标签，并将组件的选项（如import语句、变量声明等）直接放在<script setup>中。这样做的好处是可以更紧凑地组织代码，不需要显式地返回选项对象。

需要注意的是，使用<script setup>时，模板中的数据和方法都会自动与setup()函数的作用域绑定，无需再通过返回对象的方式将它们暴露给模板。

总结起来，<script setup>是Vue 3中的一个新特性，用于简化"setup"函数的编写。通过将组件的选项和模板代码放在同一个块内，可以使代码更加简洁和直观。这种方式提高了开发效率并降低了代码量。

这个时候就有人要问了,<script setup> 和 setup的区别是什么？

<script setup> 和 setup() 是 Vue 3 中组合式 API 的两种不同写法，它们之间有以下区别：

语法：<script setup> 是一种特殊的 <script> 标签语法糖，用于简化组件的编写。而 setup() 是一个普通的函数，作为组件选项中的一个属性存在。
代码组织：使用 <script setup> 可以将组件的选项和模板代码整合到同一个块内，使得代码更加紧凑和直观。而在 setup() 中，需要显式地返回一个对象，将数据和方法暴露给模板使用。
作用域：在 <script setup> 中，模板中的数据和方法会自动与 setup() 函数的作用域绑定，无需再通过返回对象的方式暴露给模板。而在 setup() 中，需要通过返回一个对象来将数据和方法暴露给模板使用。
响应式：在 <script setup> 中，可以使用响应式 API（如 ref、reactive）创建响应式数据。而在 setup() 中，如果要创建响应式数据，需要手动导入相应的响应式 API 并进行设置。
Vuex 和路由：在 <script setup> 中，不能直接使用 Vuex 和路由相关的功能。而在 setup() 中，可以通过导入相应的库并使用它们提供的 API 进行状态管理和路由控制。