Vue组件生命周期三个阶段全面总结讲解

Vue组件生命周期三个阶段全面总结讲解

Vue组件生命周期分为三个阶段，分别为创建（Creation）、更新（Update）和销毁（Deletion）。对于一个Vue组件而言，当组件被创建后，Vue会自动执行一系列的生命周期函数，这些函数将会对组件进行一些操作，让组件可以正确地渲染出来，并完成组件的销毁。在接下来的内容中，我们将详细讲解这三个阶段以及每个阶段中调用的生命周期函数及其作用。

创建阶段

创建阶段是指当组件被创建时，Vue会自动调用一系列的生命周期函数，这些函数将会对组件进行一些初始化的操作，让组件可以正确地渲染出来。

• beforeCreate：在实例初始化之后、数据观测(data observation)和event/watcher事件配置之前被调用。在这个阶段，组件实例还没有初始化完成，组件中的data和methods等都无法访问。
• created：在实例创建完成后被立即调用。在这个阶段，组件实例已经完成了初始化，但是组件还没有被挂载到页面上。
• beforeMount：在挂载开始之前被调用。在这个阶段，组件实例已经被创建出来，但还没有被挂载到页面上。
• mounted：在实例挂载之后被调用。在这个阶段，组件已经被挂载到页面上，DOM元素已经可以访问。

示例：

<template>
  <div>
    <h1>{{message}}</h1>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: "Hello Vue.js"
    }
  },
  beforeCreate() {
    console.log("beforeCreate: 组件实例创建之前")
  },
  created() {
    console.log("created：组件实例创建之后")
  },
  beforeMount() {
    console.log("beforeMount：组件挂载之前")
  },
  mounted() {
    console.log("mounted：组件已经挂载到页面上")
  }
}
</script>

执行以上代码，控制台将输出：

beforeCreate: 组件实例创建之前
created：组件实例创建之后
beforeMount：组件挂载之前
mounted：组件已经挂载到页面上

更新阶段

更新阶段是指当组件的数据发生变化时，Vue会自动更新视图，这个时候Vue也会自动执行一系列的生命周期函数来更新组件的状态、渲染UI等。

• beforeUpdate：在DOM重新渲染之前被调用。在这个阶段，组件已经准备好要更新DOM了，但是DOM还没有重新渲染。
• updated：在DOM重新渲染和更新完毕之后立即被调用。在这个阶段，组件已经完成了DOM的更新，并且可以访问更新后的DOM元素。

示例：

<template>
  <div>
    <h1>{{message}}</h1>
    <button @click="changeMessage">更改消息</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: "Hello Vue.js"
    }
  },
  methods: {
    changeMessage() {
      this.message = "Hello World"
    }
  },
  beforeUpdate() {
    console.log("beforeUpdate: 组件即将更新")
  },
  updated() {
    console.log("updated：组件已经更新完毕")
  }
}
</script>

执行以上代码，当我们点击“更改消息”按钮时，控制台将输出：

beforeUpdate: 组件即将更新
updated：组件已经更新完毕

销毁阶段

销毁阶段是指当组件被销毁时，Vue会自动执行一系列的生命周期函数来清理内存，预防内存泄漏等问题。

• beforeDestroy：在实例销毁之前调用。在这个阶段，组件实例还没有被销毁，但是已经开始销毁了，各种事件监听会被移除，定时器会被取消等操作也将会在这个阶段进行。
• destroyed：在实例销毁之后调用。在这个阶段，组件已经销毁了，无法访问组件实例了。

示例：

<template>
  <div>
    <h1>{{message}}</h1>
    <button @click="destroy">销毁组件</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: "Hello Vue.js"
    }
  },
  methods: {
    destroy() {
      this.$destroy()
    }
  },
  beforeDestroy() {
    console.log("beforeDestroy: 组件即将销毁")
  },
  destroyed() {
    console.log("destroyed：组件已经销毁")
  }
}
</script>

执行以上代码，当我们点击“销毁组件”按钮时，控制台将输出：

beforeDestroy: 组件即将销毁
destroyed：组件已经销毁