vue实例生命周期钩子

每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会。

vue2.0主要有以下几个生命周期钩子：

beforeCreate,created

beforeMount,mouted

beforeUpdate,updated

activated,deactivated

beforeDestroy,destroyed

errCaptured

官网图片：

分别介绍这些生命周期钩子函数在什么时候触发：（当页面一刷  新就会执行beforeCreate,created，beforeMount,mouted）

beforeCreate：在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。$el元素还是undefined,$datd也是undefined

created：在实例创建完成后被立即调用。在这一步，实例已完成以下的配置：数据观测 (data observer)，属性和方法的运算，watch/event 事件回调，所以$data初始化完成，然而，挂载阶段还没开始，

$el

 属性目前不可见是undefined。

而在created和beforeMount这一段期间发生了什么呢？看官方文档的生命周期图片可知，在这一期间会判断有无el选项，如果有el选项就继续向下编译，没有的话就会停止编译，测试也已注释掉data里面的el会发现钩子函数不会执行beforeMount钩子，停留在created阶段，直到vue实例上调用$mount(el),获取到el选项之后才会向下编译，获取到el,会判断有无template选项，如果有的 话，将其作为模板编译成render函数，如果没有template选项，则将外部HTML作为模板编译（outer HTML），template选项中的模板优先级要高于outer HTML的优先级，也就是说如果两个编译模板同时存在，会使用template选项中的模板编译。

在vue对象中有一个render函数，它是以createElement作为参数，然后做渲染操作，看代码也就是利用了原生的方法来创建元素

[code]new Vue({
el: '#app',
render: function(createElement) {
return createElement('h1', 'this is createElement')
}
})

页面中渲染之后就相当于我们直接在html中直接写<h1></h1>效果相同，如果有render函数选项 ，那么他的优先级最高。这个阶段主要是给vue实例对象添加$el成员，并且替换掉挂载的DOM元素。到了mounted钩子时我们也已发现el的不同是beforeMount时元素内容还是{{}}进行占位的，因为找个阶段还没有挂载到页面上，还是虚拟DOM形式存在，mounted之后可以看到元素内容的变化。

beforeMount:在挂载开始之前被调用（模板编译之前）$el元素被初始化,$datd也初始化完成

mouted：

el

 被新创建的 

vm.$el

 替换，并挂载到实例上去之后调用该钩子。（模板编译完成）$el元素被初始化,$datd也初始化完成，请求数据放到mounted里面。

beforeUpdate:数据更新

updated：数据更新完毕

beforeUpdate和updated生命周期钩子触发是在当vue监测到data中的数据发生了改变，就会触发对应组件的重新渲染，先后调用beforeUpdate和钩子函数updated

activated：keep-alive 组件激活时调用。该钩子在服务器端渲染期间不被调用。

deactivated：keep-alive 组件停用时调用。该钩子在服务器端渲染期间不被调用。

beforeDestroy：实例销毁之前调用（组件挂载与卸载的简单例子，在父组件里面放一个button,点击事件来控制组件的显示与隐藏，隐藏的时候就调用destroyed）

destroyed：实例销毁完成之后调用

errCaptured：当捕获一个来自子孙组件的错误时被调用。此钩子会收到三个参数：错误对象、发生错误的组件实例以及一个包含错误来源信息的字符串。此钩子可以返回 

false

以阻止该错误继续向上传播。

阅读更多