生命周期和钩子函数解析

首先解释一下什么是生命周期，类比一下，如同人的一生有幼儿期、青春期、更年期、老年期一样，Vue.js代码的运行也有一个类似的周期，这里称之为生命周期。生命周期就如同一个有序的流程，就像代码从下往上运行一样，想象一下是不是就像一条挂起来的绳索从上往下，但是在绳索上面每间隔一段距离就有一个挂钩，可以从上往下在挂钩上面挂上物品，称之为钩子函数。在每个阶段运行的代码就是钩子函数的大括号包裹的代码。 一个完整的生命周期大约有十多个钩子函数，分别为beforeRouteLeave、beforEach、beforeEnter、beforeRouteEnter、beforeResolve、afterEach、beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、activated、deactived、beforeDestroy、destroyed，但实际开发过程中，不是每个钩子函数都需要用到，小生这篇文章给大家介绍最常用的beforeCreate、created、mounted、updated、beforeDestroy这5个钩子函数的应用。

一、beforeCreate钩子函数

在beforeCreate阶段，Vue.js实例的挂载元素$el和数据对象date都为undefined，还未初始化。在此阶段可以做的事情是加loading事件。数据观测和event/watcher配置尚未完成，不能访问到methods、data、computed、watch上的方法和数据。

beforeCreate() {
    console.log("创建前:"）;
    console.log(this.$el）;
    console.log(this.$data);  
 },

一般情况下，这个钩子函数可以在每个组件中增加一些特定的属性，如混合。

二、created钩子函数

在created阶段，Vue.js实例的数据对象data有了，挂载元素$el还没有。在此阶段可以做的事情是结束loading、请求数据为mounted渲染做准备。

created() {
    console.log("创建完成:");
    console.log(this.$el);
    console.log(this.$data);  
},

调用Smount方法，开始挂载组件到DOM上。 这个Vue.js实例已经数据实例化，把methods方法、computed计算属性都注入实例中的，只不过还不能获取到DOM节点元素，因为这个钩子函数阶段DOM还没有渲染完毕，所以还不能访问到el、el、el、refs属性内容。 但是，在这个阶段已经可以发起后台接口请求尝试对一些数据进行初始化，并且对一些绑定到了DOM上的属性变量进行赋值，当mounted执行时，这些数据将第一时间被渲染到DOM中。

三、mounted钩子函数

在mounted阶段，Veu.js实例挂载完成，data.filter成功渲染。在此阶段可以做的事情是配合路由钩子使用。实例被挂载后调用，这是el被新创建的vm.el也在文档内。需要注意的是，mounted不会保证所有子组件的DOM也都渲染完毕。如果希望等到整个视图都渲染完毕，则可以在mounted内部使用vm.el也在文档内。 需要注意的是，mounted不会保证所有子组件的DOM也都渲染完毕。如果希望等到整个视图都渲染完毕，则可以在mounted内部使用vm.el也在文档内。需要注意的是，mounted不会保证所有子组件的DOM也都渲染完毕。如果希望等到整个视图都渲染完毕，则可以在mounted内部使用vm.nextTick。

mounted() {
   console.log("挂载完成:");
   console.log(this.$el）;
   console.log(this.$data);  
   console.log(this.$refs);
   this.$nextTick(function() {
       //Code that will run only after the
       //entire view has been rendered
   })
},

四、updated钩子函数

当更新DOM结束时，也就是updated触发时。如果在钩子函数updated(){}中去修改某一个变量，那么这时由于变量发生了变化又会重新导致触发beforeUpdate钩子函数执行。如果变量变化导致DOM结构出现改变，那么将会继续循环执行update钩子函数，进入一个无限死循环。所以，这里建议不要在updated中进行变量或DOM文档节点的变更，更多的应该是对虚拟变量的改变。例如，通常在使用同一个组件，而组件本身在多次切换过程中并不会重复执行组件内部的created时，为了达到重复判断created钩子函数中的内容，才使用updated钩子函数。这样等同于使用了watch监听某些需要使用的虚拟变量，以达到判断当前组件在改变某些值的目的。

五、 beforeDestroy钩子函数

有一种情况就是在使用弹窗时，弹窗又加入了一个新组件，而这个组件中的一些变量和方法，并不会因为弹窗关闭而自动复原。可是需求却隐形要求当组件从弹窗关闭后，其中初始化的那些对应的变量和方法均需要reset。这时就需要通过在组件内部使用beforeDestroy钩子函数，赶在组件摧毁之前，将对应的变量和方法全部初始化。这些变量可以是父组件的也可以是自身的this指针，方法亦然。而不用destroy钩子函数，是因为在destroy钩子函数触发时，对应的变量和方法已经不能访问了，更不要说去做修改。