1

Vue 文档指出：

Vue 无法检测到数组的以下更改：

  1. 当您直接使用索引设置项目时，例如vm.items[indexOfItem] = newValue
  2. 当您修改数组的长度时，例如vm.items.length = newLength

但我找不到任何关于spread operators.

this.arr1 = [...arr2, ...arr3];如果我们使用for ， Vue 会检测到变化吗arr1，在哪里arr1声明data({})？

spread operators确实使很多事情变得更容易，但是在这种情况下它们安全吗？

4

2 回答 2

2

是的，在推送数据、连接...的情况下，这是安全、实用和被动的：

let app = new Vue({

  el: '#app',

  data() {
    return {
      arr1: [1, 2, 3],
      arr2: [4, 5, 6],
      arr3: []
    }
  },
  methods: {
    fillArray() {
      this.arr3 = [...this.arr1, ...this.arr2]
    },
    random() {
      this.arr3 = [...this.arr3, Number(Math.random() * 100).toFixed()]
    },
    updateFirstIndex() {
      this.arr3[0] = 44;
      console.log(this.arr3);
    }
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <button @click="fillArray">
    fill array
</button>
  <button @click="random">
    Add random value
</button>
<br>
Not reactive if you update a given element at some index :

  <button @click="updateFirstIndex">
  update First Index
</button>
  <pre>
{{arr3}}
</pre>
</div>

于 2020-07-30T23:50:16.813 回答
2

当您为反应性属性分配新值时，它仍然是反应性的。

如何构造新值并不重要，重要的是赋值。

尽管 Vue 为数组突变 ( pushand splice) 提供了一些有用的扩展，但更好的方法之一是将所有反应属性视为不可变的；也就是说，永远不要直接更改，总是分配一个新值。

不好（无反应）

this.arr[0].objectProperty = 'new value'
this.arr[0] = { 'new': 'value' }
this.arr.length = 0

好的（由 Vue 支持）

this.arr.push({ 'new': 'value' })
this.arr.splice(0, 1)

好（不可变）

this.arr = this.arr.filter(...)
this.arr = this.arr.concat(...)
this.arr = [...arr2, ...arr3]

这是一篇专注于 React 的文章，但 Vue 的概念是相同的（几乎所有的虚拟 DOM 都一样）

React 中的不变性：改变对象并没有错

于 2020-07-30T23:58:43.217 回答