生命周期

2018-11-24 本文已影响0人小杰的简书

生命周期示意图

下面是实例生命周期示意图。你不需要现在就完全明白一切，但是，当你深入学习和组织架构的时候，这个示意图会是很有帮助的参考。

Vue 实例的生命周期

选项 / 生命周期钩子

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

beforeCreate

类型：Function
详细：

在实例初始化之后，立即同步调用，在数据观察(data observer)和 event/watcher 配置之前被调用。
参考：生命周期示意图

created

类型：Function
详细：

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

beforeMount

类型：Function
详细：

在挂载开始之前被调用：相关的 render 函数首次被调用。

该钩子在服务器端渲染期间不被调用。
参考：生命周期示意图

mounted

类型：Function
详细：

在实例挂载之后调用，其中 el 被新创建的 vm.$el 替代。如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.$el 也在文档内。

Note that mounted does not guarantee that all child components have also been mounted. If you want to wait until the entire view has been rendered, you can usevm.$nextTick inside of mounted:

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

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

参考：生命周期示意图

beforeUpdate

类型：Function
详细：

在 DOM 被 patch 之前调用数据修改。这是在 DOM 更新之前，访问已有 DOM 的最佳时机，例如，手动地移除之前添加的事件监听器。

在服务器端渲染期间不会调用这个钩子函数，因为在服务器端只执行初始渲染。
参考：生命周期示意图

updated

类型：Function
详细：

由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。

当这个钩子被调用时，组件 DOM 已经更新，所以你现在可以执行依赖于 DOM 的操作。然而在大多数情况下，你应该避免在此期间更改状态。如果要相应状态改变，通常最好使用计算属性或 watcher 取而代之。

Note that updated does not guarantee that all child components have also been re-rendered. If you want to wait until the entire view has been re-rendered, you can usevm.$nextTick inside of updated:

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