vue 实例的生命周期

前言

以前忽略的一句话

每个vue.js应用都是通过函数vue创建一个vue的根实例启动的。

在实例化vue时，需要传入一个选项对象，它可以包含数据(data)、模板(template)、挂载元素(el)、方法(methods)、生命周期钩子(life cyclehook)等选项。

var vm = new Vue({
 // 我就是选项对象
})

生命周期

每个vue实例在被创建之前都要经过一系列的初始化过程。例如，实例要配置数据监测(data observer)、编译模板、挂载实例到dom，然后在数据变化时更新dom。

vue 声明周期

钩子函数	含义
beforeCreate	在实例初始化之后，数据监测(data observer)和init events事件配置之前被调用。 此时组件的选项还未挂载，因此无法访问data,methods等
created	实例已经被创建之后调用，$el还不可见。 实例已完成以下的配置：数据监测(data observer)，event/watch事件回调，属性和方法的运算。
beforeMount	挂载之前调用，相关的render第一次被调用。
mounted	el被新创建的vm.$el替换，并挂载到实例上之后，才调用该钩子函数。 如果根实例挂载了一个文档内元素，当mounted被调用时，vm.el也在文档内。
beforeUpdate	数据更新时调用，发生在virtual dom重新渲染和打补丁之前。 可以在这个钩子中进一步的更改状态，这不会触发附加的重渲染过程。
updated	由于数据更改导致的虚拟dom重新渲染和打补丁，在上述操作之后调用此钩子函数。 这个钩子函数调用之前，组件dom已经更新，所以现在可以执行依赖dom的操作。 在此期间尽量避免更新状态，否则将导致更新无限循环。
beforeDestroy	实例销毁之前调用，实例仍然可用。 可以用this获取实例。 重置操作可在此执行，例如：清除定时器，监听事件
destroyed	Vue实例销毁后调用。 调用后，Vue实例指示的所有东西都会解绑，所有的事件监听器都会移除，所有的子实例也会被销毁。

demo

这位仁兄的例子lucius's blog