Vue2.0生命周期

为了实现更多更方便的操作Vue在实例创建的过程中从开始到结束有大致八个阶段,每个阶段都有一个固定可以执行的函数也就是[钩子函数]大致意思是指"环环相扣"一个带着一个的关系.
Vue2.0版本中生命周期公有八个阶段,都是一前一后成对出现的相对比较好理解

①初始化之前阶段[beforeCreate]

beforeCreate:function(){
el,data 还没有初始化
alert("实例化创健之前!");
}创建前执行

②初始化完成后阶段[created]

created:function () {
            //data已经初始化,但是el还没有
            console.log(this._data);
            console.log(this.$el);
            //alert("实例创建成功!");
        }

③挂载之前阶段[beforeMount]

beforeMount:function () {
            //挂载之前,这时候就已经data跟el初始化了
            console.log(this._data);
            console.log(this.$el);
        }

④挂载完成后阶段[mounted]

mounted:function () {
            //挂载完成
        }

⑤数据修改前阶段[beforeUpdate]

beforeUpdate:function () {
            //修改前
            alert("修改前")
        }

⑥数据修改后阶段[updated]

updated:function () {
            //修改后
            alert("修改后")
        }

⑦销毁前准备销毁阶段[beforeDestroy]

beforeDestroy:function () {
            //销毁前
            //alert("准备销毁")
        }

⑧已经完全销毁阶段[destroyed]

destroyed:function () {
            //销毁后
            //alert("销毁")
        }

注意!"销毁"这一对儿函数是需要在外部手动触发的运行的好好地干嘛要自动销毁?对吧
需要说的是销毁后只是会造成失去对控制范围的"el"的管辖,至于已经编译输出的数据内容是不会造成影响的,只是以后无法再调用对其进行操作而已

posted @ 2017-07-03 13:26  和盛商行  阅读(143)  评论(0编辑  收藏  举报