MVVM 的三大要素

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

什么是響應(yīng)式

• 演示

<div id="app">
  <p>{{name}}</p>
  <p>{{age}}</p>
</div>

var vm = new Vue({
  el: "#app",
  data: {
    name: "hank",
    age: "18"
  }
});

思考

• 修改 data 屬性后, vue 怎么立刻監(jiān)聽(tīng)到 data 的屬性修改
• data 屬性 怎么代理到 vue 上的, 即 vm.name 怎么能獲取到 data 里的屬性

Object.defineProperty

• MDN Object.defineProperty

var obj = {};

(function(obj) {
  // 定義一個(gè)內(nèi)部變量 , 外部無(wú)法訪(fǎng)問(wèn)
  var _name = "hank";

  // 使用 defindProperty 定義屬性
  Object.defineProperty(obj, "name", {
    // 當(dāng) obj.name 獲取的時(shí)候調(diào)取 get 方法
    get: function() {
      console.log("get", _name); // 監(jiān)聽(tīng)
      return _name;
    },
    // 當(dāng) obj.name 設(shè)置的時(shí)候調(diào)取 set 方法
    set: function(newVal) {
      console.log("set", newVal); // 監(jiān)聽(tīng)
      _name = newVal;
    }
  });
}(obj)

console.log(obj.name)
// console 先打印 => gethank
// console 然后打印 obj.name 的值 => hank

obj.name = 'chang'
// console 先打印 => setchang
// 然后 obj.name 的值才被更改為 chang

模擬

var vm = {};
var data = {
  name: "hank",
  age: 18
};

// 把遍歷要用到的變量先聲明, 讓代碼更直觀(guān).
var key;
for (key in data) {
  // 閉包的使用, 綁定 key 的值,
  (function(key) {
    Object.defineProperty(vm, key, {
      get: function() {
        console.log("get", data[key]); // 監(jiān)聽(tīng)
        return data[key];
      },
      // 監(jiān)聽(tīng) 在這里可以做操作 比如修改DOM的內(nèi)容, 實(shí)現(xiàn)vue的效果
      set: function(newVal) {
        console.log("set", newVal);
        data[key] = newVal;
      }
    });
  })(key);
}

模板引擎: vue 的模板如何被解析, 指令如何處理

• 模板是什么
  • 模板的本質(zhì)就是 字符串
  • 有邏輯的
  • 最終轉(zhuǎn)化為一個(gè) js 函數(shù) (render 函數(shù))

渲染: vue 的模板被渲染成 html, 以及渲染過(guò)程

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

1. 解析模板成 render 函數(shù)
2. 響應(yīng)式開(kāi)始監(jiān)聽(tīng)
3. 首次渲染, 顯示頁(yè)面, 且綁定依賴(lài)
4. data 屬性變化, 觸發(fā) rerender

解析模板成 render 函數(shù)

• 模板中所有的信息都被 render函數(shù)包含
• 模板中用到的 data 中的屬性, 都被變成了 js變量
• 模板中的 v-model v-for v-on 都變成了 js邏輯
• render 函數(shù)返回 vnode

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

• Object.defindProperty
• 將 data 屬性代理到 vue 實(shí)例上

首次渲染, 顯示頁(yè)面, 且綁定依賴(lài)

• 初次渲染, 執(zhí)行 updateComponent, 執(zhí)行 vm._render()
• 執(zhí)行 render 函數(shù), 會(huì)訪(fǎng)問(wèn)到 vm.list 和 vm.title
• 會(huì)被響應(yīng)式的 get 方法監(jiān)聽(tīng)到
• 執(zhí)行 updateComponent, 會(huì)走到 vdom 的 patch 方法
• patch 將 vnode 渲染成 DOM, 初次渲染完成

為什么監(jiān)聽(tīng) get

• data 中有很多屬性, 有些被用到, 有些可能不會(huì)被用到
• 未被用到的屬性, set的時(shí)候我們也無(wú)需關(guān)心
• 避免不必要的重復(fù)渲染