vue2.x————生命周期与钩子函数

vue2.x————生命周期与钩子函数

---

前言

现在已经越来越多的人开始使用vue了，vuex+vue-router+axios进行开发成为了趋势，很多人能够快速的进行开发以及和后端做数据的交互，但是对于所谓的生命周期就不知道是什么东西了。于是经过查看API文档以及网上众多的文章查询，还有亲身试验，总结了一下以下经验

---

vue1.x 与 vue2.0的生命周期是有区别的，但基本上我们都是使用vue2.0，如果之前使用了1.x版本开发的小伙伴可以去官网查看一下如何迁移vue官方文档（从vue1.x迁移）

vue1.x钩子函数可以总共分为9个阶段：

1. init ----- 在实例开始初始化时同时调用。此时数据观测。事件和watcher都尚未初始化。
2. created ----- 在实例化创建之后会不调用，此时实例已经结束解析选项，已建立:数据绑定、计算属性、方法、Watcher/事件回调，但是还没有开始DOM编译，$el还不存在
3. beforeCompile ----- 在编译开始前调用
4. compiled ----- 在编译结束后调用。此时所有指令已经生效，因此数据的变化将触发DOM更新，但$el的数据尚未渲染到页面上
5. ready ----- 在编译结束和$el第一次插入文档后调用
6. attached ----- vm.$el插入Dom时调用
7. detached ----- vm.$el 从DOM中删除时调用。必须是由指令或实例方法删除，直接操作vm.$el不会触发
8. destroyed ----- 在实例被销毁之后调用，此时所有的绑定和实例的指令已经解绑，所有子实例已经销毁
   9.destroyed ----- 在实例开始销毁之后调用，此时所有的绑定和实例的指令已经解绑，所有实例已经销毁

vue1.x生命函数的钩子函数

vue2.0钩子函数可以总共分为8个阶段

1. beforeCreate（创建前）----- 2.0版本中新增beforeCreate,在实例初始化之后，数据观察(data observer)和event/watcher事件配置之前被调用。
2. created（创建后）
3. beforeMount(载入前) ----- 2.0版本中新增beforeMount，是在Watcher之前、模板编译成render方法之后调用，相关render首次被调用。该钩子函数在服务器渲染期间不被调用。
4. mounted（载入后）
5. beforeUpdate（更新前） ----- 2.0版本中新增beforeUpdate,是在DOM树生成之前、虚拟DOM树生成之后调用，调用条件是这个vm实例已经mounted过。该钩子函数在服务器渲染期间不被调用。
6. updated（更新后）----- 2.0版本中新增updated，在DOM树生成之后调用，调用条件是这个vm实例已经mounted过。该钩子函数在服务器渲染期间不被调用。
7. beforeDestroy（销毁前）
8. destroyed（销毁后）

vue2.x生命函数的钩子函数

现在的vue最新的版本是2.3.3 基本上与 vue2.0差距不大，在生命周期与钩子函数上基本一样

下面将结合代码去看看钩子函数的执行顺序

HTML代码部分

    

        
        
{{message}}
    

js代码部分

beforecreate:

var app = new Vue({
    el: '#app',
    data: {
        message: "my name is shalien"
    },
    beforeCreate:function () {
         console.group('beforeCreate 创建前状态=========》'); 
         console.log( "el : " + this.$el); //undefined 
         console.log("data : " + this.$data); //undefined
         console.log("message: " + this.message)
    },
    created:function () {
         console.group('created 创建完毕状态===========》');  
         console.log("el : " + this.$el); //undefined
         console.log("data : " + this.$data); //已被初始化
         console.log("message: " + this.message); //已被初始化
    },
    beforeMount:function  () {
         console.group('beforeMount 挂载前状态=========》');
         console.log("el : " + (this.$el)); //已被初始化
         console.log(this.$el); 
         console.log("data : " + this.$data); //已被初始化 
         console.log("message: " + this.message); //已被初始化
    },
    mounted:function () {
        console.group('mounted 挂载结束状态==========》'); 
        console.log("el : " + this.$el); //已被初始化
        console.log(this.$el); 
        console.log("data : " + this.$data); //已被初始化                
        console.log("message: " + this.message); //已被初始化
    },
    beforeUpdate:function () {
        console.group('beforeUpdate 更新前状态=========》');  console.log("el : " + this.$el); 
        console.log(this.$el);
        console.log("data : " + this.$data);
        console.log("message: " + this.message);
    },
    updated:function () {
         console.group('updated 更新完成状态===========》');  console.log("el : " + this.$el);
         console.log(this.$el); 
         console.log("data : " + this.$data); 
         console.log("message: " + this.message);
    },
    beforeDestroy:function () {
         console.group('beforeDestroy 销毁前状态=========》');  
         console.log("el : " + this.$el);
         console.log(this.$el);
         console.log("data : " + this.$data); 
         console.log("message: " + this.message);
    },
    destroyed:function () {
        console.group('destroyed 销毁完成状态==========》'); 
        console.log("el : " + this.$el); 
        console.log(this.$el); 
        console.log("data : " + this.$data);
        console.log("message: " + this.message)
    }
}

在浏览器中进行运行，就会出现我们看到各个时间段的触发，我这里使用的是Chrome浏览器，在控制台中进行输出的样子显示出嵌套的结构，看起来非常的清晰

创建vue实例

beforecreated:el和data尚未初始化
created:完成了 data 数据的初始化，el没有
beforeMount：完成了 el 和 data 初始化 在挂载前状态的时候获取的el值里面还是只有表达式{{message}}这个是使用了虚拟dom技术占据位置，当mounted挂载的时候再把值渲染进去
mounted ：完成挂载

---

当数据发生变化时，如更改data里的message 的值

maessage的值被改变

可以看到，当message里的值被修改的时候，触发updata的函数

---

destroy销毁
我们可以通过app.$destroy对vue的实例进行销毁，销毁完成之后该实例将不会对所挂载的函数进行响应，但是原本生成的dom元素及渲染出来的值还是存在的，执行了detrory操作之后，vue将不能控制

vue实例被销毁

---

生命周期大概就是这些，那么应该在什么时候使用什么函数呢，这个还是那句，看情况而定例如在
beforecreate : 可以在这加个loading事件
created ：在这结束loading，还做一些初始化，实现函数自执行
mounted ： 在这发起后端请求，拿回数据，配合路由钩子做一些事情
beforeDestory： 你确认删除XX吗？
destoryed ：当前组件已被删除，清空相关内容
等........当然更多操作还是得让各位按照各自需求去做了
文章如有错误还请大牛指正！！

如果有更多的更好钩子函数的使用的栗子可以发个评论大家讨论讨论