人生苦短，但有轮回钩子函数像极了人生，在某个时间段完成某个使命

哈喽哈喽，我是金樽清酒，今天呀，让我们来一起学习一下，vue当中的生命周期函数，又叫做生命周期钩子。为什么这么叫呢？在这里，我们把整个程序看成生命历程，而这些函数呀就像钩子一样，挂载在程序执行的某个地方，只有程序执行到这一步的时候，它才会触发。怎么样，是不是像极了人生当中各阶段要完成的事情。刚出生你要学着哭喊，长大一点后你要学会走路，再大一点你要上学了，毕业后你要找工作，工作稳定后又要结婚生娃，再之后你又要承担起孩子的教育，直到你的孩子成为另一个你，又开始另一个生命周期。你看，这些钩子函数就像你的人生经历一样，在某个固定的时间段发生，不会发生颠倒，不存在你刚出生就当了爸爸的情况吧。

什么是生命周期函数？

每个 Vue 组件实例在创建时都需要经历一系列的初始化步骤，比如设置好数据侦听，编译模板，挂载实例到 DOM，以及在数据改变时更新 DOM。在此过程中，它也会运行被称为生命周期钩子的函数，让开发者有机会在特定阶段运行自己的代码。总结，在某一时刻可以自动执行的函数。

官方的生命周期图

其中红色的就是我们的生命周期函数啦。举个例子理解一下 beforeCreate()函数是在实例创建之前执行而created()函数就是在实例对象创建完后执行。无非就是执行的时间段，任务段不同罢了。图中的生命周期函数有八种，而且是拿选项式api举例的哦

各个生命周期函数在什么时候被调用（选项式api）

beforeCreate()：在实例被创建之前调用
created()：在实例被创建之后调用
beforeMount()：在实例挂载之前调用
mounted()：在实例挂载之后调用
beforeUpdate()：在实例更新之前调用
updated()：在实例更新之后调用
beforeUnmount()：在实例卸载之前调用
unmounted()：在实例卸载之后调用

注册周期钩子

（组合式api引入方法）

js 复制代码

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

onMounted(() => {
  console.log(`the component is now mounted.`)
})
</script>

组合式api使用onMounted这种周期函数需要import从vue中引入

（选项式api的引入方法）

js 复制代码

export default {
  mounted() {
    console.log(`the component is now mounted.`)
  }
}

选项式api直接在export default中直接调用，注意选项式api和组合式api的钩子函数函数的名称是不一样的，在要用到你需要的钩子函数时，请到官网查看你具体需要的函数。

注意分清楚组合式api和选项式api哦！！！！！！

组合式api钩子函数举例

其实组合式api和选项式api大体的钩子函数都差不多，就是名称不一样和引入的语法不一样。

js 复制代码

<template>
  <div>
    {{ name }}
    <button @click="clickName">click</button>
  </div>
</template>

<script setup>
import { onMounted, ref, onUpdated, onUnmounted, onBeforeUnmount, onBeforeUpdate, onBeforeMount } from 'vue'
const name = ref('')
name.value = 'xiaomin'

const clickName = (() => {
  name.value === 'xiaomin' ? name.value = '小民' : name.value = 'xiaomin'
})
onMounted(() => {
  console.log('onMounted')
})
onBeforeMount(() => {
  console.log('onBeforeMount')
})
onBeforeUpdate(() => {
  console.log('onBeforeUpdate')
})
onUpdated(() => {
  console.log('onUpdated')
})
onUnmounted(() => {
  console.log('onUnmounted')
})
onBeforeUnmount(() => {
  console.log('onBeforeUnmount')
})
</script>

<style lang="less" scoped></style>

在这个小demo当中我引入了几个钩子函数，并在控制台打印，并且写了个按钮点击事件，改变我响应式数据ref的值。为什么要这么做呢。也是着重体会一下onBeforeUpdate()钩子和onUpdated()。它俩一个是在数据更新后渲染之前执行，一个是数据更新后，渲染之后执行。

在未点击前，数据还未发生变化，我们的挂载前后的钩子函数触发了

在点击之后我们可以看到，数据更新的钩子函数也触发了，而且按顺序执行。小编仅仅只列举几个钩子函数，详细的请到vue官方文档查看。

总结

什么是生命周期钩子。在某一时刻可以自动执行的函数。就像人的一生一样，每个阶段有每个阶段会发生的事情。在使用钩子函数时，要分清楚你用的组合式api还是选项式api，他们创建钩子的方法不一样，函数名也不一样，如果想了解更多的话可以到vue官网查看，这也是获取知识的一个很好的途径吧。

vue生命周期钩子函数 像人的一生在某个阶段完成某个任务

人生苦短，但有轮回 钩子函数像极了人生，在某个时间段完成某个使命

什么是生命周期函数？

各个生命周期函数在什么时候被调用（选项式api）

注册周期钩子

组合式api钩子函数举例

总结

vue生命周期钩子函数像人的一生在某个阶段完成某个任务

人生苦短，但有轮回钩子函数像极了人生，在某个时间段完成某个使命