一文详解Vue选项式 API 的生命周期选项和组合式API

前言

Vue 3.0 正式版发布后，options API 和 composition API 成为开发者最热门的讨论话题。Options API 是 Vue 2.x 默认使用的 API，而在 Vue 3.0 中引入了 Composition API，可谓是 Vue 3.0 的一大亮点。两种 API 的生命周期选项有何不同呢？

本文将详细介绍 Vue 选项式 API 的生命周期选项和组合式 API，并提供两个示例来说明。

Vue 选项式 API 的生命周期选项

生命周期函数作为一组函数，为 Vue 实例的创建、更新、销毁等环节提供了触发点，可以在函数内部进行必要的逻辑处理。Vue 选项式 API 常用的生命周期选项有以下几种：

beforeCreate：实例创建之前调用，此时 data、methods 等实例属性和方法都还未初始化；
created：实例创建后立即调用，此时 data、methods 等实例属性和方法都已经初始化；
beforeMount：在挂载开始之前被调用，即在 render 方法之前被调用，该函数最后一次修改组件最后一次更改 Dom 的机会，可以进行一次有关组件的操作；
mounted：挂载到实例上后调用，渲染模版, 并将实例挂载到 DOM 上后调用，该函数适合进行一些业务或界面进来的初始化操作；
beforeUpdate：在组件更新之前调用，数据已经存在，但并未还没有渲染到视图上去，可以在该钩子函数中进行准备工作，例如获取新数据。但不要修改现有的数据或视图，因为递归更新导致的无限循环会使浏览器崩溃；
updated：在组件更新之后调用，此时组件已经使用新数据渲染完成，所以该函数可以用来操作更新后的 DOM；
beforeUnmount：在实例销毁之前调用，此时实例仍然可以被响应，因此可以在这里执行清理操作；
unmounted：实例被销毁后调用。此时实例所有内容以及监听的事件被清除。

Vue 组合式 API

Vue 组合式 API 将无法抵御的组件逻辑进行更细粒度的拆分，可使代码更易维护、易重用。组合式 API 的核心是 setup 函数，该函数在组件实例制作时调用一次。setup 函数负责接受 props 和 context 并返回一些列可供 Vue 实例直接使用的响应对象。

下面是一个示例：

import { onMounted, onUnmounted, reactive } from 'vue'

export default {
  setup(props) {
    const state = reactive({
      count: 0
    })
    const increment = () => {
      state.count++
    }

    onMounted(() => {
      console.log('Mounted')
    })

    onUnmounted(() => {
      console.log('Unmounted')
    })

    return {
      state,
      increment
    }
  }
}

上述代码中，onMounted 和 onUnmounted 同 Options API 的 mounted 和 destroyed 职责相同，分别在组件挂载和销毁时进行一些需要的逻辑操作。

使用组合式 API 优势：

更好的解耦，拆分组件功能，有利于代码的组织和维护；
改善代码的复用性，组合功能可以独立于 UI 组件而存在；
使逻辑聚焦于组件状态的控制上。

下面再来一个示例：

import { onMounted, onBeforeUnmount } from 'vue'

export default {
  setup(props, context) {
    onMounted(() => {
      console.log('挂载成功')
    })

    onBeforeUnmount(() => {
      console.log('组件即将卸载')
    })

    const handleClick = () => {
      console.log('click')
    }

    return {
      handleClick
    }
  }
}

上述示例中，组件依然包含了 onMounted 和 onBeforeUnmount 生命周期。这两个函数不仅可以在挂载组件 / 卸载组件的监听回调函数中执行特定的逻辑，还可供整个组件的状态和行为进行引用，例如上代码中的 handleClick 函数。