until封裝watch常用邏輯簡(jiǎn)化代碼寫法
引言
在之前的系列文章中我們介紹了vueuse對(duì)watch封裝的一系列方法，以便我們可以更高效的開發(fā)。有對(duì)回調(diào)進(jìn)行控制的watchWithFilter，有適用于當(dāng)watch的值為真值時(shí)觸發(fā)回調(diào)的whenever，還有只觸發(fā)一次的watchOnce和最多觸發(fā)一定次數(shù)的watchAtMost。但是我們最常用的場(chǎng)景可能是被觀察的變量在滿足某個(gè)具體條件時(shí)則觸發(fā)回調(diào)，今天要學(xué)習(xí)的until就是直到滿足某種條件時(shí)則觸發(fā)一次回調(diào)函數(shù)。讓我們通過(guò)示例代碼和源碼來(lái)研究一下吧~
1.示例
結(jié)合文檔的介紹，筆者寫了如下的demo代碼：
<script setup lang="ts">
import { until , invoke } from '@vueuse/core'
import {ref} from 'vue'
const source = ref(0)
invoke(async () => {
await until(source).toBe(4)
console.log('滿足條件了')
})
const clickedFn = () => {
source.value ++
}
</script>
<template>
<div>{{source}}</div>
<button @click="clickedFn">
點(diǎn)擊按鈕
</button>
</template>
如上代碼所示，規(guī)定了當(dāng)source的值為4的時(shí)候觸發(fā)執(zhí)行watch回調(diào)函數(shù)。這里使用到了invoke方法，我們之前接觸過(guò)，源碼如下
export function invoke<T>(fn: () => T): T {
return fn()
}
給定參數(shù)fn為一個(gè)函數(shù)，invoke返回函數(shù)的執(zhí)行結(jié)果。代碼運(yùn)行效果如下圖所示：
當(dāng)點(diǎn)擊次數(shù)達(dá)到4次時(shí)，打印了相應(yīng)的信息。
2.源碼
until代碼較多，先看兩張預(yù)覽圖，了解一下其大概實(shí)現(xiàn)：
通過(guò)以上兩張圖片我們看到until內(nèi)部定義了很多的用于判斷條件是否滿足的方法，最后返回的instance也是包含這些方法的對(duì)象。下面我們對(duì)這些方法逐個(gè)分析。
2.1 toMatch
function toMatch(
condition: (v: any) => boolean,
{ flush = 'sync', deep = false, timeout, throwOnTimeout }: UntilToMatchOptions = {},
): Promise<T> {
let stop: Function | null = null
const watcher = new Promise<T>((resolve) => {
stop = watch(
r,
(v) => {
if (condition(v) !== isNot) {
stop?.()
resolve(v)
}
},
{
flush,
deep,
immediate: true,
},
)
})
const promises = [watcher]
if (timeout != null) {
promises.push(
promiseTimeout(timeout, throwOnTimeout)
.then(() => unref(r))
.finally(() => stop?.()),
)
}
return Promise.race(promises)
}
在promise構(gòu)造函數(shù)的參數(shù)函數(shù)中調(diào)用watch API來(lái)監(jiān)聽(tīng)數(shù)據(jù)源r 。當(dāng)數(shù)據(jù)源r的新值代入到條件condition中，使得condition為true時(shí)則調(diào)用stop停止監(jiān)聽(tīng)數(shù)據(jù)源，并將promise狀態(tài)變?yōu)槌晒Α?/p>
promise放入promises數(shù)組中，如果用戶傳了timeout選項(xiàng)則promises放入調(diào)用promiseTimeout返回的promise實(shí)例。最后返回的是Promise.race的結(jié)果。看一下promiseTimeout的代碼：
export function promiseTimeout(
ms: number,
throwOnTimeout = false,
reason = 'Timeout',
): Promise<void> {
return new Promise((resolve, reject) => {
if (throwOnTimeout)
setTimeout(() => reject(reason), ms)
else
setTimeout(resolve, ms)
})
}
promiseTimeout返回了一個(gè)promise, 如果throwOnTimeout為true則過(guò)ms毫秒之后則將promise變?yōu)槭顟B(tài)，否則經(jīng)過(guò)ms毫秒后調(diào)用resolve,使promise變?yōu)槌晒顟B(tài)。
2.2 toBe
function toBe<P>(value: MaybeRef<P | T>, options?: UntilToMatchOptions) {
if (!isRef(value))
return toMatch(v => v === value, options)
const { flush = 'sync', deep = false, timeout, throwOnTimeout } = options ?? {}
let stop: Function | null = null
const watcher = new Promise<T>((resolve) => {
stop = watch(
[r, value],
([v1, v2]) => {
if (isNot !== (v1 === v2)) {
stop?.()
resolve(v1)
}
},
{
flush,
deep,
immediate: true,
},
)
})
// 和toMatch相同部分省略
}
toBe方法體大部分和toMatch相同，只是watch回調(diào)函數(shù)不同。這里對(duì)數(shù)據(jù)源r和toBe的參數(shù)value進(jìn)行監(jiān)聽(tīng)，當(dāng)r的值和value的值相同時(shí)，使promise狀態(tài)為成功。注意這里的watch使用的是偵聽(tīng)多個(gè)源的情況。
2.3 toBeTruthy、toBeNull、toBeUndefined、toBeNaN
function toBeTruthy(options?: UntilToMatchOptions) {
return toMatch(v => Boolean(v), options)
}
function toBeNull(options?: UntilToMatchOptions) {
return toBe<null>(null, options)
}
function toBeUndefined(options?: UntilToMatchOptions) {
return toBe<undefined>(undefined, options)
}
function toBeNaN(options?: UntilToMatchOptions) {
return toMatch(Number.isNaN, options)
}
toBeTruthy和toBeNaN是對(duì)toMatch的封裝，toBeNull和toBeUndefined是對(duì)toBe的封裝。toBeTruthy判斷是否為真值，方法是使用Boolean構(gòu)造函數(shù)后判斷參數(shù)v是否為真值。
toBeNaN判斷是否為NAN， 使用的是Number的isNaN作為判斷條件，注意toBeNaN的實(shí)現(xiàn)不能使用toBe, 因?yàn)閠obe在做比較的時(shí)候使用的是 ‘===’這對(duì)于NaN是不成立的：
toBeNull用于判斷是否為null，toBeUndefined用于判斷是否為undefined。
2.4 toContains
function toContains(
value: any,
options?: UntilToMatchOptions,
) {
return toMatch((v) => {
const array = Array.from(v as any)
return array.includes(value) || array.includes(unref(value))
}, options)
}
判斷數(shù)據(jù)源v中是否有value，Array.from把v轉(zhuǎn)換為數(shù)組，然后使用includes方法判斷array中是否包含value。
2.5 changed和changedTimes
function changed(options?: UntilToMatchOptions) {
return changedTimes(1, options)
}
function changedTimes(n = 1, options?: UntilToMatchOptions) {
let count = -1 // skip the immediate check
return toMatch(() => {
count += 1
return count >= n
}, options)
}
changed用于判斷是否改變，通過(guò)調(diào)用changedTimes和固定第一參數(shù)n為1實(shí)現(xiàn)的。changedTimes的第一個(gè)參數(shù)為監(jiān)聽(tīng)的數(shù)據(jù)源改變的次數(shù)，也是通過(guò)調(diào)用toMatch實(shí)現(xiàn)的，傳給toMatch的條件是一個(gè)函數(shù)，此函數(shù)會(huì)在數(shù)據(jù)源改變時(shí)調(diào)用。每調(diào)用一次外層作用域定義的count就會(huì)累加一次 ，注意外層作用域count變量聲明為-1， 因?yàn)闀r(shí)立即監(jiān)聽(tīng)的。
至此，until源碼內(nèi)定義的函數(shù)全部分析完畢，下圖總結(jié)了這些函數(shù)之前的調(diào)用關(guān)系：
源碼中最后的返回值也值得我們說(shuō)一說(shuō)。
2.6 until返回值——instance
until的返回值分為兩種情況：當(dāng)監(jiān)聽(tīng)的源數(shù)據(jù)是數(shù)組時(shí)和不是數(shù)組時(shí)，代碼如下圖所示：
if (Array.isArray(unref(r))) {
const instance: UntilArrayInstance<T> = {
toMatch,
toContains,
changed,
changedTimes,
get not() {
isNot = !isNot
return this
},
}
return instance
}
else {
const instance: UntilValueInstance<T, boolean> = {
toMatch,
toBe,
toBeTruthy: toBeTruthy as any,
toBeNull: toBeNull as any,
toBeNaN,
toBeUndefined: toBeUndefined as any,
changed,
changedTimes,
get not() {
isNot = !isNot
return this
},
}
return instance
}
我們看到數(shù)據(jù)源時(shí)數(shù)組時(shí)返回的方法中沒(méi)有toBeTruthy，toBeNull，toBeNaN，toBeUndefined這些用于判斷基本類型值的方法。另外需要注意的是返回的instance里面有一個(gè)get not(){// ...}這是使用getters, 用于獲取特定的屬性（這里是not）。在getter里面對(duì)isNot取反，isNot返回值為this也就是instance本身，所以讀取完not屬性后可以鏈?zhǔn)秸{(diào)用其他方法，如下所示：
await until(ref).not.toBeNull() await until(ref).not.toBeTruthy()
3.總結(jié)
until方法用于對(duì)數(shù)據(jù)監(jiān)聽(tīng)，返回具有多個(gè)條件判斷函數(shù)的對(duì)象，使用者可以將條件做為這些函數(shù)的參數(shù)，當(dāng)監(jiān)聽(tīng)的數(shù)據(jù)滿足條件則停止監(jiān)聽(tīng)，其本質(zhì)是對(duì)watch的回調(diào)進(jìn)行封裝，并結(jié)合promise.race的一個(gè)異步方法。本文的demo代碼已經(jīng)上傳至github, 歡迎您clone并親自體驗(yàn)until的使用。
以上就是until封裝watch常用邏輯簡(jiǎn)化代碼寫法的詳細(xì)內(nèi)容，更多關(guān)于until封裝watch邏輯的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
Vue實(shí)現(xiàn)根據(jù)hash高亮選項(xiàng)卡
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)根據(jù)hash高亮選項(xiàng)卡，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-05-05
vue 獲取url參數(shù)、get參數(shù)返回?cái)?shù)組的操作
這篇文章主要介紹了vue 獲取url參數(shù)、get參數(shù)返回?cái)?shù)組的操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-11-11
使用ElementUI el-upload實(shí)現(xiàn)一次性上傳多個(gè)文件
在日常的前端開發(fā)中,文件上傳是一個(gè)非常常見(jiàn)的需求,尤其是在用戶需要一次性上傳多個(gè)文件的場(chǎng)景下,ElementUI作為一款非常優(yōu)秀的Vue.js 2.0組件庫(kù),為我們提供了豐富的UI組件,本文介紹了如何使用ElementUI el-upload實(shí)現(xiàn)一次性上傳多個(gè)文件,需要的朋友可以參考下2024-08-08
這篇文章主要介紹了基于Vue的延遲加載插件vue-view-lazy，可以使圖片或者其他資源進(jìn)入可視區(qū)域后加載，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-05-05
Vue實(shí)現(xiàn)JSON字符串格式化編輯器組件功能
這篇文章主要介紹了Vue實(shí)現(xiàn)JSON字符串格式化編輯器組件,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2024-01-01
vue3中reactive和ref的實(shí)現(xiàn)與區(qū)別詳解
reactive和ref都是vue3實(shí)現(xiàn)響應(yīng)式系統(tǒng)的api,他們是如何實(shí)現(xiàn)響應(yīng)式的呢,reactive和ref又有什么區(qū)別呢,下面小編就來(lái)和大家詳細(xì)講講,希望對(duì)大家有所幫助2023-10-10
vue2 element 彈出框拖拽會(huì)出現(xiàn)一層陰影問(wèn)題解決方法
這篇文章主要介紹了vue2 element 彈出框拖拽會(huì)出現(xiàn)一層陰影問(wèn)題解決方法,因增加 draggable 屬性導(dǎo)致我彈窗表單清空文本框時(shí),從右向左選中字體會(huì)出現(xiàn)拖拽陰影效果,本文給大家介紹vue2 element 彈出框拖拽會(huì)出現(xiàn)一層陰影問(wèn)題解決方法,感興趣的朋友一起看看吧2024-01-01
vue項(xiàng)目在IE瀏覽器下運(yùn)行空白問(wèn)題及解決
IE11瀏覽器無(wú)法解析ES6語(yǔ)法導(dǎo)致Vue項(xiàng)目在IE11下顯示空白,解決方法包括安裝babel-polyfill,并在項(xiàng)目的main.js文件中引入babel-polyfill,此外,js-base64版本3及以上不兼容IE11,解決辦法是使用版本3以下的js-base64,這些措施可以幫助兼容IE11,確保項(xiàng)目正常運(yùn)行2024-09-09
Fragment 是 Vue 3 中的新特性,允許一個(gè)組件模板返回多個(gè)根節(jié)點(diǎn),與傳統(tǒng)方式不同,不再需要一個(gè)額外的 DOM 元素來(lái)包裹所有內(nèi)容,本文將詳細(xì)介紹 Fragment 的概念、使用場(chǎng)景、優(yōu)點(diǎn)以及可能遇到的問(wèn)題,需要的朋友可以參考下2024-08-08
本文主要介紹了vue3在項(xiàng)目中的邏輯抽離和字段顯示，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-08-08