生命周期函数

2023-12-13 04:45:09

简介

????????在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>

文章来源:https://blog.csdn.net/qq_43435403/article/details/134908965
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。