性能问题

[wardenfeng]

Vue version

所有版本

Link to minimal reproduction

https://feng3d.com/reactivity/#复杂情况取值

Steps to reproduce

示例： https://feng3d.com/reactivity/#复杂情况取值

运行库	性能(ms)	速度(x)
@feng3d/reactivity	2.8	286
@vue/reactivity	801	1

测试代码

复杂情况取值(ref, computed, 10000);

export function 复杂情况取值(ref: <T>(value?: T) => { value: T }, computed: <T>(func: (oldValue?: T) => T) => { readonly value: T }, count: number)
{
    const result = { time: undefined, values: [] };

    const b = ref(2);

    function 递归(depth = 10)
    {
        if (depth <= 0) return computed(() =>
        {
            return b.value
        }).value;

        return computed(() =>
        {
            return 递归(depth - 1) + 递归(depth - 2);
        }).value;
    }

    const cb = computed(() =>
    {
        return 递归(16);
    });

    b.value++;
    cb.value;

    const start = performance.now();
    for (let i = 0; i < count; i++)
    {
        ref(1).value++; // 添加此行代码将会导致 @vue/reactivity 版本的性能下降，而 @feng3d/reactivity 版本的性能保持不变

        cb.value;
    }
    result.time = performance.now() - start;

    result.values.push(cb.value);

    return result;
}

分析

@feng3d/reactivity自下而上的使用脏标记进行维护状态，当发生变化时只会冒泡一次到父节点，全局有变化时（ref(1).value++ 标记变化）并不会触发重新计算。
@vue/reactivity自上而下的使用版本号进行维护状态，当全局有变化时（ref(1).value++ 标记变化）每次取值时都会遍历整个树的子节点比对版本号判断是否需要重新计算。

What is expected?

。。。

What is actually happening?

。。。

System Info

Any additional comments?

No response

[johnsoncodehk]

Close due to resolved via #12349