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

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

如何理解 MVVM

如何實(shí)現(xiàn) MVVM

是否解讀過(guò) Vue 的源碼

    
    submit


    

  

    
    submit
  
  

    

      
{{item}}
    
  

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

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

以數(shù)據(jù)驅(qū)動(dòng)視圖，只關(guān)心數(shù)據(jù)變化，DOM操作被封裝

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

MVC （Model View Controller）

MVVM （Model View ViewModel）

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

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

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

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

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

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); // 獲取屬性的時(shí)候，如何監(jiān)聽(tīng)
obj.age = 26; // 賦值屬性的時(shí)候，如何監(jiān)聽(tīng)

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

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

  

    
    submit
  
  

    

      
{{item}}
    
  

本質(zhì)： 字符串

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

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

最終還要轉(zhuǎn)換為 html 來(lái)顯示

模板最終必須轉(zhuǎn)換成 JS 代碼

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

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

with -- 實(shí)際開(kāi)發(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}}

模板將變成下面這個(gè)樣子：

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實(shí)現(xiàn)的todolist為例：

with(this){  // this 就是 vm
    return _c( // _c創(chuàng)建一個(gè)標(biāo)簽
        "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 其實(shí)相當(dāng)于 snabbdom 中的 h 函數(shù)

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

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

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

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

vue 的整個(gè)實(shí)現(xiàn)流程

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

with 的用法

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

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

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

render 函數(shù)返回 vnode

第二部： 響應(yīng)式開(kāi)始監(jiān)聽(tīng)

Object.defineProperty

將 data 的屬性代理到 vm 上

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

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

創(chuàng)建了一個(gè)前端學(xué)習(xí)交流群，感興趣的朋友，一起來(lái)嗨呀！