组件的生命周期-CSDN博客

本文链接：https://blog.csdn.net/m0_73634593/article/details/128598762

文章详细介绍了Vue组件的生命周期，包括beforeCreate、created、beforeMount、mounted等阶段，以及对应的钩子函数在何时运行。还提到了keep-alive组件在保持组件状态方面的作用，并提供了一个示例展示如何在不同生命周期阶段使用钩子函数进行操作。

摘要由CSDN通过智能技术生成

一、组件的生命周期

1、组件的生命周期：至一个组件从创建——>运行——>销毁的过程

2、声明周期函数：由Vue提供的内置函数，伴随组件生命周期按次序自动运行——>钩子函数

3、生命周期的阶段划分

（1）创建阶段：beforeCreate、created、beforeMount、mounted

（2）运行阶段：beforeUpdate、update

（3）销毁阶段

4、钩子函数：vue的内置函数，当Vue组件运行到某个阶段时这些函数会自动运行，不需要用户显式的调用

5、keep-alive组件：是vue的内置组件，用来保持vue组件运行的某种状态，避免被重新渲染

注：组件(页面的组成部件)

1️⃣第一步：创建组件（定义组件），组件文件的扩展名(后缀)可以是.vue，也可以是.js

2️⃣第二步：在使用组件的位置导入，注册组件

3️⃣第三步：使用组件：像html标签一样使用

6、生命周期函数：

（1）beforeCreate：在组件创建之前运行，此时Vue实例的del、data、data中的变量均为undefined

（2）created：表示组件已经创建完成，data、props已经初始化，el还是undefined(组件还是没有挂载到DOM上)

（3）beforeMount：el被绑定(和DOM绑定)，但未挂载

（4）mounted：组件挂载之后，el绑定、组件挂载

（5）beforeUpdate：当组件的内容被改变、隐藏的组件被显示、显示的组件被隐藏等触发

（6）beforeDestory：在组件销毁之前，组件还是正常使用

（7）destroyed：组件销毁之后

<div id="app">
        <p>{{ message }}</p>
        <keep-alive>
            <my-components msg="hello" v-if="show"></my-components>
        </keep-alive>
</div>
<script>
        //定义子组件
        const child = {
            template:`<div>我是子组件:{{msg}}</div>`, //子组件的html模板内容
            props:['msg'],   //接受父组件传递的msg
            data:function(){
                return {
                    childMsg:'child'
                }
            },
            deactivated: function(){   //钩子函数：在组件非运行时触发
                console.log('component deactivated!');
            },
            activated:function(){   //钩子函数：在组件运行时触发
                console.log('component activated')
            }
        }
        //创建vue实例：和DOM中的id为app的元素绑定
        var app = new Vue({
            el:'#app',
            components:{    //注册子组件
                'my-component':child
            },
            data:function(){
                return {
                    message:'父组件',
                    show:true
                }
            },
            //3、定义生命周期函数
            beforeCreate: function(){
                console.group('beforeCreate 创建前状态------------>');
                let state = {
                    'el':this.$el,
                    'data':this.$data,
                    'message':this.message
                }
                console.log(state);
            },
            created:function(){
                console.group('created 创建完毕状态------------>');
                let state = {
                    'el':this.$el,
                    'data':this.$data,
                    'message':this.message
                }
                console.log(state);
            },
            beforeMount:function(){
                console.group('beforeMount 挂载前状态------------>');
                let state = {
                    'el':this.$el,
                    'data':this.$data,
                    'message':this.message
                }
                console.log(this.$el)
                console.log(state);
            },
            mounted:function(){
                console.group('mounted 挂载结束状态------------>');
                let state = {
                    'el':this.$el,
                    'data':this.$data,
                    'message':this.message
                }
                console.log(state);
            },
            beforeUpdate:function(){
                console.group('beforeUpdate 更新前状态------------>');
                let state = {
                    'el':this.$el,
                    'data':this.$data,
                    'message':this.message
                }
                console.log(state);
                console.log(this.$el);
                console.log('beforeUpdate == '+document.getElementsByTagName('p')[0].innerHTML);
            },
            updated:function(){
                console.group('updated 更新完成状态------------>');
                let state = {
                    'el':this.$el,
                    'data':this.$data,
                    'message':this.message
                }
                console.log(state);
                console.log(this.$el);
                console.log('beforeUpdate == '+document.getElementsByTagName('p')[0].innerHTML);
            },
            beforeDestroy:function(){
                console.group('beforeDestroy 销毁前状态------------>');
                let state = {
                    'el':this.$el,
                    'data':this.$data,
                    'message':this.message
                }
                console.log(state);
                console.log(this.$el);
            },
            destroyed:function(){
                console.group('destroyed 销毁完成状态------------>');
                let state = {
                    'el':this.$el,
                    'data':this.$data,
                    'message':this.message
                }
                console.log(state);
                console.log(this.$el);
            },
            components:{
                'my-components':child
            }
        })
</script>