Vue.js 中的组件有哪些生命周期钩子？

生命周期钩子是 Vue.js 中组件实例在各个生命周期运行时会自动调用的函数。开发者可以在这些钩子函数中做一些处理工作。
Vue.js 组件的生命周期钩子主要分为以下几个阶段:

创建阶段:

1. beforeCreate:实例刚在内存中被创建出来,数据观察者和事件监听器还未被建立。
2. created:实例已经被创建完成,数据观察者和事件监听器已经被建立,但模板还未被挂载。

挂载阶段:

3. beforeMount:模板即将被挂载到实例上,数据观察者和事件监听器已经被建立。
4. mounted:模板已经挂载到实例上,所有子组件也都一同被挂载。

运行阶段:

5. beforeUpdate:组件更新前调用,具有新的响应式数据。
6. updated:组件更新后调用,DOM 已完成更新。

销毁阶段:

7. beforeDestroy:实例销毁前调用。可在此处做一些清理工作。
8. destroyed:Vue 实例销毁后调用。调用后,Vue 实例所有东西都会解绑定,所有的事件监听器会被移除。

示例:

js
new Vue({
  data: {
    a: 1
  },
  beforeCreate() {
    console.log('beforeCreate')
  },
  created() {
    console.log('created')
  },
  beforeMount() {
    console.log('beforeMount')
  },
  mounted() {
    console.log('mounted')
  },
  beforeUpdate() {
    console.log('beforeUpdate')
  },
  updated() {
    console.log('updated')
  },
  beforeDestroy() {
    console.log('beforeDestroy')
  },
  destroyed() {
    console.log('destroyed')
  } 
})

所以,生命周期钩子允许我们在关键环节添加自定义逻辑,是Vue.js组件开发中最基础和最常用的技能之一。