了解Vue.js中DOM元素何时发生更改

Question

我想弄清楚一个特定的DOM元素何时由于vue数据的更新而发生了更改。

所以在下面的例子中，我想知道{person.folditeColor}何时更改。person.favoriteColor是动态列表中的一部分，在任何时候，该人都可以更改自己喜欢的颜色。人数也可以随时变化。所以出于这个需要，我真的只想知道那个人最喜欢的颜色什么时候更新了。

<div v-for="person in people">
<div>{{person.favoriteColor}}</div>
</div>

我需要什么的想法：

<div v-for="(person, index) in people">
<div v-on:update='thisHasBeenUpdated(index)'>{{person.favoriteColor}}</div>
</div>

Answer 1

听起来像是要使用watch:

watch: {
'person.favoriteColor': {
handler(value, oldValue) {
console.log(`Favorite color changed from ${oldValue} to ${value}`);
}
}
}