vue v-model原理實現

v-model的實現原理：

基礎用法：

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

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

1、text 和 textarea 元素使用 value 屬性和 input 事件；

2、checkbox 和 radio 使用 checked 屬性和 change 事件；

3、select 字段將 value 作為 prop 並將 change 作為事件。

實現原理

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

1）v-bind:綁定響應式數據

2）觸發oninput 事件並傳遞數據

3）舉例如下：

<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;

總結：數據雙向綁定其實就是調用對應組件的事件處理函數來執行實現數據的同步更新；