Vue mutation change instance (MyArray to Array)

Question

I'm extending builtIn Array with my class MyArray When i try to store MyArr to Vuex, I loose instance, and get bultIn Array

What's wrong?

class MyArray extends Array{/*some methods*/}

const state = {
  arr: new ModuleOperationArray(),
}

const mutations = {
  setArr: (state) => {
   console.log(state.arr instanceof MyArray); //false -- WHY?

   let arr = new MyArray();
   console.log(arr instanceof MyArray); //true -- expectedly

   state.arr = arr;
   console.log(state.arr instanceof MyArray); //false -- WHY?
  }
}

skirtle · Accepted Answer · 2019-12-12 06:16:54Z

2

To make arrays reactive Vue needs to patch various methods such as push and pop with its own versions. These work just the same as the originals while triggering the reactivity system.

To achieve this patching quickly Vue switches out the prototype of the Array to its own extended version. See:

https://github.com/vuejs/vue/blob/9fbd416635eb3d7b32cd73b7c29f8377003c4dc8/src/core/observer/index.js#L49

The specifics vary depending on browser support.

The instanceof operator determines its value based on the prototype chain. Once Vue has made the switch your array will no longer have MyArray in its prototype chain.

answered Dec 12, 2019 at 6:16

skirtle

29.3k4 gold badges49 silver badges63 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user1272025 Over a year ago

Question was about why Vue switch array. Not about reactivity, pop and push

skirtle Over a year ago

@user1272025 My answer explains why Vue switches the array.

Collectives™ on Stack Overflow

Vue mutation change instance (MyArray to Array)

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related