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

Question

我有一个组件，<input>其中有一个:value了某个属性。该组件还有另一个与此输入无关的属性，可以异步更新（AJAX 调用）。每当您在输入中键入内容并且异步调用完成并更新其他属性时，您键入的输入都会重置。

为了重现这个问题，我使用 setInterval 创建了一个jsfiddle来模拟异步调用并增加其他传递的属性。尝试输入输入内容，它每秒都会重置。如果你足够快，你可以跳出并导致@change实际更新。

问题是：为什么要更新otherprop 的更新会使组件失效/重新渲染，我该如何解决这个问题？

请注意，这v-model="person.name"不是一个有效的解决方案 - 我需要知道旧值和新值，这就是我使用手动:value/@change组合的原因。

编辑：该updateName方法实际上只需要在用户离开输入字段时触发。这是因为其中运行的代码相对来说是 CPU 密集型的，并且只需要在用户完成输入并离开时运行（在我的实际代码中，而不是 jsfiddle）。

Edit2：是否有某种方法不让它重新渲染整个组件，而只重新渲染相关部分？

Answer 1

由于父组件正在更改子组件的属性，因此它必须重新渲染子组件（部分）。由于您使用的是@change，而不是@input，您的更改尚未保存到反应变量中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/

编辑： 正如您所提到的，您只需要在模糊/离开输入字段时触发某些内容，将变量的反应性和其他方法的触发（例如更新某些其他变量或其他内容）分开在两个单独的变量中：

https://jsfiddle.net/ta9cgnx0/

编辑 2：使用 v-model 的更清晰选项，并在模糊时单独调用其他触发器：

https://jsfiddle.net/ay1g63u8/