欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue  composition-api 封裝組合式函數(shù)的操作方法

 更新時間：2022年10月10日 11:14:17   作者：前端迷悟  
在 Vue 應用的概念中，“組合式函數(shù)”(Composables) 是一個利用 Vue 的組合式 API 來封裝和復用有狀態(tài)邏輯的函數(shù)，這篇文章主要介紹了vue  composition-api 封裝組合式函數(shù)的操作方法,需要的朋友可以參考下

介紹

在 Vue 應用的概念中，“組合式函數(shù)”(Composables) 是一個利用 Vue 的組合式 API 來封裝和復用有狀態(tài)邏輯的函數(shù)。

Composables 函數(shù)就是利用 Vue3 提出的 Composition API ，封裝出的一些可以復用的組合式函數(shù)，目前 Vue2 也可以使用（2.7 版本可以直接使用，2.6 需要引入另外composition-api的插件）。還沒寫過這種風格代碼的同學，可以先看引用的官方文檔的兩個鏈接，介紹的比較詳細。

下面我簡單介紹一下： 組合式 API 的靈感來自Hooks，也是目前流行的函數(shù)式編程的思想，便于邏輯復用、測試以及類型推導，編寫Vue業(yè)務代碼的時候會更加的靈活。但組合式 API 不等于函數(shù)式編程，組合式 API 的特點是基于Vue數(shù)據(jù)響應系統(tǒng)的，而函數(shù)式編程通常強調(diào)數(shù)據(jù)不可變的。 組合式API 包括：

  • 響應式相關(guān)（ref、reactive、computed、watch 等）
  • 生命周期鉤子（onMounted 和 onUnmounted 等）
  • provide、inject 等

一個簡單的組合式函數(shù)示例和使用：

import { computed } from 'vue'

export function useAdd(a,b) {
 return computed(() => a.value + b.value)
}
import { ref } from 'vue'
import { useAdd } from './add.js
const a = ref(1)
const b = ref(2)
const c = useAdd(a,b)

最佳實踐

像寫工具函數(shù)一樣，組合式函數(shù)也要設(shè)計好函數(shù)的接口，設(shè)計函數(shù)入?yún)⒌念愋鸵约澳J值和返回值是什么樣，以及后期的可擴展性。

1. options對象化

編寫組合式函數(shù)時如果傳入一些配置參數(shù)，可以把配置參數(shù)設(shè)計為 options 對象，好處就是不需要記住參數(shù)的位置，以及方便后期的擴展，可通過 TS 類型提示。如 Lodash 的防抖節(jié)流函數(shù)，配置項也是放在 options 對象里的。 函數(shù)內(nèi)部實現(xiàn)通過解構(gòu)獲取 options 的配置項，可以賦值默認值

export function useTitle(newTitle = null, options = {}) {
  const {
    document = defaultDocument,
    observe = false,
    titleTemplate = '%s',
  } = options
  // ...
}

2. 動態(tài)返回

通過 options 的配置項，可以動態(tài)返回不同的值

export default useNow(options) {
  const { controls = false } = options;

  // ...

  if (!controls) {
    return value;
  } else {
     return { value, controlAction1, controlAction2 };
  }
}

如：useNow vueuse.org/core/useNow…

import { useNow } from '@vueuse/core'

const now = useNow()

// 返回控制暫停/恢復的函數(shù)
const { now, pause, resume } = useNow({ controls: true })

3. 靈活地使用ref

入?yún)⒃谑褂玫倪^程中可能是普通類型或 ref 類型：

type MaybeRef<T> = Ref<T> | T

如果函數(shù)內(nèi)部期待入?yún)⑹瞧胀愋停鞘褂谜呖赡軅魅腠憫降?Ref 類型，可以使用 unref 函數(shù)獲取值，兼容 ref類型：

import { unref } from 'vue'

function useFeature(maybeRef) {
  const value = unref(maybeRef)
  //...
}

unref 的實現(xiàn)：

function unref <T> (r:Ref<T>|T): T) {
  return isRef(r) ? r.value : r
}

如果函數(shù)內(nèi)部入?yún)⑹?ref 類型的，可以再使用 ref 函數(shù)包裹，該函數(shù)如果傳入一個ref類型的參數(shù)會原樣返回。

import { ref, watch } from 'vue'
export function useTitle(newTitle) {
  const title = ref(newTitle || document.title)
  watch(title, (t) => {
    if (t != null) document.title = t}, 
        { immediate: true }
  )
  return title
}

4. 異步變同步

通過響應式數(shù)據(jù)的連接，不必使用await，在等待異步請求返回后將數(shù)據(jù)進行更新。如：

const { res } = useFetch('https://xxx.com/').json()
const data = computed(() => res.value?.data)
import { shallowRef } from 'vue'

export function useFetch<>(url) {
    const data = shallowRef(null)
    const error = shallowRef(null)
    fetch(unref(url)).then(r => r.json())
    .then(r => data.value = r)
    .catch(e => error.value = e)

  return {
        data,
        error
    }
}

5. 簡單的狀態(tài)管理

由于響應性系統(tǒng)與組件層是解耦的，簡單的場景下我們可以使用 reactive 創(chuàng)建一個響應式對象，在多個組件實例間共享數(shù)據(jù)。

// store.js
import { reactive } from 'vue'

export const store = reactive({
  a: 0,
  b: 1
})

復雜場景則需要使用 pinia 進行狀態(tài)管理

參考資料

到此這篇關(guān)于vue composition-api 封裝組合式函數(shù)的操作方法的文章就介紹到這了,更多相關(guān)vue composition-api 內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

相關(guān)文章

最新評論