Objects with an array as a prototype are not reactive

Vue.js version

2.0.3

Reproduction Link

https://jsfiddle.net/yMv7y/1860/

Steps to reproduce

1. Press the buttons.

What is Expected?

Both counters increment.

What is actually happening?

Very simply, Vue reactivity works for objects that are [] but not objects that have [] as a prototype. This is happening in Vue 2.0.

FancyArray.prototype = [];

function FancyArray() { }

new Vue({
  data: {
    normalArray: [],
    objectWithArrayPrototype: new FancyArray()
  },
  watch: {
    normalArray: function(a) {
      console.log("normal array triggered", a);
    },
    objectWithArrayPrototype: function(a) { // THIS WATCH IS NEVER TRIGGERED
      console.log("object with array prototype triggered", a)
    }
  },
  created: function() {
    this.normalArray.push("hey!"); // -> prints "normal array triggered, hey!"
    this.objectWithArrayPrototype.push("hello again!"); // -> prints nothing
  }
}).$mount('#app');

While this problem is easily circumvented by assigning a property in the object to be an array, it would be nice to be able to use objects that have an array as a prototype.

[yyx990803]

The objects you are creating are in fact array-like objects and not real arrays. Vue only supports native Arrays or arrays that are real, proper sub-class of Array (only available in ES2015+), which can pass the Array.isArray check. This is an assumption made in multiple locations of the entire framework, adapting to it involves a lot of complexity for little gain - and is unlikely to be supported.

Also - custom array-like objects likely have far worse performance than real arrays, and I personally recommend against that pattern.

[ClickerMonkey]

I’m working on adding an extension to a library of mine and I ran into this problem as well. My first guess was to also just override Array.isArray to use instanceof but there were still errors (VueJS replaces the extended Array with a plain array - loosing your original object). I ended up doing something similar to what VueJS already does with arrays - decorate the array functions with new functions that call this.__ob__.observeArray when needed as well as this.__ob__.notify() (if this.__ob__ was defined). My collections trigger events, so this was my solution. It could similarly be applied to anyone else’s extended Array.

var $trigger = Rekord.Collection.prototype.trigger
Rekord.Collection.prototype.trigger = function (ev, args) {
  const result = $trigger.apply(this, arguments)
  const ob = this.__ob__
  if (ob) {
    switch (ev) {
      case 'add':
        ob.observeArray([args[0]])
        break
      case 'adds':
        ob.observeArray(args[0])
        break
      case 'reset':
        ob.observeArray(this.slice())
        break
    }
    ob.dep.notify()
  }
  return result
}