對於vue的雙向繫結，現在基本是個前端都聽說過，面試官也喜歡問這個問題。但對於vue雙向繫結的原理，掘金、和segmentfault等技術社群充斥著大量的錯誤文章。這些文章的題目基本樣子如下 「面試題：如何實現vue的雙向繫結」或「vue原始碼解讀：vue雙向繫結原理」，文章裡寫的vue 2.0雙向繫結原理都是object.defineproperty通過get和set來劫持實現。這種文章這不僅僅給前端開發者造成了誤導，就連很多面試官也是這麼認為的。
為了遏制這種錯誤知識的傳播，vue作者尤雨溪親自在vue文件進行了說明，解釋什麼是vue的雙向繫結:你可以用v-model指令在表單、及元素上建立雙向資料繫結。它會根據控制項型別自動選取正確的方法來更新元素。儘管有些神奇，但v-model本質上不過是語法糖。它負責監聽使用者的輸入事件以更新資料，並對一些極端場景進行一些特殊處理。
這裡大家就了解了，vue的雙向繫結是指表單元素的v-model指令，而v-model只是個語法糖而已。mvvm架構模式在view層更改的時候會觸發model層更改，若vue僅僅用object.defineproperty自身是沒有辦法對}裡的資料進行view層的改變的。那廣為流傳的object.defineproperty是做什麼的呢？object.defineproperty是vue3.0之前版本的核心，vue通過它的set和get進行資料劫持從而實現資料的響應式更新。而我們要對view層的改變，需要的就是v-model這些輸入框等表單元素進行view層更改。希望今後能少一些對於雙向繫結原理錯誤理解的文章了。
關於Vue雙向繫結的測試
box floatl clear msg中間值 msg新值 list中間值 list新值 obj中間值 id obj新值 id array中間值 array新值 父元件msg 父元件list 父元件obj id 父元件array 父元件 var vm new vue parentobj parent...
Vue的雙向繫結
在今天的前端面試中，vue的雙向資料繫結已經成為了乙個非常容易考到的點，即使不能當場寫出來，至少也要能說出原理。鄙人自己根據vue官方文件理解以及一些deom的練習個人的總結。個人理解 vue的雙向資料繫結的原理相信大家也都十分了解了，主要是通過object物件的defineproperty屬性，重...
vue的雙向繫結
概念 vue的雙向繫結其實就給一些可輸入的元素通過新增input事件在動態的監聽某個值 說明 在vue中v model指令自動給元件繫結input事件和傳遞value屬性的值 元件實現雙向繫結 邏輯 一般情況下，vue的資料繫結是單向的，如果說要實現雙向繫結，就得涉及到父子 子父間的通訊，父元素的值...