Vue 3.0 选项 生命周期钩子

vicky.yu

注意

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

#beforeCreate
类型：Function
详细：
在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。

参考：生命周期图示
#created
类型：Function
详细：
在实例创建完成后被立即调用。在这一步，实例已完成以下的配置：数据观测 (data observer)，property 和方法的运算，watch/event 事件回调。然而，挂载阶段还没开始，$el property 目前尚不可用。

参考：生命周期图示
#beforeMount
类型：Function
详细：
在挂载开始之前被调用：相关的 render 函数首次被调用。

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

参考：生命周期图示
#mounted
类型：Function
详细：
实例被挂载后调用，这时 Vue.createApp({}).mount() 被新创建的 vm.$el 替换了。如果根实例挂载到了一个文档内的元素上，当 mounted 被调用时 vm.$el 也在文档内。

注意 mounted 不会保证所有的子组件也都一起被挂载。如果你希望等到整个视图都渲染完毕，可以在 mounted 内部使用 vm。$nextTick：

  mounted() {
    this.$nextTick(function () {
      // 仅在渲染整个视图之后运行的代码
    })
  }
该钩子在服务器端渲染期间不被调用。

参考：生命周期图示