對於Vue的雙向綁定，現在基本是個前端都聽說過，面試官也喜歡問這個問題。但對於Vue雙向綁定的原理，掘金、博客園和segmentfault等技術社區充斥着大量的錯誤文章。這些文章的題目基本樣子如下 “面試題：如何實現Vue的雙向綁定”或“Vue源碼解讀：Vue雙向綁定原理”，文章里寫的Vue 2.0雙向綁定原理都是Object.defineproperty通過get和set來劫持實現。這種文章這不僅僅給前端開發者造成了誤導，就連很多面試官也是這么認為的。
為了遏制這種錯誤知識的傳播，Vue作者尤雨溪親自在Vue文檔進行了說明，解釋什么是Vue的雙向綁定:你可以用 v-model 指令在表單 <input>、<textarea> 及 <select> 元素上創建雙向數據綁定。它會根據控件類型自動選取正確的方法來更新元素。盡管有些神奇，但 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層更改。希望今后能少一些對於雙向綁定原理錯誤理解的文章了。