组件生命周期：Vue2.x 源码解析第四十篇

前端

2023-12-25 15:52:39

Vue 组件生命周期：深入剖析

组件生命周期简介

Vue.js 中，组件生命周期是一系列在组件不同阶段触发的钩子函数。这些钩子提供了在组件创建、安装、更新和销毁过程中执行特定任务的机制。

组件的生命周期阶段

Vue 组件的生命周期包括以下阶段：

beforeCreate： 在组件实例化之前触发。
created： 在组件实例化之后触发。
beforeMount： 在组件挂载到 DOM 之前触发。
mounted： 在组件挂载到 DOM 之后触发。
beforeUpdate： 在组件更新之前触发。
updated： 在组件更新之后触发。
beforeDestroy： 在组件销毁之前触发。
destroyed： 在组件销毁之后触发。

组件的初始化和挂载

组件的初始化和挂载发生在 Vue.extend() 方法中。它创建一个组件构造函数，该构造函数继承自 Vue 构造函数并包含组件特定的生命周期钩子。当创建一个组件实例时，Vue 会依次调用组件实例的生命周期钩子，完成组件的初始化和挂载。

const MyComponent = Vue.extend({
  // 组件选项
  data() {
    return {
      title: 'Hello World'
    }
  }
})

const componentInstance = new MyComponent()
componentInstance.$mount()

组件的更新

组件的更新由 Vue.set() 方法触发。当组件数据更改时，Vue 会调用 Vue.set() 来更新数据。然后，Vue 依次调用组件实例的生命周期钩子，完成组件的更新。

componentInstance.title = 'New Title'
// 触发更新

组件的卸载

组件的卸载由 Vue.$destroy() 方法触发。当组件不再需要时，可以使用此方法卸载它。当组件被卸载时，Vue 会依次调用组件实例的生命周期钩子，完成组件的卸载。

componentInstance.$destroy()

钩子函数

钩子函数是生命周期中特定阶段触发的函数。这些函数可用于执行各种任务，例如：

在组件挂载时加载数据
在组件更新时更新数据
在组件卸载时释放资源

示例

const MyComponent = {
  // 组件选项
  data() {
    return {
      title: 'Hello World'
    }
  },
  mounted() {
    // 组件挂载后加载数据
    this.loadData()
  }
}