vue中雙向事件綁定的原理是什么

今天就跟大家聊聊有關vue中雙向事件綁定的原理是什么，可能很多人都不太了解，為了讓大家更加了解，小編給大家總結了以下內容，希望大家根據這篇文章可以有所收獲。

與js或者jquery直接改變操作dom不同，vue使用v-model實現數據的雙向綁定，它會根據控件類型自動選取正確的方法來更新元素。

v-model就是vue的雙向綁定的指令，能將頁面上控件輸入的值同步更新到相關綁定的data屬性，也會在更新data綁定屬性時候，更新頁面上輸入控件的值

官方文檔這么解釋：

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

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

• 觸發 input 事件 并傳遞數據 (核心和重點)

如下代碼

<input v-model="txt">

本質上是

<input :value="txt" @input="txt = $event.target.value">

解釋：

初始化vue實例時候，會遞歸遍歷data的每一個屬性，并且通過defineProperty來監聽每一個屬性的get，set方法，從而一旦某個屬性重新賦值，則能監聽到變化來操作相應的頁面控制

看下方代碼：

Object.defineProperty(data,"name",{
        get(){
            return data["name"];
        },
        set(newVal){
            let val=data["name"];
            if (val===newVal){
                return;
            }
            data["name"]=newVal;
            // 監聽到了屬性值的變化,假如node是其對應的input節點
            node.value=newVal;
        }    
    })

總結

一方面modal層通過Object.defineProperty來劫持每個屬性，一旦監聽到變化通過相關的頁面元素更新。另一方面通過編譯模板文件，為控件的v-model綁定input事件，從而頁面輸入能實時更新相關data屬性值

那么Object.defineProperty是用來控制一個對象屬性的一些特有操作，比如讀寫權、是否可以枚舉，這里我們主要先來研究下它對應的兩個描述屬性get和set，v-model其實是對其get和set進行重寫操作，get就是在讀取name屬性這個值觸發的函數，set就是在設置name屬性這個值觸發的函數

補充

v-model修飾符：.lazy、.trim和.number

lazy ：在每次 input 事件觸發后將輸入框的值與數據進行同步，添加 lazy 修飾符，從而轉變為使用 change 事件進行同步

<input v-model.lazy="msg">

trim ：去除字符串首尾的空格

<input v-model.trim="msg">

number ：將數據轉化為值類型

<input v-model.number="msg">

看完上述內容，你們對vue中雙向事件綁定的原理是什么有進一步的了解嗎？如果還想了解更多知識或者相關內容，請關注億速云行業資訊頻道，感謝大家的支持。