11 Vue中组件的生命周期函数_vue组件的生命周期函数有哪些-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_35329964/article/details/96481228

本文详细介绍了Vue.js中的生命周期钩子函数，包括beforeCreate、created、beforeMount、mounted等关键阶段的作用及使用场景。并通过实例演示了如何利用这些钩子进行DOM操作和数据请求。

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

生命周期函数就是vue实例在某一个时间点会自动执行的函数
生命周期函数在vue中使用如下图：
方法有：created,beforecreate,mounted,beforemount,updated,beforeupdate,destroed,beforedestroy；用法是和mathods同级；
在这里插入图片描述
第一个执行的时beforecreate方法,创建vue实例之前执行的方法，在vue中会先执行这个方法，然后在进行页面初始化和各种绑定的初始化；
beforeCreate()
{
console.log(‘实例创建之前’)
}
初始化完成之后会自动执行实例创建完成方法Created，
Created()
{
console.log(‘实例创建完成’)
}
创建实例完成之后程序会读取模板template中的内容对页面渲染，然后再渲染之前会执行beforemount方法，
beforeMount(){
console.log(‘模板编译之前’)
}
执行完beforeMount（）模板编译并渲染页面，模板结合数据会被挂载到页面上，当dom挂载到页面之上，这个时候又有一个生命周期函数被执行了那就是mounted()

mounted(){/*请求数据，操作dom，就在这个里面，放到别的地方模板可能会被渲染多次 */
console.log('模板编译完成')
}

注意：在beforeMount dom并没有渲染到页面上，在mounted dom已经被渲染到页面上了
beforeUpdate（）：数据发生改变，还没有被渲染之前，beforeUpdate会被执行
updated（）:当数据重新渲染之后，updated这个生命周期函数会被执行
页面销毁之前要保存一些数据，就可以监听这个销毁的生命周期函数
beforedestroy():实例销毁之前
destoryed()：实例销毁之后
例如：再home.vue中挂载header.vue通过按钮改变值来改变挂载与否的状态

<template>
<div>
    <h2>这是组件header</h2>

    <v-body v-if="flag"></v-body>
    <br/>
    <br/>
    <br/>
    <button @click="flag=!flag">挂载以及卸载</button>
    </div>
    
</template>
<script>
import Body from './Body.vue'
export default {
    data(){
        return {
            flag:true,
        }
    },methods:{
       


    },components:{
        'v-body':Body
    }
}
</script>

<style lang="scss" scoped>
h2{
    color: blue;
}

</style>