Vue.js：入力値を変更するsetTimeout関数を使用しますか？

Question

私はちょうどここに、v-model一部を満たし、Vue.jsの冒頭だが、コードは次のとおりです。

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>は、入力する限り変更されます。 BUT
機能を使用してinputタグの値を変更すると、innerHTMlは<p>に変更されません。
setTimeoutを使用してdataオブジェクトの値を変更する機能を使用する場合、inputの値は変更される限り長くなります。

ここ

は私が含まvue.js次のとおりです。
<script src="https://unpkg.com/vue/dist/vue.js"></script>
、ここではデモが実際にどのような目的がなければcodepen.io

上にあるので、私はちょうど、双方向結合することを処理するために、他のソリューションを必要としませんなぜ少し不思議です。もし入力ボックス内に入力すると、このページで説明したように

Answer 1

、変更は、ヴューのゲッター/セッターメソッドによって処理されます。上記の場合https://vuejs.org/v2/guide/reactivity.html

、入力ボックスは、Vueのアプリ内です。そのため、Vueはその変更を処理するgetter/setterメソッドを設定できます。

匿名機能がsetTimeout以内で実行されると、それはVueアプリの外で実行されます。入力ボックスの値はjavascriptを使用して直接変更されますが、はVueアプリのの範囲外です。したがって、そのゲッター/セッターメソッドはトリガーされません。したがって、変更はVueテンプレートに反映されません。