Subscribe on changes!

Fast whole array iterate

avatar
Aug 18th 2021

What problem does this feature solve?

Right now arrays are iterate item by item, each item is accessed via key/index and run createGetter/get function for each item. It's slow when you iterate whole array.

What does the proposed API look like?

Extra function for internal and programmers use call getArrayItems which return copy of reactive array. Of course each item of array is still tracked

function getArrayItems(target) {
    const result = [];
    var ro = isReadonly(target);
    const raw = toRaw(target);
    const length = raw.length;
    result.length = length;
    for (var i=0;i<length;i  ) {
        let res = raw[i];
        if (!ro) {
            track(raw, "get" /* GET */, ""+i);
        }
        if (isRef(res)) {
           result[i] = res;
           continue;
        }
        if (shared.isObject(res)) {

            result[i] =  ro ? readonly(res) : reactive(res);
            continue;
        }
        result[i] = res;
    }
    return result;

}

in test, for 100 elements, array of objects, iteration with this copy of array up to 10x faster than over original array

avatar
Aug 18th 2021

See #4318

avatar
Aug 18th 2021

Duplicate of #4318