換句話說，View和Model之間隨著業(yè)務(wù)量的不斷龐大，會出現(xiàn)蜘蛛網(wǎng)一樣難以處理的依賴關(guān)系，完全背離了開發(fā)所應(yīng)該遵循的“開放封閉原則”。

面對這個問題，MVVM框架就出現(xiàn)了，它與MVC框架的主要區(qū)別有兩點：
1、實現(xiàn)數(shù)據(jù)與視圖的分離
2、通過數(shù)據(jù)來驅(qū)動視圖，開發(fā)者只需要關(guān)心數(shù)據(jù)變化，DOM操作被封裝了。

可以看到MVVM分別指View，Model，View-Model，View通過View-Model的DOM Listeners將事件綁定到Model上，而Model則通過Data Bindings來管理View中的數(shù)據(jù)，View-Model從中起到一個連接橋的作用。

MVVM的實現(xiàn)主要是三個核心點：

響應(yīng)式：vue如何監(jiān)聽data的屬性變化

模板解析：vue的模板是如何被解析的

渲染：vue模板是如何被渲染成HTML的

對于MVVM來說，data一般是放在一個對象當(dāng)中，就比如這樣：

         var obj = {
             name: "zhangsan",
             age: 25
         }

當(dāng)我們訪問或修改obj的屬性的時候，比如：

         console.log（obj.name）  //訪問
         obj.age = 22            //修改

但是這樣的操作vue本身是沒有辦法感知到的，那么應(yīng)該如何讓vue知道我們進(jìn)行了訪問或是修改的操作呢？
那就要使用Object.defineProperty

        var vm = {}
        var data = {
            name: "zhangsan",
            age: 20
        }

        var key, value
        for (key in data) {
            (function (key) {
                Object.defineProperty(vm, key, {
                    get: function () {
                        console.log("get", data[key]) // 監(jiān)聽
                        return data[key]
                    },
                    set: function (newVal) {
                        console.log("set", newVal) // 監(jiān)聽
                        data[key] = newVal
                    }
                })
            })(key)
        }

通過Object.defineProperty將data里的每一個屬性的訪問與修改都變成了一個函數(shù)，在函數(shù)get和set中我們即可監(jiān)聽到data的屬性發(fā)生了改變。

首先模板是什么？

模板本質(zhì)上是一串字符串，它看起來和html的格式很相像，實際上有很大的區(qū)別，因為模板本身還帶有邏輯運算，比如v-if，v-for等等，但它最后還是要轉(zhuǎn)換為html來顯示。

    

        

            
            submit
        
        

            

                
{{item}}
            
        
    

模板在vue中必須轉(zhuǎn)換為JS代碼，原因在于：在前端環(huán)境下，只有JS才是一個圖靈完備語言，才能實現(xiàn)邏輯運算，以及渲染為html頁面。

這里就引出了vue中一個特別重要的函數(shù)——render

render函數(shù)中的核心就是with函數(shù)。

with函數(shù)將某個對象添加到作用域鏈的頂部，如果在 statement中有某個未使用命名空間的變量，跟作用域鏈中的某個屬性同名，則這個變量將指向這個屬性值。

舉個例子：

       var obj = {
            name: "zhangsan",
            age: 20,
            getAddress: function () {
                alert("beijing")
            }
        }
        function fn1() {
            with(obj) {
                alert(age)
                alert(name)
                getAddress()
            }
        }
        fn1()

with將obj這個對象放在了自己函數(shù)的作用域鏈的頂部，當(dāng)執(zhí)行下列函數(shù)時，就會自動到obj這個對象去尋找同名的屬性。

而在render函數(shù)中，with的用法是這樣：

    

        

            
            submit
        
        

            

                
{{item}}
            
        
    

        // 對應(yīng)的js文件
        var data = {
            title: "",
            list: []
        }
        // 初始化 Vue 實例
        var vm = new Vue({
            el: "#app",
            data: data,
            methods: {
                add: function () {
                    this.list.push(this.title)
                    this.title = ""
                }
            }
        })

        
        with(this){  // this 就是 vm
            return _c(
                "div",
                {
                    attrs:{"id":"app"}
                },
                [
                    _c(
                        "div",
                        [
                            _c(
                                "input",
                                {
                                    directives:[
                                        {
                                            name:"model",
                                            rawName:"v-model",
                                            value:(title),
                                            expression:"title"
                                        }
                                    ],
                                    domProps:{
                                        "value":(title)
                                    },
                                    on:{
                                        "input":function($event){
                                            if($event.target.composing)return;
                                            title=$event.target.value
                                        }
                                    }
                                }
                            ),
                            _v(" "),
                            _c(
                                "button",
                                {
                                    on:{
                                        "click":add
                                    }
                                },
                                [_v("submit")]
                            )
                        ]
                    ),
                    _v(" "),
                    _c("div",
                        [
                            _c(
                                "ul",
                                _l((list),function(item){return _c("li",[_v(_s(item))])})
                            )
                        ]
                    )
                ]
            )
        }

在一開始，因為new操作符，所以this指向了vm，通過with我們將vm這個對象放在作用域鏈的頂部，因為在函數(shù)內(nèi)部我們會多次調(diào)用vm內(nèi)部的屬性，所以使用with可以縮短變量長度，提供系統(tǒng)運行效率。

其中的_c函數(shù)表示的是創(chuàng)建一個新的html元素，其基本用法為：

                _c(element,{attrs},[children...])

其中的element表示所要創(chuàng)建的html元素類型，attrs表示所要創(chuàng)建的元素的屬性，children表示該html元素的子元素。

_v函數(shù)表示創(chuàng)建一個文本節(jié)點，_l函數(shù)表示創(chuàng)建一個數(shù)組。

最終render函數(shù)返回的是一個虛擬DOM。

模板渲染為html分為兩種情況，第一種是初次渲染的時候，第二種是渲染之后數(shù)據(jù)發(fā)生改變的時候，它們都需要調(diào)用updateComponent,其形式如下：

vm._update(vnode){
  const prevVnode = vm._vnode
  vm._vnode = vnode
  if (!prevVnode){
    vm.$el = vm.__patch__(vm.$el,vnode)
  } else {
    vm.$el = vm.__patch__(prevVnode,vnode)
  }
}

function updateComponent(){
  vm._update(vm._render())
}

首先讀取當(dāng)前的虛擬DOM——vm._vnode,判斷其是否為空，若為空，則為初次渲染，將虛擬DOM全部渲染到所對應(yīng)的容器當(dāng)中（vm.$el），若不為空，則是數(shù)據(jù)發(fā)生了修改，通過響應(yīng)式我們可以監(jiān)聽到這一情況，使用diff算法完成新舊對比并修改。