v-model的實現原理

基礎用法

• v-model 本質上不過是語法糖，可以用 v-model 指令在表單 <input>、<textarea> 及 <select> 元素上創建雙向數據綁定。它會根據控件類型自動選取正確的方法來更新元素。它負責監聽用戶的輸入事件以更新數據，並對一些極端場景進行一些特殊處理。v-model 會忽略所有表單元素的 value、checked、selected 特性的初始值而總是將 Vue 實例的數據作為數據來源。你應該通過 JavaScript 在組件的 data 選項中聲明初始值。

• v-model 在內部為不同的輸入元素使用不同的屬性並拋出不同的事件：

  • text 和 textarea 元素使用 value 屬性和 input 事件；
  • checkbox 和 radio 使用 checked 屬性和 change 事件；
  • select 字段將 value 作為 prop 並將 change 作為事件。

實現原理

• v-model只不過是一個語法糖而已,真正的實現靠的還是

  • v-bind:綁定響應式數據

  • 觸發oninput 事件並傳遞數據

• 舉例如下：

  <input v-model="sth" />
  //  等同於
  <input :value="sth" @input="sth = $event.target.value" /> //自html5開始,input每次輸入都會觸發oninput事件，所以輸入時input的內容會綁定到sth中，於是sth的值就被改變;
  //$event 指代當前觸發的事件對象;
  //$event.target 指代當前觸發的事件對象的dom;
  //$event.target.value 就是當前dom的value值;
  //在@input方法中，value => sth;
  //在:value中,sth => value;