生命周期函数

简介

        在Vue中，组件的生命周期是指每个组件从被创建到被销毁的整个过程，每个组件都有生命周期。如果想要在某个特定的时机进行特定的处理，可以通过生命周期函数来完成。

随着组件生命周期的变化，生命周期函数会自动执行。

选项式API下的生命周期函数

选项式API下的生命周期函数如下表所示

函数	说明
beforeCreate()	实例对象创建前
created()	实例对象创建后
beforeMount()	页面挂载前
mounted()	页面挂载成功后
beforeUpdate()	组件更新前
updated()	组件中的任意的DOM元素更新后
beforeDestroy()	组件实例销毁前
destroyed()	组件实例销毁后

<script>
export default {
  data() { return { value: 'Hello Vue.js' } },
  beforeCreate() {
    console.log('实例对象创建前: ' + this.value)
  },
  created() {
    console.log('实例对象创建后: ' + this.value)
  }
}
</script>

组合式API下的生命周期函数

组合式API下的生命周期函数如下表所示

函数	说明
onBeforeMount()	组件挂载前
onMounted()	组件挂载成功后
onBeforeUpdate()	组件更新前
onUpdated()	组件中的任意的DOM元素更新后
onBeforeUnmount()	组件实例被销毁前
onUnmounted()	组件实例被销毁后

<script setup>
import { onMounted } from 'vue'
onMounted(() => {
  // 执行操作
})
</script>

<template>  <div class="container">container</div> </template>
<script setup>
import { onBeforeMount, onMounted } from 'vue'
onBeforeMount(() => {
  console.log('DOM元素渲染前', document.querySelector('.container'))
})
onMounted(() => {
  console.log('DOM元素渲染后', document.querySelector('.container'))
})
</script>