为什么vue更改特定数组成员不更新dom [英] why vue change specific array member not update dom

问题描述

我想知道为什么我更改了数组的特定项目而页面没有更新.我知道vue.js的文档指出:

I want to know why I changed the specific item of an array and the page doesn't update. I know doc of vue.js points out that:

由于JavaScript的限制，Vue无法检测到对数组的以下更改:

Due to limitations in JavaScript, Vue cannot detect the following changes to an array:

直接用索引设置项目时，例如 vm.items [indexOfItem] = newValue .

When you directly set an item with the index, e.g. vm.items[indexOfItem] = newValue.

它说我们应该这样做，但是我不知道为什么.而且我发现了类似的问题( Vue计算出的问题-什么时候会再次计算).

It says we should do that, but I don't know why. And I've found a similar question(Vue computed issue - when will it compute again) about that.

这是上面问题中的一些代码:

Here is some code from the question above:

// works well

data() {
  return {
    cart: {
      item: {
        nums: 10,
        price: 10,
      },
    },
  }
},
computed: {
  total() {
    return this.cart.item.nums * this.cart.item.price
  },
},
methods: {
  set() {
    //why it worked.
    this.cart.item = {
      nums: 5,
      price: 5,
    }
  },
},

// oops! not working!

data() {
  return {
    cart: [
      {
        nums: 10,
        price: 10,
      },
    ],
  }
},
computed: {
  total() {
    return this.cart[0].nums * this.cart[0].price
  },
},
methods: {
  set() {
    this.cart[0] = {
      nums: 5,
      price: 5,
    }
  },
},

我对问题的答案感到困惑

I'm confused about the answer from the question:

如果 this.cart 被标记为已更改， this.cart [0] 被标记为已更改或 this.cart [0]，则

总计将重新计算.] .nums 或 this.cart [0] .price 已更改.问题是您要替换 this.cart [0] 中的对象.这意味着 this.cart [0] .price 和num不变，因为它们仍然指向旧对象.

total will be recalculated if this.cart is marked as changed, this.cart[0] is marked as changed or if this.cart[0].nums or this.cart[0].price is changed. The problem is that you are replacing the object in this.cart[0]. This means that this.cart[0].price and nums do not change, because those still point to the old object.

如果我已替换 this.cart [0] 中的对象，为什么 this.cart [0] 未标记为已更改?为什么 this.cart [0] .price 和 nums 仍然指向旧对象?我更改了this.cart [0]！对吧?

If I have replaced the object in this.cart[0], why this.cart[0] isn't marked as changed? why this.cart[0].price and nums still point to old object? I have changed the this.cart[0]! right?

为什么在第一种情况下效果很好?也替换对象.两种情况有什么区别?

And why in the first situation it works well? also replace the object . What's the difference between the two scenarios?

推荐答案

Vue对此非常明确.这是JavaScript的限制.JavaScript不支持仅在数组由于添加或删除元素而更改大小时才检测数组元素何时更改的功能.因此，无法检测到替换元素.

Vue is pretty explicit about this. It's a JavaScript limitation. JavaScript does not support the ability to detect when an array element changes, only when arrays change size as a result of adding or removing elements. Therefore replacing an element is not detectable.

Vue在后台执行的操作是设置机制，以监视对象更改的时间，这是JavaScript 支持的功能.因此，作为对象的数组元素是Vue可以检测到更改的对象.由于Vue无法检测到要替换的数组元素，因此它不知道停止查看旧对象并开始查看新对象.

What Vue does behind the scenes is sets up mechanics to watch for when objects change, which is something JavaScript does support. So array elements that are objects are things Vue can detect changes for. Since Vue cannot detect an array element being replaced, it doesn't know to stop looking at the old object and start looking at the new one.

答案也有据可查:如果要更新数组中的项目，请使用 Vue.set().这使Vue知道数组元素正在更改，因此知道停止查看旧对象并开始查看新对象.

The answer is also well-documented: if you want to update an item in an array, then use Vue.set(). This allows Vue to know that the array element is changing, so it knows to stop looking at the old object and start looking at the new one.

因此，解决方案如下所示:

The solution therefore looks something like this:

Vue.set(this.cart, 0, {nums: 5, price: 5});

这篇关于为什么vue更改特定数组成员不更新dom的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！