Unshifting vs push on a v-for 数组答案

【问题标题】：Unshifting vs pushing on a v-for arrayUnshifting vs push on a v-for 数组
【发布时间】：2021-05-28 14:24:13
【问题描述】：

我有一个laravel-mix vuejs 项目

出于某种原因，我有一个由 vanillajs 工作的预览对话框，而不是使用 vuetify 或任何其他 VueJS UI Framework。

预览对话框的工作原理：
1。一个类名为 preview-dialog 的 div 和一个类名为 trigger-preview-dialog 的按钮在 DOM 中呈现。
2。一个名为 popup-dialog.js 的脚本脚本被加载并将默认样式 (visibility: hidden) 分配给 preview-dialog 类。
3。当trigger-preview-dialog 被点击时，它会将preview-dialog 的visibility 更改为visible。

现在，我有一个 post_list 数组，它使用 v-for directive 渲染，其内容是 preview-dialog。我还有一个函数可以将新对象附加到post_list。

我注意到，当我使用unshift 将新对象附加到post_list 时，新添加对象的preview_dialog 工作正常并打开。但是当我在追加新对象时使用push时，新添加的对象'preview_dialog根本没有打开，更糟糕的是我在chrome检查器上没有发现任何错误。

有人能告诉我为什么 unshift 有效，而 push 无效吗？谢谢

【问题讨论】：

标签： javascript arrays vue.js v-for laravel-mix-vue3

【解决方案1】：

这完全是因为 vuejs 跟踪/观察对象能够对变化做出反应。

我建议在工作时使用以下语法

带数组

  
  addItem (item) {
    this.items = [...this.items, item]

有对象

  
  updateItem (item) {
    this.item = Object.assign({}, this.item, item)
  }

【讨论】：