Question

我正在使用我的课程 MyArray 扩展内置的 Array 当我尝试将MyArr存储到Vuex时，我松开了实例，并得到bultIn Array

怎么了？

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?
  }
}

Answer 1

要使阵列具有响应性，Vue需要使用自己的版本修补各种方法，例如push和pop。触发反应系统时，它们的工作原理与原件相同。

为快速完成此修补程序，Vue将Array的原型切换到其自己的扩展版本。参见：

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

具体取决于浏览器支持。

instanceof运算符根据原型链确定其值。 Vue进行切换后，您的阵列原型链中将不再包含MyArray。

Vue突变更改实例（从MyArray到Array）

1 个答案: