技術標籤：run till exit from #0

Vue3.0: 個人筆記

Vue3.0: Note

Vue3.0 更新中, 最引人注目的new featrues 毫無疑問就是setup函式和composition API的引入了. 在官方文件中composition API章節的例子中我們不難看出, 這個引入這兩者的一大目的, 是將那些分散在不同元件選項中的、同屬於相同功能模組實現的程式碼集合起來, 便於後期維護管理, 也便於以後複用相同功能模組的程式碼.

一般而言, 一個功能模組的實現往往需要多個元件選項的參與, 如: 在data和computed中定義變數、在methods中定義函式方法、在created

下面這張官方文件用圖直觀地展示了這種情況以及可能帶來的弊端:

其中, 相同顏色的程式碼屬於相同功能模組.

因此, 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

  }

}