VUE快速入门心得——Vue生命周期

实例生命周期

今天我们来说一下Vue的生命周期，每个 Vue 实例在被创建之前都要经过一系列的初始化过程。例如，实例需要配置数据观测(data observer)、编译模版、挂载实例到 DOM ，然后在数据变化时更新 DOM 。在这个过程中，实例也会调用一些 生命周期钩子 ，这就给我们提供了执行自定义逻辑的机会。例如，created 这个钩子在实例被创建之后被调用：

var vm = new Vue({  data: {    a: 1  },  created: function () {    // this 指向 vm 实例    console.log('a is: ' + this.a)  }})// -> "a is: 1"

也有一些其它的钩子，在实例生命周期的不同阶段调用，如 mounted、updated、destroyed。钩子的 this 指向调用它的 Vue 实例。一些用户可能会问 Vue.js 是否有“控制器”的概念？答案是，没有。组件的自定义逻辑可以分布在这些钩子中。

生命周期图示

下图说明了实例的生命周期。我们不需要立马弄明白所有的东西，不过以后它会有帮助。

生命周期钩子

我们下边来就上图，对Vue生命周期钩子来说一下。

所有的生命周期钩子自动绑定 this 上下文到实例中，因此你可以访问数据，对属性和方法进行运算。这意味着 你不能使用箭头函数来定义一个生命周期方法 (例如created: () => this.fetchTodos())。这是因为箭头函数绑定了父上下文，因此 this 与你期待的 Vue 实例不同， this.fetchTodos 的行为未定义。

beforeCreat
类型：function
详细：
在实例初始化之后，数据观测(data observer) 和 event/watcher 事件配置之前被调用。
参考：上图图例
Source

created
类型：function
详细：
实例已经创建完成之后被调用。在这一步，实例已完成以下的配置：数据观测(data observer)，属性和方法的运算， watch/event 事件回调。然而，挂载阶段还没开始，$el 属性目前不可见。
参考：上图图例
Source

beforeMount
类型：function
详细：
在挂载开始之前被调用：相关的 render 函数首次被调用。
该钩子在服务器端渲染期间不被调用。
参考：上图图例
Source

mounted
类型：function
详细：
el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子。如果 root 实例挂载了一个文档内元素，当 mounted 被调用时vm.$el 也在文档内。
该钩子在服务器端渲染期间不被调用。
参考：上图图例
Source

beforeUpdata
类型：function
详细：
数据更新时调用，发生在虚拟 DOM 重新渲染和打补丁之前。
你可以在这个钩子中进一步地更改状态，这不会触发附加的重渲染过程。
该钩子在服务器端渲染期间不被调用。
参考：上图图例
Source

updated
类型：function
详细：
由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。
当这个钩子被调用时，组件 DOM 已经更新，所以你现在可以执行依赖于 DOM 的操作。然而在大多数情况下，你应该避免在此期间更改状态。如果要相应状态改变，通常最好使用计算属性或 watcher 取而代之。
该钩子在服务器端渲染期间不被调用。
参考：上图图例
Source

actiated
类型：function
详细：
keep-alive 组件激活时调用。
该钩子在服务器端渲染期间不被调用。
参考：组件
Source

deactiated
类型：function
详细：
keep-alive 组件激活时调用。
该钩子在服务器端渲染期间不被调用。
参考：组件
Source

beforeDestroy
类型：function
详细：
实例销毁之前调用。在这一步，实例仍然完全可用。
该钩子在服务器端渲染期间不被调用。
参考：上图图例
Source

destroyed
类型：function
详细：
Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。
该钩子在服务器端渲染期间不被调用。
参考：上图图例
Source