VUE的钩子函数_vue 组件展示时的钩子-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_59113444/article/details/137202582

本文介绍了Vue2.x和3.x中的组件生命周期函数，包括beforeCreate、created、beforeMount等，并通过示例展示了如何在不同阶段执行自定义代码。重点强调了Vue3中setup的使用以及子组件与父组件生命周期的关系。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

官网中的概念: vue组件实例在创建时要经历一系列的初始化步骤，在此过程中vue会在合适的时机，调用特定的函数，从而让开发者有机会在特定阶段运行自己的代码，这些特定的函数统称为:生命周期钩子

vue生命周期函数简单点来说就是在某个时段之前做些什么事，在之后做什么事

比如在挂载前发送请求渲染组件内部数据

在组件销毁之前清除一些占用资源

开始前由一个before开头

1，创建（创建前(beforeCreate) 创建后(created)）

2，挂载（挂载前(beforeMount) 挂载后(mountd)）

3，更新（更新前(beforeUpdate) 更新后(updated)）

4，销毁（销毁前(beforeDestroy) 销毁后(destroyd)）

注意：使用v-if这个指令才能将这个组件销毁 v-show只是隐藏

vue2:

<template>
  <div>
  <h1>当前数量{{num}}</h1>
  <button @click="add">点我++</button>
  </div>    
</template>

<script>
export default {
  name: 'HelloWorld',
 data () {
  return {
    num:1
  }
 },
 methods: {
  add(){
      this.num+=1
  }
 },
 beforeCreate() {
    console.log("创建前");
  },
  created () {
    console.log("创建后");
  },
  beforeMount() {
    console.log("挂载前");
  },
  mounted () {
     console.log("挂载后");
  },
  beforeUpdate() {
    console.log("更新前");
  },
  updated() {
    console.log("更新后");
  },
  beforeDestroy() {
    console.log("销毁前");
  },
  destroyed() {
    console.log("销毁后");
  },
}
</script>
<style scoped>

</style>

Vue3和vue2不同创建的方式vue3只有setup这个包括了组件的创建前后，而且用之前需要导入import并且vue3是通过某个生命周期函数所指定的回调函数来工作的比方说onBeforeMount(()=>{}）而不是直接调用 onBeforeMount vue2是直接调用生命周期函数，vue3在这个Before之前加了个on

1，创建 setup

2，挂载（挂载前( onBeforeMount) 挂载后(onMounted)）

3，更新 (更新前(onBeforeUpdate) 更新后(onUdapted))

4，卸载（卸载前(onBeforeUnmount) 卸载后(onUnmounted)）

注意：父组件也有自己生命周期，它是要等子组件的生命周期结束之后才开启自己生命周期，因为它是一个包含关系，在解析时发现了子组件先去加载子组件的生命周期才会去自己的生命周期

子组件

<template>
  <div>
    <h1>数字{{num}}</h1>
    <button @click="add">点我++</button>
    
  </div>
</template>

<script setup>
// 可以直接写方法
import { reactive, ref,onBeforeMount,onMounted, onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted} from 'vue'

let num = ref(1)  

function add(){
      num.value +=1
}

console.log("可以直接在这个子类语法糖内定义创建前");
onBeforeMount(()=>{
  console.log("挂载前");
})
onMounted(()=>{
  console.log("子类----》挂载后");
})
onBeforeUpdate(()=>{
  console.log("更新前");
})
onUpdated(()=>{
  console.log("更新后");
})
onBeforeUnmount(()=>{
  console.log("销毁前");
})
onUnmounted(()=>{
  console.log("销毁后");
})
</script>


<style scoped>

</style>

父组件

<script setup>
import HelloWorld from './components/HelloWorld.vue'
import { ref,onBeforeMount,onBeforeUpdate, onMounted} from 'vue'
let showMe = ref(true)

onMounted(()=>{
  console.log("父类----》挂载后");
})

</script>

<template>
  <div>
      <HelloWorld v-if="showMe"/>
      <button @click="showMe =! showMe">销毁</button>
  </div>
</template>

<style scoped>
</style>