【Vue】 ----- 浅谈vue的生命周期

释放双眼，带上耳机，听听看~！

一、概念

　　vue生命周期，又叫生命周期钩子函数，是组件从创建到销毁的过程。

二、主要的八大生命周期

　　1.首先，为方便观察每个周期的特点，我们模拟一个\"one\"组件的创建与销毁，并在八个生命周期中分别打印挂载点、属性、方法以及真实的DOM结构，通过输出结果进行分析。

1 <div id=\"myApp\">
2     <input type=\"button\" value=\"创建与销毁\" @click=\"isShow= !isShow\">
3     <one v-if=\"isShow\"></one>
4 </div>

<script>
    new Vue({
        el:\"#myApp\",
        data:{
            isShow:true
        },
        components: {
            one:{
                template:`
                    <div>
                        <input type=\"text\" v-model=\"userName\">
                        <p ref=\"my\">{{num}}</p>
                    </div>
                `,
                data(){
                    return {
                        userName:\"生命周期\",
                        num:0,
                    }
                },
                methods:{
                    fn(){
                        console.log(this.userName);
                    }
                },
                beforeCreate(){
                    console.group(\"创建之前beforeCreate**************************\");
                    console.log(this.$el); //挂载点
                    console.log(this.userName); //属性
                    console.log(this.fn); //方法
                    console.log(this.$refs.my); //通过this.$refs可以访问真实的DOM结构
                    console.groupEnd();
                },
                created(){
                    console.group(\"创建之后created*******************************\");
                    console.log(this.$el);
                    console.log(this.userName);
                    console.log(this.fn);
                    console.log(this.$refs.my);
                    console.groupEnd();
                },
                beforeMount(){
                    console.group(\"挂载之前beforeMount********************************\");
                    console.log(this.$el);
                    console.log(this.userName);
                    console.log(this.fn);
                    console.log(this.$refs.my);
                    console.groupEnd();
                },
                mounted(){
                    console.group(\"挂载之后mounted********************************\");
                    console.log(this.$el);
                    console.log(this.userName);
                    console.log(this.fn);
                    console.log(this.$refs.my);
                    console.groupEnd();
                },
                beforeUpdate(){
                    console.group(\"更新视图数据之前beforeUpdate********************************\");
                    console.log(this.$el);
                    console.log(this.userName);
                    console.log(this.fn);
                    console.log(this.$refs.my.innerText);
                    console.groupEnd();
                },
                updated(){
                    console.group(\"更新视图数据之后updated********************************\");
                    console.log(this.$el);
                    console.log(this.userName);
                    console.log(this.fn);
                    console.log(this.$refs.my.innerText);
                    console.groupEnd();
                },
                beforeDestroy(){
                    clearInterval(this.timer);
                    console.group(\"vue实例销毁之前beforeDestroy********************************\");
                    console.log(this.$el);
                    console.log(this.userName);
                    console.log(this.fn);
                    console.log(this.$refs.my.innerText);
                    console.groupEnd();
                },
                destroyed(){
                    console.group(\"vue实例销毁之后destroyed********************************\");
                    console.log(this.$el);
                    console.log(this.userName);
                    console.log(this.fn);
                    console.log(this.$refs.my);
                    console.groupEnd();
                }

            }
        }
    })
</script>

　　2.八大生命周期的特点

beforeCreate() 创建前：当前生命周期函数主要用于初始化工作，此时可以创建一个loading；

　　【Vue】 ----- 浅谈vue的生命周期

created() 创建后：可以访问到vm身上所有属性和方法；会将data和methods身上所有的属性和方法都挂载在vm的实例身上；会在data身上所有属性添加getter/setter方法，因此若要进行前后端数据交互时必须在当前生命周期中进行\"响应式原理\";若数据未提前在data中进行绑定，那么这个属性身上不会有getter/setter方法，数据便不会动态改变；

　　【Vue】 ----- 浅谈vue的生命周期