vue.js采用數(shù)據(jù)劫持結(jié)合“發(fā)布者-訂閱者”模式的方式，通過Object.defineProperty()來劫持各個屬性的setter、getter，在數(shù)據(jù)變動時發(fā)布消息給訂閱者，觸發(fā)相應(yīng)的監(jiān)聽回調(diào)，從而實現(xiàn)雙向綁定。

• 適用于所有品牌的電腦。

vue的雙向綁定原理及實現(xiàn)

前言

使用vue也好有一段時間了，雖然對其雙向綁定原理也有了解個大概，但也沒好好探究下其原理實現(xiàn)，所以這次特意花了幾晚時間查閱資料和閱讀相關(guān)源碼，自己也實現(xiàn)一個簡單版vue的雙向綁定版本，先上個成果圖來吸引各位：

代碼：

效果圖：

是不是看起來跟vue的使用方式差不多？接下來就來從原理到實現(xiàn)，從簡到難一步一步來實現(xiàn)這個SelfVue。由于本文只是為了學(xué)習(xí)和分享，所以只是簡單實現(xiàn)下原理，并沒有考慮太多情況和設(shè)計，如果大家有什么建議，歡迎提出來。

本文主要介紹兩大內(nèi)容：

1. vue數(shù)據(jù)雙向綁定的原理。

2. 實現(xiàn)簡單版vue的過程，主要實現(xiàn){{}}、v-model和事件指令的功能。

相關(guān)代碼地址：https://github.com/canfoo/self-vue

vue數(shù)據(jù)雙向綁定原理

vue數(shù)據(jù)雙向綁定是通過數(shù)據(jù)劫持結(jié)合發(fā)布者-訂閱者模式的方式來實現(xiàn)的，那么vue是如果進行數(shù)據(jù)劫持的，我們可以先來看一下通過控制臺輸出一個定義在vue初始化數(shù)據(jù)上的對象是個什么東西。

代碼：

var vm = new Vue({     data: {         obj: {             a: 1         }     },     created: function () {         console.log(this.obj);     } });

結(jié)果：

我們可以看到屬性a有兩個相對應(yīng)的get和set方法，為什么會多出這兩個方法呢？因為vue是通過Object.defineProperty()來實現(xiàn)數(shù)據(jù)劫持的。

Object.defineProperty( )是用來做什么的？它可以來控制一個對象屬性的一些特有操作，比如讀寫權(quán)、是否可以枚舉，這里我們主要先來研究下它對應(yīng)的兩個描述屬性get和set，如果還不熟悉其用法，請點擊這里閱讀