run till exit from #0_Vue3.0: 个人笔记

Vue3.0: 个人笔记

Vue3.0: Note

Vue3.0 更新中, 最引人注目的new featrues 毫无疑问就是setup函数和composition API的引入了. 在官方文档中composition API章节的例子中我们不难看出, 这个引入这两者的一大目的, 是将那些分散在不同组件选项中的、同属于相同功能模块实现的代码集合起来, 便于后期维护管理, 也便于以后复用相同功能模块的代码.

一般而言, 一个功能模块的实现往往需要多个组件选项的参与, 如: 在data和computed中定义变量、在methods中定义函数方法、在created,mounted乃至activated等钩子中实现变量初始化, 更复杂的功能可能还涉及watch监听器、provide/inject变量注入和beforeDestroy等生命周期钩子. 而当一个组件中的功能模块变多时, 相关的代码会随着组件选项散落在文件的各个角落, 如同牛郎织女一样遥相辉映、可见而不可得. 这样带来的直接后果就是, 阅读一个组件时, 需要频繁在template、computed、methods等大段代码间反复跳转, 寻找特定变量. 这样不仅降低了阅读体验, 可读性变差, 更有可能让组件变得复杂难懂, 难以维护.

下面这张官方文档用图直观地展示了这种情况以及可能带来的弊端:

其中, 相同颜色的代码属于相同功能模块.

因此, setup函数的引入使得你可以在上一行定义变量, 在这一行定义在mouted钩子中的处理, 在下一行为其注册监听器. 这样将同一功能模块的实现相关代码放在一起, 不仅提升了阅读的流畅性, 连续的上下文还可以有效帮助开发者避免可能潜在的逻辑错误、帮助其他人理解代码内在逻辑.甚至, 你还可以将可复用的功能模块抽离到单独文件中, 有需要时按需引入. 严格的说, 该特性并不是3.0才引入的, 但在2.0中, 无论是引入mixin还是直接引入使用都会引起不必要的困惑:

// src/composables/useUserRepositories.js

import { fetchUserRepositories } from '@/api/repositories'

import { ref, onMounted, watch } from 'vue'

export default function useUserRepositories(user) {

  const repositories = ref([])

  const getUserRepositories = async () => {

    repositories.value = await fetchUserRepositories(user.value)

  }

  onMounted(getUserRepositories)

  watch(user, getUserRepositories)

  return {

    repositories,

    getUserRepositories

  }

}