vue.js - 当异步调用更新另一个属性时，Vue 组件会丢失输入

Question

我有一个具有 <input> 的组件与 :value设置为某个属性。该组件有另一个与此输入无关的属性，可以异步更新(AJAX 调用)。每当您在输入中键入并且异步调用完成时，更新另一个属性，您键入的输入就会被重置。
为了重现这个问题，我创建了一个 jsfiddle使用 setInterval 模拟异步调用并增加另一个传递的属性。尝试输入输入，它将每秒重置一次。如果您足够快，您可以标记出并导致 @change触发实际更新。
问题是:为什么要更新 other支持无效/重新渲染组件，我该如何解决这个问题？
请注意 v-model="person.name"这不是一个有效的解决方案 - 我需要知道旧值和新值，这就是我使用手册 :value 的原因/@change组合。
编辑 : updateName方法也只需要在用户离开输入字段时触发。这是因为在其中运行的代码相对 CPU 密集，并且只需要在用户完成输入并离开它时运行(在我的实际代码中，而不是 jsfiddle)。
编辑2 : 有没有办法不让它重新渲染整个组件，而只重新渲染相关的部分？

Answer 1

因为父组件正在更改子组件的属性，所以它必须重新渲染(部分)子组件。由于您使用的是@change，而不是@input，因此您的更改尚未保存到 react 变量person.name。 ，它仅在您足够快地单击选项卡时才有效。一种解决方案是更改 @change至@input (更类似于 v-model):
https://jsfiddle.net/mf67xq1e/
另一个(更好的)选项是使用 v-model并使用观察者来检索旧值和新值:

  watch: {
    // whenever person.name changes, this function will run
    "person.name": function (newName, oldName) {
      console.log("newName:", newName);
      console.log("newName:", oldName);
    }
  }

https://jsfiddle.net/mf67xq1e/1/
编辑:
正如您所提到的，您只需要在模糊/离开输入字段时触发某些内容，将变量的 react 性和其他方法的触发(例如更新其他变量或其他内容)分开，在两个单独的变量中:
https://jsfiddle.net/ta9cgnx0/
编辑 2:带有 v-model 的更清洁选项和单独调用模糊时的其他触发器:
https://jsfiddle.net/ay1g63u8/