Vue计算不起作用[重复]答案

【问题标题】：Vue computed does not work [duplicate]Vue计算不起作用[重复]
【发布时间】：2019-01-23 18:45:26
【问题描述】：

我使用 Vue Devtools。例如，当我在控制台 wm.numbers[0]=6 上以这种方式更改数字并刷新 Vue Devtools 并查看时，数字已更改但 evenNumbers 未更改。有什么问题？

Javascript 代码：

var vm = new Vue({
  el:'#app',
  data: {
    numbers: [ 1, 2, 3, 4, 5 ]
  },
  computed: {
    evenNumbers: function () {
      return this.numbers.filter(function (number) {
        return number % 2 === 0
      })
    }
  }
})

HTML代码：

<div id="app">
        <li v-for="n in evenNumbers">{{ n }}</li>
</div>

输出：

2
4

【问题讨论】：

这是 Vue 标签中许多已经回答的问题的重复，这些问题与 Vue 数组更新有关。如果有人遇到更好的目标复制我，我会更新。
因为我的英语不好，我听不懂。但我现在明白了，因为你的解释。谢谢。

标签： vue.js vue-directives

【解决方案1】：

使用Vue.set 或vm.$set，或将整个数组替换为新数组。

正如Vue Guide: Reactivity In Depth 所述：

由于现代 JavaScript 的局限性（以及放弃 Object.observe)，Vue 无法检测到属性的添加或删除。由于 Vue 在执行 getter/setter 转换过程实例初始化，属性必须存在于数据对象中以便 Vue 对其进行转换并使其具有反应性。

Vue 不允许动态添加新的根级响应式属性到已经创建的实例。 但是，可以使用 Vue.set(object, 键、值）方法

还有一些与数组相关的注意事项，已在List Rendering

中讨论过

var vm = new Vue({
  el:'#app',
  data: {
    numbers: [ 1, 2, 3, 4, 5 ]
  },
  computed: {
    evenNumbers: function () {
      return this.numbers.filter(function (number) {
        return number % 2 === 0
      })
    }
  },
  methods: {
    changeData1: function () {
      this.$set(this.numbers, 0, 6)
    },
    changeData2: function () {
      this.numbers = [ 16, 2, 3, 4, 5 ]
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>

<div id="app">
<button @click="changeData1()">Update element with Vue.set or vm.$set</button>
<button @click="changeData2()">replace the whole array</button>
        <li v-for="n in evenNumbers">{{ n }}</li>
</div>

【讨论】：