浅析Vue如何巧用computed计算属性

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

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

// 多个数据想要同时监听
const a = ref(1)
const b = ref(2)
const c = ref(3)
// 将其合并为一个计算属性
const multiply = computed(() => {
    return {
        a: a.value,
        b: b.value,
        c: c.value,
    }
})
// 监听计算属性的变化
watch(
    () => multiply.value,
    (val) => {
        console.log(val)
    }
)
// 修改数据
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 }

const obj1 = ref({
    a: 1,
    b: 2,
    c: 3,
})
const obj2 = ref({
    a: 1,
    b: 2,
    c: 3,
})
// 监听对象的部分属性
const combine = computed(() => {
    return {
        a: obj1.value.a,
        b: obj2.value.b,
    }
})
// 监听计算属性的变化
watch(
    () => combine.value,
    (val) => {
        console.log(val)
    }
)
// 修改数据
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 // 无输出

const arr1 = ref([1, 2, 3])
const arr2 = ref([1, 2, 3])
// 监听数组的部分元素
const combine = computed(() => {
    return [
        arr1.value[0],
        arr2.value[1],
    ]
})
// 监听计算属性的变化
watch(
    () => combine.value,
    (val) => {
        console.log(val)
    }
)
// 修改数据
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 // 无输出

// 这是一个大对象，我不需要它是响应式的，但是我需要它能响应式的更新
const list = new Array(100).fill(0).map((item, index) => ({key: index, value: item}))
// 强制刷新
const forceFlush = ref(0);
const cache = computed(() => {
    forceFlush.value; // 这里使用一下，什么都不干就行
    // 这里会对大对象进行一系列的计算，然后给结果缓存下来方便使用
    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
// 给一个刷新信号就可以了
forceFlush.value++;
console.log(cache.value(0).value); // 1

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';