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

 

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

Vue的數(shù)據(jù)綁定只有兩個(gè)步驟，compile=>link。

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

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

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

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

這就要用到getter和setter了。

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