Vue3-Vue2生命周期

Vue3-Vue2生命周期区别

相较于Vue2，Vue3提供了一些新的生命周期钩子函数以及对原有生命周期钩子函数的改动

• beforeCreate

  • 在实例初始化之后，数据观测和事件配置之前被调用。在该钩子函数中，实例的属性和方法尚未初始化。

export default {
  /* Vue3 beforeCreate 生命周期钩子 */
  beforeCreate() {
    console.log('beforeCreate');
    console.log(this.$data); // undefined
    console.log(this.$el); // undefined
  },
  /* Vue2 created 生命周期钩子 */
  created() {
    console.log('created');
    console.log(this.$data); // { ... } (已初始化)
    console.log(this.$el); // undefined
  }
}

• created

  • 在实例创建完成后被立即调用。在该钩子函数中，实例的属性和方法已经初始化完成。

export default {
  /* Vue3 created 生命周期钩子 */
  created() {
    console.log('created');
    console.log(this.$data); // { ... } (已初始化)
    console.log(this.$el); // undefined
  },
  /* Vue2 mounted 生命周期钩子 */
  mounted() {
    console.log('mounted');
    console.log(this.$data); // { ... } (已初始化)
    console.log(this.$el); // <div>...</div> (已挂载)
  }
}

• beforeMount

  • 在挂载开始之前被调用。在该钩子函数中，模板编译尚未完成。

export default {
  /* Vue3 beforeMount 生命周期钩子 */
  beforeMount() {
    console.log('beforeMount');
    console.log(this.$el); // undefined
  },
  /* Vue2 beforeMount 生命周期钩子 */
  mounted() {
    console.log('mounted');
    console.log(this.$el); // <div>...</div> (已挂载)
  }
}

• mounted

  • 在实例挂载之后被调用。在该钩子函数中，实例已经被挂载到DOM中。

export default {
  /* Vue3 mounted 生命周期钩子 */
  mounted() {
    console.log('mounted');
    console.log(this.$el); // <div>...</div> (已挂载)
  },
  /* Vue2 beforeUpdate 生命周期钩子 */
  updated() {
    console.log('updated');
    console.log(this.$el); // <div>...</div> (已更新)
  }
}

• beforeUpdate

  • 在响应式数据更新之前被调用。在该钩子函数中，数据可能被改变，但DOM尚未更新。

export default {
  /* Vue3 beforeUpdate 生命周期钩子 */
  beforeUpdate() {
    console.log('beforeUpdate');
    console.log(this.$el); // <div>...</div> (旧的DOM)
  },
  /* Vue2 beforeUpdate 生命周期钩子 */
  updated() {
    console.log('updated');
    console.log(this.$el); // <div>...</div> (已更新)
  }
}

• updated

  • 在响应式数据更新并且DOM重新渲染之后被调用。

export default {
  /* Vue3 updated 生命周期钩子 */
  updated() {
    console.log('updated');
    console.log(this.$el); // <div>...</div> (已更新)
  },
  /* Vue2 beforeUnmount 生命周期钩子 */
  beforeUnmount() {
    console.log('beforeUnmount');
    console.log(this.$el); // <div>...</div> (将要被卸载)
  }
}

• beforeUnmount

  • 在卸载开始之前被调用。在该钩子函数中，实例尚未被卸载。

export default {
  /* Vue3 beforeUnmount 生命周期钩子 */
  beforeUnmount() {
    console.log('beforeUnmount);
    console.log(this.$el); // <div>...</div> (将要被卸载)
  },
  /* Vue2 destroyed 生命周期钩子 */
  destroyed() {
    console.log('destroyed');
    console.log(this.$el); // undefined
  }
}

activated 、 deactivated 、 errorCaptured 等。这些钩子函数在 Vue3 中已经废弃或替代。

总结:Vue3引入了新的生命周期钩子函数，并对原有的部分钩子函数进行了更名和改动。使用新的生命周期钩子函数能够更好地管理组件的生命周期和实现更细粒度的控制。