公司的新項目決定使用Vue.js來做，當我打印出Vue實例下的data對象里的屬性時，發(fā)現(xiàn)了一個有趣的事情：

 

它的每個屬性都有兩個相對應的get和set方法，我覺的這是多此一舉的，于是去網上查了查Vue雙向綁定的實現(xiàn)原理，才發(fā)現(xiàn)它和Angular.js雙向綁定的實現(xiàn)原理完全不同，Angular是用的數據臟檢測，當Model發(fā)生變化，會檢測所有視圖是否綁定了相關數據，再更改視圖。而Vue使用的發(fā)布訂閱模式，是點對點的綁定數據。

Vue的數據綁定只有兩個步驟，compile=>link。

我一直在想，vue是通過什么去監(jiān)聽用戶對Model的修改，直到我發(fā)現(xiàn)Vue的data里，每個屬性都有set和get屬性，我才明白過來。

在平時，我們創(chuàng)建一個對象，并修改它的屬性，是這樣的： 

    var obj = {
        val:99 }
    obj.val = 100;
    console.log(obj.val)//100

沒有任何問題，但是如果要你去監(jiān)測，當我修改了這個對象的屬性時，要去做一些事，你會怎么做？

這就要用到getter和setter了。

假設我現(xiàn)在要給一個碼農對象添加一個name屬性，而且每次更新name屬性時，我要去完成一些事，我們可以這樣做：