javascript - Vue.js:使用 setTimeout 函数更改输入值？

Question

我是Vue.js的最开始, 我刚开会v-model部分，这里是代码:

HTML:
<div id="app"> <p> {{message}} </p> <input v-model="message" id="input_id"> </div>

javascript:

var v = new Vue({
  el:"#app",
  data:{
    message: "Hello"
  }
});

var inputDOM = document.querySelector('#input_id');

setTimeout(function(){
  inputDOM.value = "Changing By timeout";
},1500);

是的，当我在 input 中输入一些文本时标记，innerHTML的 <p>只要我输入就会改变。 但是
如果我使用 setTimeout函数更改input的值标记，innerHTMl的 <p>不会改变。
是的，如果使用 setTimeout函数更改data的值对象，input值会只要改变。

这里是 vue.js我包括:
<script src="https://unpkg.com/vue/dist/vue.js"></script>
这是关于 codepen.io 的演示

确实没有任何目的，所以我不需要任何其他解决方案来处理双向绑定(bind)，只是有点好奇为什么。

Answer 1

当您在输入框中键入时，更改由 Vue 的 getter/setter 方法处理，如本页所述:https://v2.vuejs.org/v2/guide/reactivity.html

在上面的例子中，输入框在 Vue 应用程序中。因此，Vue 能够设置其 getter/setter 方法来处理这些更改。

当匿名函数在 setTimeout 内运行时，它是在 Vue 应用程序之外完成的。输入框的值直接使用 javascript 更改，但 在 Vue 应用程序的范围之外。因此它的 getter/setter 方法不会被触发。因此更改不会反射(reflect)在您的 Vue 模板中。