1. 簡析mvvm框架

目前angular,reat和vue都是mvvm型別的框架

以vue為例

這裡的vm 就是vue框架，它相當於中間樞紐的作用,連線著model 和view.

• 當前臺顯示的view發生變化了，它會實時反應到viewModel上，如果有需要，viewModel 會通過ajax等方法將改變的資料 傳遞給後臺model
• 同時從後臺model獲取過來的資料，通過vm將值響應到前臺UI上

• 雙向繫結原理

vm的核心是view 和 data 

• 當data 有變化的時候它通過Object.defineProperty(）方法中的set方法進行監控，並呼叫在此之前已經定義好data 和view的關係了的回撥函式，來通知view進行資料的改變
• 而view 發生改變則是通過底層的input 事件來進行data的響應更改

vue是通過Object.defineProperty()來實現資料劫持的。

Object.defineProperty( )是用來做什麼的？它可以來控制一個物件屬性的一些特有操作，比如讀寫權、是否可以列舉，這裡我們主要先來研究下它對應的兩個描述屬性get和set

varBook= {}

       varname= '';

       Object.defineProperty(Book, 'name', {

           set:function(value) {

                name= value;

                console.log('你取了一個書名叫做'+ value);

           },

           get:function() {

                return'《'+ name+ '》'

           }

       })



       console.log(Book)

       Book.name= 'vue權威指南'; // 你取了一個書名叫做vue權威指南

        console.log(Book.name); // 《vue權威指南》

       // get 是在讀取那麼屬性的時候觸發的

       // set 是在設定屬性值的時候觸發的
 

實現方法： 觀察者模式

Observer（Objec.defineProperty中的set）監聽data的變化，當data有變化的時候通知觀察者列表Dep（裡面有與data變化對應的update函式）,watcher負責向觀察者列表裡新增（訂閱）對應的更新函式，Dep裡的更新函式執行完了之後將最新的值更新到view上。