摘要：原文博客地址如何理解如何實現(xiàn)是否解讀過的源碼與框架的區(qū)別實現(xiàn)實現(xiàn)獨立初始化實例兩者的區(qū)別數(shù)據(jù)和視圖的分離，解耦開放封閉原則，對擴展開放，對修改封閉在中在代碼中操作視圖和數(shù)據(jù)，混在一塊了以數(shù)據(jù)驅動視圖，只關心數(shù)據(jù)變化，

原文博客地址：https://finget.github.io/2018/05/31/mvvm-vue/

如何理解 MVVM

如何實現(xiàn) MVVM

是否解讀過 Vue 的源碼

    
    submit


    

  

    
    submit
  
  

    

      
{{item}}
    
  

數(shù)據(jù)和視圖的分離，解耦（開放封閉原則，對擴展開放，對修改封閉）

在jQuery中在jQuery代碼中操作視圖和數(shù)據(jù)，混在一塊了

以數(shù)據(jù)驅動視圖，只關心數(shù)據(jù)變化，DOM操作被封裝

只改數(shù)據(jù)，視圖自動更新

MVC （Model View Controller）

MVVM （Model View ViewModel）

View 通過 事件綁定 (DOM Listeners) 操作Model; Model通過 數(shù)據(jù)綁定 (Data Bindings)操作View。

響應式： Vue 如何監(jiān)聽到 data 的每個屬性變化？

模板引擎： Vue 的模板如何被解析，指令如何處理？

渲染：Vue 的模板如何被渲染成Html？

修改 data 屬性之后， Vue 立刻監(jiān)聽到

data 屬性被代理到 vm上

var vm = new Vue({
  el: "#app",
  data: {
    name: "zhangsan",
    age: 20
  }
})
// vm.name = "zhangsan"
// vm.age = "20"

var obj = {
  name: "zhangsan",
  age: 25
}
console.log(obj.name); // 獲取屬性的時候，如何監(jiān)聽
obj.age = 26; // 賦值屬性的時候，如何監(jiān)聽

上面是無法監(jiān)聽對象的屬性的訪問以及賦值操作的，直接就產(chǎn)生了操作的結果。

var obj = {}
var _name = "shangsan"
Object.defineProperty(obj, "name", {
  get: function () {
    console.log("get", _name) // 監(jiān)聽
    return _name
  },
  set: function (newVal) {
    console.log("set", newVal)  // 監(jiān)聽
    _name = newVal
  }
})
console.log(obj.name); // 可以監(jiān)聽到
obj.name = "lisi"; // 可以監(jiān)聽到

  

    
    submit
  
  

    

      
{{item}}
    
  

本質： 字符串

有邏輯， 如 v-if v-for 等

與 html 標簽格式很像，但有很大區(qū)別（html是靜態(tài)的，模板是動態(tài)的）

最終還要轉換為 html 來顯示

模板最終必須轉換成 JS 代碼

有邏輯（v-if v-for 等），必須用JS才能實現(xiàn)（圖靈完備）

因此，模板最重要轉成一個JS函數(shù)（render函數(shù)）

with -- 實際開發(fā)不推薦用

var obj = {
  name: "zhangsan",
  age: 20,
  getAddress: function () {
    alert("beijing")
  }
}
// 不使用with
function fn() {
  alert(obj.name)
  alert(obj.age)
  obj.getAddress()
}
fn()

// 使用with
function fn1() {
  with(obj) {
    alert(age)
    alert(name)
    getAddress()
  }
}
fn1()

render

  
{{price}}

模板將變成下面這個樣子：

function render() {
  with(this) {  // this 就是 vm
    return _c(
      "div",
      {
        attrs: {"id": "app"}
      },
      [
        _c("p", [_v(_s(price))])
      ]
    )
  }
}

看todo-list的render

在vue源碼里alert render 函數(shù)

以上面vue實現(xiàn)的todolist為例：

with(this){  // this 就是 vm
    return _c( // _c創(chuàng)建一個標簽
        "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))])}) // _l 解析 v-for 循環(huán)
                )
            ]
          )
        ]
    )
}

render 與 Vdom

可以先看一下virtualDom

vm._c 其實相當于 snabbdom 中的 h 函數(shù)

render 函數(shù)執(zhí)行之后，返回的是 vnode

updateComponent 中實現(xiàn)了 vdom 的 patch

頁面首次渲染 執(zhí)行updateComponent

data 中每次修改屬性， 執(zhí)行 updateComponent

vue 的整個實現(xiàn)流程

第一步： 解析模板成render函數(shù)

with 的用法

模板中的所有信息都被render函數(shù)包含

模板中用到的data中的屬性，都變成了js變量

模板中的v-model v-if v-on 都變成了 js邏輯

render 函數(shù)返回 vnode

第二部： 響應式開始監(jiān)聽

Object.defineProperty

將 data 的屬性代理到 vm 上

第三步： 首次渲染，顯示頁面，且綁定依賴

第四步： data 屬性變化，觸發(fā) rerender

創(chuàng)建了一個前端學習交流群，感興趣的朋友，一起來嗨呀！