Vue 计算不起作用

Question

我使用 Vue Devtools.For 示例，当我在控制台上以这种方式更改数字时 wm.numbers[0]=6 我刷新 Vue Devtools 并查看，数字已更改但 evenNumbers 没有 changed.What 是问题？

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.set或vm.$set，或用新数组替换整个数组。

如Vue Guide: Reactivity In Depth所述：

Due to the limitations of modern JavaScript (and the abandonment of Object.observe), Vue cannot detect property addition or deletion. Since Vue performs the getter/setter conversion process during instance initialization, a property must be present in the data object in order for Vue to convert it and make it reactive.

Vue does not allow dynamically adding new root-level reactive properties to an already created instance. However, it’s possible to add reactive properties to a nested object using the Vue.set(object, key, value) method

还有一些数组相关注意事项，已在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>

Vue 计算不起作用

Vue computed does not work

vue.js

vue-directives