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
}

line A 将更改 allApis 并更新视图

但是 line B 不会更改 allApi 和更新视图；

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 是原始数组原型方法，正在被覆盖以提供 vue 的反应功能，因此使用 Array.prototype 会错过 vue 定义的行为。

来自documentation：

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

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

what is the difference with Array.prototype.splice and arr.splice in vuejs?

javascript

vue.js

vuejs2