深入理解Vue的组件生命周期-Vue.js-PHP中文网

深入理解Vue的组件生命周期

WBOY

发布： 2023-10-15 09:07:41

原创

672 人浏览过

深入理解Vue的组件生命周期

深入理解Vue的组件生命周期，需要具体代码示例

引言：
Vue.js 是一款渐进式 JavaScript 框架，以其简洁易学、高效灵活的特性而备受开发者的青睐。在Vue的组件化开发中，了解组件的生命周期是重要的一环。本文将深入探讨Vue组件的生命周期，并提供具体的代码示例，帮助读者更好地理解和应用。

一、Vue 组件的生命周期图示
Vue组件的生命周期可以看做是组件从创建到销毁的整个过程。下图是Vue组件的生命周期图示，包含了不同阶段的钩子函数。当创建一个组件时，它会依次经历“创建阶段”、“挂载阶段”、 “更新阶段”和“销毁阶段”。

（插入生命周期图示）

二、Vue 组件生命周期的具体阶段和钩子函数

创建阶段（Creation）
- beforeCreate：在实例初始化之后，数据观测（data observer）和事件/watcher 事件配置之前被调用。此时，组件中的数据（data）和事件都还未初始化。
- created：在实例创建完成后被调用。此时，组件中的数据已经可以访问，可以进行数据的初始化等操作。
挂载阶段（Mounting）
- beforeMount：在模板渲染成HTML之前被调用。此时，模板（template）已经编译完成，但尚未挂载到页面中。
- mounted：在模板渲染成HTML后被调用。此时，组件已经被挂载到页面中，可以进行DOM操作。
更新阶段（Updating）
- beforeUpdate：在响应式数据发生改变且虚拟DOM重新渲染之前被调用。此时，组件中的数据已经发生了改变，但DOM尚未更新。
- updated：在虚拟DOM重新渲染和打补丁之后被调用。此时，组件的数据已经更新，DOM也已经更新完成。
销毁阶段（Destruction）
- beforeDestroy：在实例销毁之前被调用。此时，组件尚未被销毁，仍然可以访问组件的数据和方法。
- destroyed：在实例销毁之后被调用。此时，组件已经被销毁，不能再访问组件的数据和方法。

三、代码示例

<template>
  <div>
    <p>组件生命周期示例</p>
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello, Vue!'
    }
  },
  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')
  }
}
</script>

登录后复制

上面的代码是一个简单的Vue组件示例。在不同的生命周期阶段，我们通过控制台输出来查看钩子函数的执行情况。可以通过以下步骤来运行示例：

创建一个Vue项目，并引入上述组件文件。

在父组件中使用上述组件：

<template>
  <div>
 <child-component></child-component>
  </div>
</template>

<script>
import ChildComponent from '@/components/ChildComponent.vue'

export default {
  components: {
 ChildComponent
  }
}
</script>

登录后复制