javascript - vuejs中的Array.prototype.splice和arr.splice有什么区别？

Question

代码:(vue2.0, vue-router)

<template>
 <a v-for="apiItem in allApis" href="#"></a>
</template>
<script>
  computed: mapGetters([
    'allApis'
  ]),
</script>

在 store/modules

const mutations {
  myMutation(state) {
    state.apis.splice(0, 1) // A
    //Array.prototype.splice.call(state.apis, 0, 1); //B
  }
}
const getter = {
  allApis: (state) => {
    return state.apis
  }
}
export default {
  state,
  getters,
  actions,
  mutations
}

A 行 将更改allApis 并更新 View

但是B行不会改变allApi并更新 View ；

Answer 1

是的，state.apis.splice(0, 1) 将起作用，因为 Vue 会拦截变异方法并发出事件，如您在 code 中所见.

const arrayProto = Array.prototype
export const arrayMethods = Object.create(arrayProto)
/**
 * Intercept mutating methods and emit events
 */
;[
  'push',
  'pop',
  'shift',
  'unshift',
  'splice',
  'sort',
  'reverse'
]
.forEach(function (method) {
  // cache original method
  const original = arrayProto[method]

正如您在源代码中看到的:arrayMethods 是原始的 Array 原型(prototype)方法，正在被覆盖以提供 vue 的 react 功能，因此使用 Array.prototype 会遗漏行为 vue 定义。

来自documentation :

Vue wraps an observed array’s mutation methods so they will also trigger view updates.