vue生命周期函数

生命周期图

随着vue学习，生命周期图参考价值会越来越高。

1. init events and lifecycle(初始化事件和生命周期）
2. init injections or reactivity(初始注入和反应）
3. has el option(具有el 选项）
4. when vm.mount(el)iscalled(vm.mount(el) is called(vm.mount(el)iscalled(vm.mount(el)被调用时）
5. has template option(具有template选项）
6. compile template into render function（将模板编译为长线函数）
7. compile el’s outerHTML as template（将el的outerhtml编译为模板 ）
8. create vm.elandreplaceelwithit（创建vm.el and replace el with it（创建vm.elandreplaceelwithit（创建vm.el并用它替换el）
9. virtual dom re-render and patch（虚拟DOM重新呈现和修补 ））
10. when vm.destroy()（vm.destroy()（vm.destroy()（vm.destroy被调用时）
11. teardown watchers,child components and event listeners（拆卸监视程序、子组件和事件侦听器 ）

周期函数

beforeCreate

在实例初始化和周期开始之后，数据观测和event/watcher配置之前被调用。

created

在实例插件完成后被立即调用。这一步，实例已经完成以下配置：数据观测，属性和方法的运算，watcher/event事件回调。然而挂载阶段还没开始，$el属性目前不可见。

beforeMount

在挂载开始之前被调用，相关的render（呈现）函数首次调用
该钩子函数在服务器端渲染期间不被调用。

mounted

el被新车间的vm.el替换，并挂载到实例上去之后调用该钩子。如果root实例挂载了一文档内元素，当mounted被调用时vm.el替换，并挂载到实例上去之后调用该钩子。如果root实例挂载了一文档内元素，当mounted被调用时vm.el替换，并挂载到实例上去之后调用该钩子。如果root实例挂载了一文档内元素，当mounted被调用时vm.el也在文档内。

注意 mounted 不会承诺所有的子组件也都一起被挂载。如果你希望等到整个视图都渲染完毕，可以用 vm.$nextTick 替换掉 mounted：

mounted: function () {
this.$nextTick(function () {
// Code that will run only after the
// entire view has been rendered
})
}

该钩子在服务器端渲染期间不被调用。

beforeUpadate

数据更新时调用，发生在虚拟dom打补丁之前。这里适合在更新之前访问现在dom，比如手动删除已添加的时间监听器该钩子在服务器端渲染期间不被调用，因为只有初次渲染会在服务端进行。

updated

由于数据更改导致的虚拟dom重新渲染和打补丁，在这之后会调用该钩子。
当这个钩子被调用时，组件 DOM 已经更新，所以你现在可以执行依赖于 DOM 的操作。然而在大多数情况下，你应该避免在此期间更改状态。如果要相应状态改变，通常最好使用计算属性或 watcher 取而代之。
注意 updated 不会承诺所有的子组件也都一起被重绘。如果你希望等到整个视图都重绘完毕，可以用 vm.$nextTick 替换掉 updated：

updated: function () {
this.$nextTick(function () {
// Code that will run only after the
// entire view has been re-rendered
})
}

activated

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

• 参考： 构建组件-keep-alive
• 动态组件-keep-alive

beforeDestroy

实例销毁之前调用。在这一步，实例仍然完全可用。
该钩子在服务器端渲染期间不被调用

destroyedvue

实例销毁后调用。调用后，vue实例指示的所有东西都会解除绑定所有的时间监听器会被移除，所有的子实例也会被销毁

errorCaptured（2.5.0+新增 错误捕获）

(err: Error, vm: Component, info: string) => ?boolean
当捕获一个来自子孙组件的错误时被调用。此钩子会收到三个参数：错误对象、发生错误的组件实例以及一个包含错误来源信息的字符串。此钩子可以返回 false以阻止该错误继续向上传播。