快捷導(dǎo)航

淺析Vue如何巧用computed計(jì)算屬性

更新時(shí)間：2023年06月09日 17:09:30 作者：田八

在日常使用Vue開發(fā)項(xiàng)目的時(shí)候，計(jì)算屬性computed是一個(gè)非常常用的特性，本文就來分享一些使用Vue的computed計(jì)算屬性時(shí)的一些小技巧，希望能夠幫助到大家

在日常使用Vue開發(fā)項(xiàng)目的時(shí)候，計(jì)算屬性computed是一個(gè)非常常用的特性，它的主要作用是對數(shù)據(jù)進(jìn)行處理，然后返回新的數(shù)據(jù)，這樣就不需要在模板中寫過多的邏輯代碼，從而使得模板更加簡潔，可讀性更強(qiáng)。

今天我就來分享一些我在使用Vue的computed計(jì)算屬性時(shí)的一些小技巧，希望能夠幫助到大家。

1. 計(jì)算屬性的基本用法

計(jì)算屬性的用法很簡單，一同分為四個(gè)部分：getter、setter、onTrack、onTrigger。

get：計(jì)算屬性的getter函數(shù)，當(dāng)計(jì)算屬性的依賴發(fā)生改變時(shí)，會執(zhí)行該函數(shù)，返回計(jì)算屬性的值。
set：計(jì)算屬性的setter函數(shù)，當(dāng)直接修改計(jì)算屬性的值時(shí)，會執(zhí)行該函數(shù)。
onTrack：計(jì)算屬性的依賴被追蹤時(shí)，會執(zhí)行該函數(shù)。
onTrigger：當(dāng)計(jì)算屬性的依賴項(xiàng)發(fā)生改變時(shí)，會執(zhí)行該函數(shù)。

代碼如下：

import { computed } from 'vue'
const count = ref(0)
const plusOne = computed({
    get() {
        return count.value + 1
    },
    set(val) {
        count.value = val - 1
    },
    onTrack(e) {
        debugger;
    },
    onTrigger(e) {
        debugger;
    }
});
console.log(plusOne.value) // 1
console.log(count.value) // 0
plusOne.value = 1
console.log(plusOne.value) // 2
console.log(count.value) // 1

這里我們最常用的就是get，可以簡寫如下：

const plusOne = computed(() => count.value + 1)

onTrack和onTrigger一般用于調(diào)試，當(dāng)我們想要知道計(jì)算屬性的依賴項(xiàng)發(fā)生了什么變化時(shí)，可以在這兩個(gè)函數(shù)中打斷點(diǎn)調(diào)試。

具體可參考官網(wǎng)：

計(jì)算屬性
計(jì)算屬性調(diào)試

在官網(wǎng)上給出了一些計(jì)算屬性的使用場景，以及一些計(jì)算屬性的注意事項(xiàng)，這里如果卷一些的話，可以看一下，下面我就來分享一些我在使用計(jì)算屬性時(shí)的一些小技巧。

2. 計(jì)算屬性的小技巧

2.1. 監(jiān)聽多個(gè)數(shù)據(jù)的變化

// 多個(gè)數(shù)據(jù)想要同時(shí)監(jiān)聽
const a = ref(1)
const b = ref(2)
const c = ref(3)
// 將其合并為一個(gè)計(jì)算屬性
const multiply = computed(() => {
    return {
        a: a.value,
        b: b.value,
        c: c.value,
    }
})
// 監(jiān)聽計(jì)算屬性的變化
watch(
    () => multiply.value,
    (val) => {
        console.log(val)
    }
)
// 修改數(shù)據(jù)
a.value = 2 // { a: 2, b: 2, c: 3 }
b.value = 3 // { a: 2, b: 3, c: 3 }
c.value = 4 // { a: 2, b: 3, c: 4 }

2.2. 監(jiān)聽對象的部分屬性

const obj1 = ref({
    a: 1,
    b: 2,
    c: 3,
})
const obj2 = ref({
    a: 1,
    b: 2,
    c: 3,
})
// 監(jiān)聽對象的部分屬性
const combine = computed(() => {
    return {
        a: obj1.value.a,
        b: obj2.value.b,
    }
})
// 監(jiān)聽計(jì)算屬性的變化
watch(
    () => combine.value,
    (val) => {
        console.log(val)
    }
)
// 修改數(shù)據(jù)
obj1.value.a = 2 // { a: 2, b: 2 }
obj1.value.b = 3 // 無輸出
obj1.value.c = 4 // 無輸出
obj2.value.a = 2 // 無輸出
obj2.value.b = 3 // { a: 2, b: 3 }
obj2.value.c = 4 // 無輸出

可以多個(gè)對象結(jié)合監(jiān)聽部分字段的變化，這樣就不需要手動判斷具體修改的是哪個(gè)對象的哪個(gè)字段了。

2.3. 監(jiān)聽數(shù)組的部分元素

const arr1 = ref([1, 2, 3])
const arr2 = ref([1, 2, 3])
// 監(jiān)聽數(shù)組的部分元素
const combine = computed(() => {
    return [
        arr1.value[0],
        arr2.value[1],
    ]
})
// 監(jiān)聽計(jì)算屬性的變化
watch(
    () => combine.value,
    (val) => {
        console.log(val)
    }
)
// 修改數(shù)據(jù)
arr1.value[0] = 2 // [2, 2]
arr1.value[1] = 3 // 無輸出
arr1.value[2] = 4 // 無輸出
arr2.value[0] = 2 // 無輸出
arr2.value[1] = 3 // [2, 3]
arr2.value[2] = 4 // 無輸出

對數(shù)組也可以像對象一樣監(jiān)聽部分元素的變化。

2.4. 緩存與更新

// 這是一個(gè)大對象，我不需要它是響應(yīng)式的，但是我需要它能響應(yīng)式的更新
const list = new Array(100).fill(0).map((item, index) => ({key: index, value: item}))
// 強(qiáng)制刷新
const forceFlush = ref(0);
const cache = computed(() => {
    forceFlush.value; // 這里使用一下，什么都不干就行
    // 這里會對大對象進(jìn)行一系列的計(jì)算，然后給結(jié)果緩存下來方便使用
    const cache = list.reduce((prev, curr) => {
        prev[curr.key] = curr;
        return prev
    }, {})
    // 這里就方便直接通過 key 獲取
    return (key) => {
        return cache[key] || {}
    }
})
console.log(cache.value(0).value); // 0
// 這里是不會更新的
list[0] = {key: 0, value: 1};
console.log(cache.value(0).value); // 0
// 給一個(gè)刷新信號就可以了
forceFlush.value++;
console.log(cache.value(0).value); // 1

2.5. 雙向綁定

const props = defineProps({
    modelValue: {
        type: String,
        default: ""
    }
});
const emit = defineEmits(["update:modelValue"]);
const value = computed({
    get() {
        return props.modelValue;
    },
    set(val) {
        emit("update:modelValue", val);
    }
});
value.value = 'hello';

雙向綁定需要配合defineEmits(["update:modelValue"])來使用，每次調(diào)用emit("update:modelValue", val)很麻煩；

現(xiàn)在使用computed就可以實(shí)現(xiàn)value.value = value這種方式直接修改，很符合直觀也滿足了單向數(shù)據(jù)流的原則；