正在更新 Vue.js 中的对象数组中的项目：替换数组还是更改一个值更好

Question

我正在使用 Vue/Vuex 从具有此结构的数组生成组件（使用 better-sqlite3 从 SQLite 检索）。

let table=[
  {
    id:1,
    column_1:'data',
    column_2:'data',
    column_3:{'1':'data','2':'data','3':'data'}
  },
  {
    id:2,
    column_1:'data',
    column_2:'data',
    column_3:{'1':'data','2':'data','3':'data'}
  },
  ...
]

存在需要一次更新多行数据的情况。由于我需要在 SQLite 和 Vue 之间来回传递数据，我想知道用 sql 更新数据然后用更新后的数据替换整个 javascript 数组是否更简单无害数据，包括未修改的行。否则我想我将不得不使用 .find() 来检查和更改特定项目。 所以我的问题是，就反应性而言，替换整个数组是否是一个坏主意，或者 Vue 是否可以相应地进行智能更新。

Answer 1

只需更新所有数据，因为如果您只想更新一个目标，这个过程比更新所有数据要大

Answer 2

Vue 在更新 UI

时有不同的跟踪方式

Vue 在数据对象上使用 getters/setters 进行突变跟踪。当你执行this.table = [{}, {}, {}, ...];时，它会经过table的setter。在 setter 中，有一个函数可以通知观察者并将此数据更改添加到队列中。

Limitation/Behaviour 同时更新 Arrays :

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

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

根据上面两条语句演示：

const app = new Vue({
  el: '#app',
  data() {
    return {
      table: [{
        id:1,
        column_1:'data1',
        column_2:'data',
        column_3:{'1':'data','2':'data','3':'data'}
      }, {
        id:2,
        column_1:'data2',
        column_2:'data',
        column_3:{'1':'data','2':'data','3':'data'}
      }]
    }
  },
  mounted() {
    // We are updating the array item and It's not reactive (You can see it's not updating UI)
    this.table[1] = {
      id: 3,
      column_1: 'data3',
      column_2:'data',
      column_3:{'1':'data','2':'data','3':'data'}
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <ul>
    <li v-for="item in table" :key="item.id">
      {{ item.column_1 }}
    </li>
  </ul>
</div>

你的问题的答案：考虑到以上两个陈述，你必须更新整个数组，包括未修改的行。

根据您的问题的答案进行演示：

const app = new Vue({
  el: '#app',
  data() {
    return {
      table: [{
        id:1,
        column_1:'data1',
        column_2:'data',
        column_3:{'1':'data','2':'data','3':'data'}
      }, {
        id:2,
        column_1:'data2',
        column_2:'data',
        column_3:{'1':'data','2':'data','3':'data'}
      }]
    }
  },
  mounted() {
    // We are updating the whole array and It's reactive (You can see it's updating UI)
    this.table = [{
        id:1,
        column_1:'data1',
        column_2:'data',
        column_3:{'1':'data','2':'data','3':'data'}
      }, {
      id: 3,
      column_1: 'data3',
      column_2:'data',
      column_3:{'1':'data','2':'data','3':'data'}
    }]
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <ul>
    <li v-for="item in table" :key="item.id">
      {{ item.column_1 }}
    </li>
  </ul>
</div>

正在更新 Vue.js 中的对象数组中的项目：替换数组还是更改一个值更好

Updating item in array of objects in Vue.js: is it better to replace the array or change one value

javascript

vue.js

vuejs2

better-sqlite3