生命周期 用户可以操作dom_当面试官问：能否介绍下Vue生命周期时，该如何回答...

上一篇文章中我们讲到了Vue框架的概念以及选用Vue的优劣势。本篇文章将就Vue进行进一步介绍—Vue生命周期。

首先每个 Vue 应用都是通过用 Vue 函数创建一个新的 Vue 实例开始的(受MVVM模型影响，Vue文档设计中经常会使用vm(ViewModel缩写)这个变量来表示Vue实例)： 

Vue实例在创建时都要经历初始化过程，例如初始化数据、编译模板、实例挂载DOM、数据更新等。在施行初始化过程的不同阶段会运行一些叫生命周期钩子的函数，方便用户添加自己的代码。Vue生命周期分为三部分：初始化阶段、运行阶段和销毁阶段，钩子函数分别为beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy、destroyed。 

beforeCreate

实例、组件通过new Vue()创建出来之后会初始化时间和生命周期，然后执行beforeCreate钩子函数。这个阶段数据还没有挂载DOM元素，实例的data、methods是读取不到的，一般不做操作。

Created

实例在创建完成后被调用，在Created阶段便已经完成了数据观测、属性及方法运算、watch/event事件回调工作。但是mount挂载阶段还没开始，$el属性目前不可用，数据未在DOM元素上进行渲染。主要应用有调用数据、更改数据、调用方法、调用异步函数。

beforeMount

beforeMount阶段开始查找实例或组件对应的模板，编译模板为虚拟DOM放入render函数内准备渲染，实现render函数的首次调用。然后启动beforeMount钩子函数，由于在这一阶段虚拟DOM已经创建完成，所以可直接完成渲染。同Created阶段相同，beforeMount阶段可以对数据进行更改，且不会触发updated和其他钩子函数，在这里可以做渲染前最后一次数据更改。

Mounted

el选项的DOM节点被创建的 vm.$el 替换，并挂载到实例上去后调用该钩子函数。此时通过render渲染出真实DOM，然后执行mounted钩子函数。在mounted阶段，我们可以访问被动组件、模板和DOM，而且mounted也是最常用的生命周期钩子。

beforeUpdate

beforeUpdate在组件或实例发生数据更改之后开始运行，然后虚拟DOM机制会重建虚拟DOM，并与上次的DOM树利用diff算法进行对比进行再次渲染。在这一过程中指允许我们在实际渲染前获取组件上的反映数据的状态并在钩子中进一步地修改$vm.data，这不会触发附加的重渲染过程。

updated

由于数据更改导致的虚拟DOM数据已经更新完成，所以我们就可以直接依赖于DOM执行updated钩子了。但是在此时不要修改数据，一旦出现数据修改就会触发beforeUpdate，使updated和beforeUpdated两个生命周期进入死循环。 

beforeDestory

在调用$destroy方法后就会立即执行beforeDestory钩子，在这一步，实例仍然是可以使用的，在这里通常会做一些类似清除计时器、清除非指令绑定事件等。

Destoryed

Vue实例销毁调用后，Vue实例知识的所有内容都会解除绑定，事件监听器会被移除，子实例也会被销毁。

有一点需要注意的是beforeMount、mounted、beforeUpdate、updated、beforeDestroy、destroyed这几个钩子函数，在服务器端渲染期间不被调用。

关于Vue生命周期的介绍就到这里，云季科技T聚客小程序营销工具拥有着基于Vue框架的响应式运营后台，高性能TitanFramework微服务后台服务带给小程序用户全新的体验。了解咨询T聚客欢迎拨打400-670-7080，开启运营获客新时代。