您好,登錄后才能下訂單哦!
這篇文章主要介紹“vue3.0中的computed怎么寫”的相關(guān)知識(shí),小編通過實(shí)際案例向大家展示操作過程,操作方法簡單快捷,實(shí)用性強(qiáng),希望這篇“vue3.0中的computed怎么寫”文章能幫助大家解決問題。
用computed計(jì)算屬性之前別忘了引入
使用完畢別忘了導(dǎo)出
computed里面還有兩個(gè)方法:get和set
get方法:
結(jié)果:
get方法是讀取數(shù)據(jù)時(shí)候調(diào)用的,監(jiān)測(cè)到數(shù)據(jù)變化以后就自動(dòng)執(zhí)行:
結(jié)果:
點(diǎn)擊以后:
說明get在程序運(yùn)行時(shí)自動(dòng)調(diào)用,后面監(jiān)測(cè)到數(shù)據(jù)變化就再次調(diào)用
我們改一下代碼:
點(diǎn)擊前結(jié)果:
點(diǎn)擊后結(jié)果:
所以我們能得出: 點(diǎn)擊button以后,執(zhí)行到plusOne.value = 2
時(shí)候,相當(dāng)于調(diào)用了:
// 其中參數(shù)val就是修改的值2 set: val => { console.log('executing function set') return count.value = val - 1 }
所以現(xiàn)在count的值為2-1=1,這樣的值改變引起set方法的注意,被監(jiān)測(cè)到了,所以繼續(xù)執(zhí)行:
get: () => { console.log('executing function get') return count.value + 1 }
這樣count的值變成1+1 = 2
所以最后顯示2
當(dāng)我們不想在template的html元素上寫很長的js邏輯時(shí),我們就會(huì)想使用計(jì)算屬性computed
computed
傳入一個(gè) getter 函數(shù),返回一個(gè)默認(rèn)不可手動(dòng)修改的 ref 對(duì)象。
const count = ref(1) const plusOne = computed(() => count.value + 1) console.log(plusOne.value) // 2 plusOne.value++ // 錯(cuò)誤! // 或者傳入一個(gè)擁有 get 和 set 函數(shù)的對(duì)象,創(chuàng)建一個(gè)可手動(dòng)修改的計(jì)算狀態(tài)。 const count = ref(1) const plusOne = computed({ get: () => count.value + 1, set: (val) => { count.value = val - 1 }, }) plusOne.value = 1 console.log(count.value) // 0 // 更多文檔: https://vue3js.cn/vue-composition-api/#computed
正文
計(jì)算屬性,可能會(huì)依賴其他 reactive 的值,同時(shí)會(huì)延遲和緩存計(jì)算值
export function computed<T>( getterOrOptions: ComputedGetter<T> | WritableComputedOptions<T> ) { let getter: ComputedGetter<T> let setter: ComputedSetter<T> // 如果傳入是 function 說明是只讀 computed if (isFunction(getterOrOptions)) { getter = getterOrOptions setter = __DEV__ ? () => { console.warn('Write operation failed: computed value is readonly') } : NOOP } else { // 不是方法說明是自定義的 getter setter getter = getterOrOptions.get setter = getterOrOptions.set } let dirty = true let value: T let computed: ComputedRef<T> // 創(chuàng)建 effect, 我們?cè)诳?nbsp;effect 源碼時(shí)知道了傳入 lazy 代表不會(huì)立即執(zhí)行,computed 表明 computed 上游依賴改變的時(shí)候,會(huì)優(yōu)先 trigger runner effect, scheduler 表示 effect trigger 的時(shí)候會(huì)調(diào)用 scheduler 而不是直接調(diào)用 effect const runner = effect(getter, { lazy: true, // mark effect as computed so that it gets priority during trigger computed: true, scheduler: () => { // 在觸發(fā)更新時(shí)把dirty置為true, 不會(huì)立即更新 if (!dirty) { dirty = true trigger(computed, TriggerOpTypes.SET, 'value') } } }) // 構(gòu)造一個(gè) computed 返回 computed = { __v_isRef: true, // expose effect so computed can be stopped effect: runner, get value() { // dirty為ture, get操作時(shí),執(zhí)行effect獲取最新值 // if (dirty) { value = runner() dirty = false } // dirty為false, 表示值未更新,直接返回 track(computed, TrackOpTypes.GET, 'value') return value }, set value(newValue: T) { setter(newValue) } } as any return computed }
如果存在計(jì)算屬性依賴其他異步或者props傳進(jìn)的屬性,再通過state.xxx獲取最新屬性值進(jìn)行判斷,那么就必須寫在getter回調(diào)里,例如:
const haveFile = computed(() => state.jobInfo.fileName ? state.jobInfo.fileName.includes('http') : false); const permitProduct = computed(() => !state.isPower || state.isDqcFinish); const permitDownl = computed(() => !state.isPower || !haveFile.value);
我們可以看到permitProduct 和permitDownl 都依賴state.isPower這個(gè)變量值,且該變量寫在watch監(jiān)聽中,隨時(shí)可能改變,因此,我們console.log寫在permitDownl 變量的下一行,可能看不到最新結(jié)果的打?。?/p>
const haveFile = computed(() => state.jobInfo.fileName ? state.jobInfo.fileName.includes('http') : false); const permitProduct = computed(() => !state.isPower || state.isDqcFinish); const permitDownl = computed(() => !state.isPower || !haveFile.value); console.log('state.isPower ===>', state.isPower);
正確的做法,應(yīng)該是寫在getter回調(diào)里:
const haveFile = computed(() => state.jobInfo.fileName ? state.jobInfo.fileName.includes('http') : false); const permitProduct = computed(() => !state.isPower || state.isDqcFinish); const permitDownl = computed(() => { console.log('state.isPower ===>', state.isPower); // 此時(shí)可以獲得最新值 return !state.isPower || !haveFile.value; });
并且要注意的一點(diǎn)是,如果當(dāng)前計(jì)算屬性依賴其他計(jì)算屬性,例如上面所寫的permitDownl 依賴于 haveFile,這時(shí),寫法就必須是haveFile.value而非haveFile
計(jì)算屬性獲取值在非template區(qū)域,而是在js區(qū)域內(nèi),則必須使用propname.value去獲取值!
關(guān)于“vue3.0中的computed怎么寫”的內(nèi)容就介紹到這里了,感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí),可以關(guān)注億速云行業(yè)資訊頻道,小編每天都會(huì)為大家更新不同的知識(shí)點(diǎn)。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。