Vue3 生命周期

wzCoding大约 3 分钟

Vue3 生命周期

生命周期是 Vue 中的一个重要概念，它描述了 Vue 组件从创建到销毁的整个过程，实际上是向我们暴露了组件代码在执行期间各个阶段的不同状态。我们可以利用 Vue 在不同生命周期状态下提供的钩子函数（hooks），向其中加入自己的逻辑，从而实现各种不同的功能。

生命周期分类

这里所展示的组件的生命周期主要以 Vue3 组合式 API 为准，它们分别是：

onBeforeMount()：在组件被挂载之前调用。此时组件的响应式状态（即组件内部的数据）已经设置完成，渲染函数也已经首次完成调用，但是组件还没有渲染到页面上生成真实的 DOM。
onMounted()：在组件已经挂载后调用。此时组件已经渲染到了页面上（即组件已经在页面上生成了真实的 DOM，这个时候可以访问到组件的 DOM 元素）。
onBeforeUpdate()：在组件的响应式状态（即组件的数据）发生变化时调用。此时响应式状态已经改变但是组件对应的真实 DOM 还没有更新渲染。
onUpdated：在组件的响应式状态（即组件的数据）发生变化并且组件的 DOM 也已经更新完成后调用。
onBeforeUnmount()：在组件被卸载之前调用。此时组件实例依然存在，组件还具有完整的功能。
onUnmounted()：在组件的实例被卸载之后调用。此时组件的实例已经被移除（与组件相关的响应式作用已经停止）。
onActived()：在使用 <KeepAlive> 内置组件时，当被缓存的组件激活时调用。此时缓存的组件被插入到 DOM 树中。
onDeactived()：在使用 <KeepAlive> 内置组件时，当被缓存的组件失活时调用。此时缓存的组件被从 DOM 树中移除。

setup() 函数

在 Vue3 的组件的生命周期中，我们并没有看到与组件创建时相关的两个生命周期：

beforeCreate()：在组件被创建之前调用。此时组件的响应式状态还没有设置，组件没有被挂载也没有被渲染。
created()：在组件被创建后调用。此时组建的响应式状态已经设置完成，组件没有被挂载也没有被渲染。

以上两个生命周期在 Vue3 中被 setup() 函数替代了。setup() 函数的作用是配合组合式 API，为我们提供用于创建各种组合逻辑、创建各种响应式数据、创建函数以及使用生命周期钩子等能力的地方。

setup 用法

setup() 函数只会在组件挂载时执行一次，它有两种用法：

作为 <script> 标签的属性来使用（即 setup() 函数的语法糖）。

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

   const text = ref('hello')
</script>

作为函数使用。setup 在作为函数使用时，它的返回值有 2 种情况：

返回一个函数，这个返回的函数会作为组件的渲染函数（render()）。

<script>
   setup(){
      return () => {
         //返回一个 vnode 对象
         return { type:'p', children:'hello' }
      }
   }
</script>

返回一个对象，对象中的数据将会暴露给模板使用。

<template>
     <p>{{ text }}</p>
</template>

<script>
   import { ref } from 'vue'
   setup(){
      const text = ref('hello')
      return {
         text
      }
   }
</script>

setup 参数

setup() 函数有 2 个参数，它们分别是：

props：组件的属性，它包含了组件定义时使用到的数据
setupContext：组件的上下文对象，它包含了与组件本身的接口相关的数据。组件上下文对象种共有 4 个属性：
- attrs：当为组件传递 props 数据时，当传递了没有显示声明在组件的 props 对象中的数据时，这些没有显示声明的数据会被存储到 attrs 中。
- slots：组件接收到的插槽，用来渲染自定义内容。
- emit：用来发射自定义事件的函数。
- expose：用来显示的向外暴露组件内部的状态或者数据的函数。

Vue3 生命周期

# Vue3 生命周期

# 生命周期分类

# setup() 函数

# setup 用法

# setup 参数

Vue3 生命周期

生命周期分类

setup() 函数

setup 用法

setup 参数