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

一、概念

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

二、主要的八大生命周期

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

<div id="myApp">
    <input type="button" value="创建与销毁" @click="isShow= !isShow">
    <one v-if="isShow"></one>
</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；

　　

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

　　

• beforeMount() 挂载前：数据和模板还未进行结合，访问不到真实的DOM结构，可以对数据做最后的的修改；

　　

• mounted() 挂载后：数据和模板已经结合，可以通过this.$refs访问到真实的DOM结构；

　　

• beforeUpdate() 更新前：当data中的数据发生改变时会执行，可以访问到真实DOM结构、对数据做最后的修改，当前生命周期函数中的数据和模板还没更新完成；

　　

• updated() 更新后：数据更新后形成最新的DOM结构，当前是一个频繁触发的函数，因此要做一些时间绑定或实例化时，需要做一个提前判断；

　　

• beforeDestroy() 销毁前：可以继续访问到真实DOM结构以及data中的数据，通常在这个生命周期函数中做一些事件绑定/移除的操作；

　　

• destroyted() 销毁后：断开DOM与数据之间的关联，访问不到真实的DOM结构；

　　

 　　3.注意：

• 多次执行的生命周期函数：beforeUpdate()、updated()
• 组件第一次创建时会执行：beforeCreate()、created()、beforeMount()、mounted()