生命周期

生命周期

1.定义.

从开始到结束(销毁)的过程就是一个生命周期

钩子函数:在某事某刻自动被触发的函数称之为钩子函数.

2.生命周期钩子函数

• beforeCreate 创建之前

创建之前:什么都是undefined
 beforeCreate(){
 console.group('==创建之前==')
 console.log(this.$el);
 console.log(this.$data);
 console.log(this.name);
 console.groupEnd()
 },

• created 创建完成

/**
* 创建完成:
*  1.没有找到挂载点,即$el还是undefined
*  2.数据已经存在,此时可以操作数据
*/
created(){
    console.group('==创建完成==')
    console.log(this.$el);
    console.log(this.$data);
    console.log(this.name);
    console.groupEnd() 
},

• beforeMount 挂载之前

/**
             * 挂载之前:
             *  1.找到挂载点,但是数据没有被渲染
             *  2.可以操作数据
            */
beforeMount(){
    console.group('==挂载之前==')
    console.log(this.$el);
    console.log(this.$data);
    console.log(this.name);
    console.groupEnd() 
},

• mounted 挂载完成

/**
             * 挂载完成:
             *  1.找到挂载点,并且数据已经渲染完成
             *  2.可以操作数据
             * 作用: 发起ajax请求,开启轮播图,计时器.延时器
            */
mounted(){
    console.group('==挂载完成==')
    console.log(this.$el);
    console.log(this.$data);
    console.log(this.name);
    console.groupEnd() 
},

• beforeUpdate 更新之前

/**
             * 更新之前:
             *  1.数据已经是最新
             *  2.此时指的是页面再次渲染之前
            */
beforeUpdate(){
    console.group('==更新之前==')
    console.log(this.$data);
    console.log(this.name);
    console.groupEnd() 
},

• updated更新完成

/**
             * 更新完成:
             *  1.数据已经是最新
             * 2.此时指的是页面再次渲染完成
            */
updated(){
    console.group('==更新完成==')
    console.log(this.$data);
    console.log(this.name);
    console.groupEnd() 
}

• beforeDestroy 销毁之前

    //销毁之前
beforeDestroy(){
    console.group('==销毁之前==')
    console.groupEnd() 
},

• destroyed销毁完成

 //销毁完成
destroyed(){
    console.group('==销毁完成==')
    console.groupEnd() 
}