Vue：更新深度不会触发重新渲染答案

【问题标题】：Vue : Updating deep dosn't trigger re-renderingVue：更新深度不会触发重新渲染
【发布时间】：2020-03-16 13:54:15
【问题描述】：

我有一个看起来像这样的数组：

customers : [ {customer : 'foo', address : {postalCode : 6655, city : 'somewhere'}}, ..
]

我呈现一个类似这样的列表：

<template v-for="(cust, inx) in customers">
<div>{{ customers[inx].customer }}</div>
<div>{{customers[inx].address.postalCode }}|{{ customers[inx].address.city}}</div>
</template>

现在我有一个函数，当人们输入一个新的邮政编码时，它会获取一个城市并将其设置为：

this.$set(self.customers[inx].address, 'city', 'NewCityName');

问题是，我可以确认文本实际上是在正确的对象中更改的，但它不会触发重新渲染。在这种情况下，我是否以错误的方式使用了 $set 函数？

【问题讨论】：

如果city 属性已经存在于相关对象中，那么使用$set 与直接使用self.customers[inx].address.city = 'NewCityName' 设置它没有什么不同。根据您提供的代码，我认为它应该会触发重新渲染，因此您可能需要将minimal reproducible example 放在一起，以便我们自己看到问题。如果 city 属性最初丢失并且在其他地方没有 $set 填充，那么这可能会解释发生了什么。与您的问题无关，但在您的模板中，您继续写 customers[inx]，而您可以写 cust。
您还应该添加:key="inx"，否则会导致重新渲染问题。你为什么要使用this 和self？或者找出哪些属性不是响应式控制台记录对象并检查哪些属性没有 getter/setter。

标签： vue.js vue-reactivity

【解决方案1】：

可能是this.customers 设置不正确（未标记为可观察），即未在{customers:[]} 等数据中声明，或者其任何项目设置不正确。如果您在 devtools 控制台中进行评估，它必须给出 this.customer 及其任何项目，例如：{__ob__: Observer} 并且在扩展视图中必须包含项目 __ob__: Observer {value: {…}, dep: Dep, vmCount: 0}。这些类型的错误在 vue 中是最烦人的。

对象和数组元素只有在它们存在时才会被观察。像push、splice 这样的数组方法也会被观察到，所以如果数组长度 this.array[2] = obj 将不起作用，但 this.array.push(obj) 会按预期工作。在其他情况下，$set(...) 需要将元素标记为可观察的。

【讨论】：