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="searchText">

  等價于：

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

總結

以上是生活随笔為你收集整理的v-model的实现原理的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。