生命周期钩子函数

beforeCompile 移除

使用 created 钩子函数替代。

升级方式

在代码库中运行迁移工具来找出所有使用此钩子函数的示例。

compiled 替换

使用 mounted 钩子函数替代。

升级方式

在代码库中运行迁移工具来找出所有使用此钩子函数的示例。

attached 移除

使用其他钩子函数内置的 DOM 检测 (DOM check) 方法。例如,替换如下:

  1. attached: function () {
  2. doSomething()
  3. }

可以这样使用:

  1. mounted: function () {
  2. this.$nextTick(function () {
  3. doSomething()
  4. })
  5. }

升级方式

在代码库中运行迁移工具来找出所有使用此钩子函数的示例。

detached 移除

使用其他钩子函数内的 DOM 检测 (DOM check) 方法。例如,替换如下:

  1. detached: function () {
  2. doSomething()
  3. }

可以这样使用:

  1. destroyed: function () {
  2. this.$nextTick(function () {
  3. doSomething()
  4. })
  5. }

升级方式

在代码库中运行迁移工具来找出所有使用此钩子函数的示例。

init 重新命名

使用新的 beforeCreate 钩子函数替代,本质上 beforeCreate 和 init 完全相同。init 被重新命名是为了和其他的生命周期方法的命名方式保持一致。

升级方式

在代码库中运行迁移工具来找出所有使用此钩子函数的示例。

ready 替换

使用新的 mounted 钩子函数替代。应该注意的是,使用 mounted 并不能保证钩子函数中的 this.$el 在 document 中。为此还应该引入 Vue.nextTick/vm.$nextTick。例如:

  1. mounted: function () {
  2. this.$nextTick(function () {
  3. // 代码保证 this.$el 在 document 中
  4. })
  5. }

升级方式

在代码库中运行迁移工具来找出所有使用此钩子函数的示例。