一、前言
在隨筆「模擬vue之資料驅動1」結尾處，我們說到如果監聽的屬性是個物件呢？那麼這個物件中的其他屬性豈不就是監聽不了了嗎？
如下：倘若user中的name、age屬性變化，如何知道它們變化了呢？
今兒，就來解決這一問題。
通過走讀vue原始碼，發現他是利用observer建構函式為每個物件建立乙個observer物件，來監聽資料的，如果資料中的屬性又是乙個物件，那麼就又通過observer來監聽嘛。
其實，核心思想就是樹的先序遍歷（關於樹，可參考here）。如我們將上述demo中的data資料，圖形化一下，就更加明白了，如下：
好了，理清了大體思路，下面我們就一起來建立乙個observer吧。
二、observer構造
observer整體結構如下：
function observer(data)
this.data = data;
this.walk(data);
}let p = observer.prototype = object.create(null);
p.walk = function(dat
p.convert = function(key, val)
好了，下面，我們一起來完成walk以及convert方法吧。
-walk-
首先，我們在walk方法中實現對data物件中的所有屬性監聽，如下：
p.walk = function(data));
}且，由於屬性中可能又會是乙個物件，那麼，我們就有必要監聽它們。
怎麼辦呢？
如果是個物件，再次利用observer建構函式，處理它不就完了麼。
如下：p.walk = function(data)
this.convert(key, val);
});}
你可能會有這樣的疑問，如果直接利用observer處理物件，那麼不就與父物件失去關聯了麼？
然而並沒有，因為j**ascript對於物件是指向位址關係，所以怎麼會失去關聯呢。
-convert-
對於convert方法，就比較簡單了，一如既往就是利用object.defineproperty監聽資料，如下：
p.convert = function(key, val),
set: (newval)=>
} });
}好了，到此，乙個簡單的observer就構造完成，下面我們就來測試下，是否成功監聽了每個屬性。
效果如下：
perfect，完整**見github。
本文標題: vue資料驅動模擬實現2
本文位址:
模擬實現Vue的資料雙向繫結
在使用vue開發時，對於元素，通過指令v model就可以達到乙個資料雙向繫結的效果，在這兒，我們不討論v model的實現原理，就只簡單討論並模擬實現乙個資料雙向繫結。資料雙向繫結的特點是雙向 當我們在頁面中的操作影響資料時，會直接改變資料 頁面 資料 當我們在 中改變資料時，對應的變化會體現在頁...
2FSK matlab模擬實現
就是最簡單的實現乙個2fsk，先不管這種調製方法的性質 其實就是太懶了不想學rb 100 設定碼元速率 sample randbinary n 生成隨機二進位制序列 設定傳送波形引數 f1 8000 f0 12000 傳送波形取樣 fs 48000 send modulation 2fsk samp...
vue美團電影模擬實現
由於沒有介面，只能算個半成品。但是我認為需要的請求引數都有獲取，一旦有介面可以輕鬆請求資料。請求引數 中有注釋。doctype html en utf 8 viewport content width device width,initial scale 1.0 x ua compatible co...