组件的生命周期

一、组件的生命周期

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>