【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;

  

  • 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()

 

posted @ 2019-04-22 17:05  ONE橙子  阅读(2455)  评论(0编辑  收藏  举报