vue.js - Vue计算不起作用

Question

我使用 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

Answer 1

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

正如Vue 指南：深度反应性所描述的：

由于现代 JavaScript 的限制（以及 Object.observe 的废弃），Vue 无法检测到属性的添加或删除。由于 Vue 在实例初始化期间执行 getter/setter 转换过程，因此数据对象中必须存在一个属性，以便 Vue 转换它并使其具有响应性。

Vue 不允许动态地将新的根级响应属性添加到已创建的实例中。但是，可以使用 Vue.set(object, key, value) 方法向嵌套对象添加反应属性

还有一些与数组相关的注意事项，已在列表渲染中讨论过

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>