Observable, when used on an array, does work when mutating array methods have been overwritten

[purtuga]

Version

2.5.2

Reproduction link

https://jsbin.com/fekeduvaqo/edit?js,console,output

Steps to reproduce

1. Create an array instance
2. override the push() method by overriding the method directly on the array instance
3. Instantiate a Vue instance and provide array on input
4. Push values to the array - nothing is rendered.

What is expected?

That VueJS's reactive system detects mutations to the array

What is actually happening?

VueJS does not react to array mutations.

---

I ran into issue because I have a code base that already uses a similar pattern for observing data.

In looking at the source, the Array prototype is created using the Array.prototype and then simply applied to the instance by replacing __proto__. I think the solution would be to move that logic to protoAugment() and/or to copyAugment() by storing the "original method" before overriding it and then ensuring the original is called..

Another observation is that protoAugment does not take into consideration method override done on the instance of an Array... The custom __proto__ will never be reached in these cases. So even my suggested solution would not help in these cases.

/Paul

[yyx990803]

Sorry but this is usage that we will not support because there are just too many possible edge cases to consider if we were to make Vue compatible with arbitrary modifications to built-in types.

[purtuga]

Thank you for the quick response.
Although my example showed the manipulation of an array instance directly, that was only an example... A more proper one would be to actually subclass an Array, and in those cases- why would that not be supported?
The following works as expected in Chrome but vueJS will alter the prototype and break the subclassed array.

const A = class extends Array {
    constructor() {
        super();
    }
    
    push(...args) {
        console.log("push() called");
        return super.push(...args);
    }
}

Although I know VueJS alters my data structure slightly to enable reactivity, my expectation would be that it does not actually lose any of the functionality I might have on that data.

/Paul

[purtuga]

@yyx990803 Should I pursue discussion this somewhere else? forums?
I found this other thread regarding this same issue - https://forum.vuejs.org/t/es6-subclassing-of-embeded-types-not-working-inside-vues-data-option/15721

I certainly don't want to spend time opening up the discussion if you are not going to entertain pursuing a solution.

[yyx990803]

Probably should open a fresh feature request to support reactivity on subclassed Arrays.