beforeCreate

  • 在实例初始化之后，数据侦听和侦听器的配置之前
  • 初始化也就是undefined。data，el均不可用。

created

  • 实例创建完成后，数据侦听、计算属性、方法、事件/侦听器的回调函数已被配置完毕。
  • data可用，可以进行数据初始化，因为这个时候页面还没有渲染出来
  • $el不可用，即不可以进行dom操作。

beforeMount

  • render 函数首次被调用
  • 即使出现了el，但是不是最终的dom，不可以在此进行dom操作，是无效的。典型的例子就是，此时的{{message}}还没有替换。

mounted

  • 实例挂载完毕，创建了app.$el并且将el替换到了最终页面的dom上
  • 已经是期望的展示也也页面了，在此时想做一些dom操作是有效的。
  • 注意 mounted 不会保证所有的子组件也都被挂载完成。如果你希望等待整个视图都渲染完毕，可以在 mounted 内部使用：
mounted() {
  this.$nextTick(function () {
    // 仅在整个视图都被渲染之后才会运行的代码
  })
}

beforeUpdate

  • 数据发生改变后，DOM 被更新之前
  • 经典使用：移除手动添加的事件监听器

updated

  • 数据更改导致的虚拟 DOM 重新渲染和更新完毕之后
  • 组件 DOM 已经更新，如果要相应状态改变，通常最好使用计算属性或侦听器取而代之。
  • updated 不会保证所有的子组件也都被重新渲染完毕。如果你希望等待整个视图都渲染完毕，可以在 updated 内部使用 vm.$nextTick：
updated() {
  this.$nextTick(function () {
    // 仅在整个视图都被重新渲染完毕之后才会运行的代码
  })
}

activated

  • 被 keep-alive 缓存的组件激活时调用

deactivated

  • 被 keep-alive 缓存的组件失活时调用

beforeDestroy

  • 实例销毁之前
  • 实例仍然完全可用

destroyed

  • 实例销毁后
  • Vue 实例的所有指令都被解绑，所有的事件监听器被移除，所有的子实例也都被销毁。

2.5.0+ 新增

errorCaptured

  • 捕获一个来自后代组件的错误
  • 三个参数：错误对象、发生错误的组件实例以及一个包含错误来源信息的字符串
  • 可以返回 false 以阻止该错误继续向上传播
  • 在模板或渲染函数中有一个条件判断来绕过其它内容就很重要；不然该组件可能会进入一个无限的渲染循环。
  • 错误传播规则：
    1、默认情况下，如果全局的 config.errorHandler 被定义，错误仍然会向单一的分析服务的地方进行汇报。
    2、如果一个组件的 inheritance chain (继承链)或 parent chain (父链)中存在多个 errorCaptured 钩子，则它们将会被相同的错误逐个唤起。
    3、errorCaptured 钩子自身抛出了一个错误，则这个新错误和原本被捕获的错误都会发送给全局的 config.errorHandler。
    4、一个 errorCaptured 钩子能够返回 false，它会阻止其它任何会被这个错误唤起的 errorCaptured 钩子和全局的 config.errorHandler。

vue3

beforeUnmount

  • 卸载组件实例之前
  • 实例仍然是完全正常

unmounted

  • 卸载组件实例后
  • 组件实例的所有指令都被解除绑定，所有事件侦听器都被移除，所有子组件实例被卸载。