理解數(shù)據(jù)驅(qū)動(dòng)視圖原理

Lyux 發(fā)布于2019-08-26 11:35 / 461人閱讀

摘要：源代碼響應(yīng)式原理數(shù)據(jù)觀察數(shù)據(jù)遞歸無反應(yīng)無反應(yīng)無反應(yīng)包括無反應(yīng)講解只所以能實(shí)現(xiàn)雙向綁定，是利用里面的這就是為什么只支持及以上從以上代碼可以看出，對象屬性的刪除和添加新屬性，不會(huì)觸發(fā)對應(yīng)的方法對于初始化沒有定義的屬性，設(shè)置值不能觸發(fā)視圖層渲染在

源代碼1

// 響應(yīng)式原理 defineProperty
 
//數(shù)據(jù)
const data = {
  obj: {
    a: 4,
    b: 6
  },
  arr: [1, 5, 9]
}
 
// 觀察數(shù)據(jù)
function observe(data) {
  Object.keys(data).forEach(function(key) {
    let value = data[key]
    if (value && typeof value === "object") observe(value) // 遞歸
    Object.defineProperty(data, key, {
      get() {
        console.log(`get ${key}`)
        return value
      },
      set(newVal) {
        console.log(`set ${key} = ${newVal}`)
        if (newVal && typeof newVal === "object") observe(newVal)
        value = newVal
      }
    })
  })
 
}
 
observe(data)
 
let obj = data.obj
// get obj
let arr = data.arr
// get arr
 
 
obj.a = 8
// set a = 8
obj.a
// get a
delete obj.b
// 無反應(yīng)
obj.c = 9
// 無反應(yīng)
obj.c
// 無反應(yīng)
 
data.obj = {...obj, c: 7}
// set obj = [object Object]
obj = data.obj
// get obj
 
obj.c = 9
// set c = 9
obj.c
// get c
 
arr.push(9) // 包括pop,shift,unshift,splice,sort,reverse
// 無反應(yīng)
data.arr = [...arr,9]
// set arr = 1,5,9,9,9

講解

vue只所以能實(shí)現(xiàn)雙向綁定，是利用es5里面的Object.defineProperty（這就是為什么vue只支持es9及以上）

從以上代碼可以看出，對象屬性的刪除（delete obj.b）和添加新屬性（obj.c = 9），不會(huì)觸發(fā)對應(yīng)的set方法（vue對于初始化沒有定義的屬性，設(shè)置值不能觸發(fā)視圖層渲染）

在項(xiàng)目開發(fā)中肯定會(huì)遇到有些屬性，初始化時(shí)沒有定義，通過改變其父元素的值去實(shí)現(xiàn)（data.obj = {...obj, c: 7}），父元素的值改變后，會(huì)觸發(fā)其set方法，會(huì)對其子元素重新進(jìn)行雙向綁定

對于數(shù)組的處理，push,pop,shift,unshift,splice,sort,reverse都不會(huì)觸發(fā)set，但我們看到的vue，這些方法是會(huì)觸發(fā)視圖層的變化，這是因?yàn)関ue針對這些方法做了特殊的處理，原理如

const arr = [5, 9, 8]
const push = Array.prototype.push
Array.prototype.push = function () {
  const result = push.apply(this, arguments)
  console.log("做自己喜歡的事情")
  return result
}
arr.push(7)
console.log(arr)

vue代碼片段

/*
 * not type checking this file because flow doesn"t play well with
 * dynamically accessing methods on Array prototype
 */
 
var arrayProto = Array.prototype;
var arrayMethods = Object.create(arrayProto);[
  "push",
  "pop",
  "shift",
  "unshift",
  "splice",
  "sort",
  "reverse"
]
.forEach(function (method) {
  // cache original method
  var original = arrayProto[method];
  def(arrayMethods, method, function mutator () {
    var args = [], len = arguments.length;
    while ( len-- ) args[ len ] = arguments[ len ];
 
    var result = original.apply(this, args);
    var ob = this.__ob__;
    var inserted;
    switch (method) {
      case "push":
      case "unshift":
        inserted = args;
        break
      case "splice":
        inserted = args.slice(2);
        break
    }
    if (inserted) { ob.observeArray(inserted); }
    // notify change
    ob.dep.notify();
    return result
  });
});
 
/*  */

源代碼2

// 響應(yīng)式原理 defineProperty
 
//數(shù)據(jù)
const data = {
  obj: {
    a: 4,
    b: 6
  },
  arr: [1, 5, 9]
}
function Dep() {}
Dep.target = null // 當(dāng)前函數(shù)
function watcher(fn) { // 函數(shù)
  Dep.target = fn
  fn()
}
 
// 初始化
function init() {
  const a = () => {
    console.log(data.obj.a)
  }
  const mix = () => {
    const c = data.obj.a + data.obj.b
    console.log(c)
  }
  watcher(a)
  watcher(mix)
}
 
// 觀察數(shù)據(jù)
function observe(data) {
  Object.keys(data).forEach(function(key) {
    let value = data[key]
    const dep = [] // 存放函數(shù)的容器
    if (value && typeof value === "object") observe(value) // 遞歸
    Object.defineProperty(data, key, {
      get() {
        dep.push(Dep.target)
        return value
      },
      set(newVal) {
        if (newVal && typeof newVal === "object") observe(newVal)
        value = newVal
        dep.forEach(fn => fn())
      }
    })
  })
 
}
 
observe(data)
init()
 
setTimeout(() => {
  data.obj.a = 10
}, 2000)

講解

以上代碼可以看出，當(dāng)obj.a值變化的時(shí)候，會(huì)觸發(fā)a函數(shù)和mix函數(shù)，具體執(zhí)行步驟如下

先將屬性a綁定了對應(yīng)的set和get方法

初始化init()時(shí)，會(huì)調(diào)用watcher(a)，此時(shí) Dep.target等于a函數(shù)

執(zhí)行a()函數(shù)時(shí)，會(huì)執(zhí)行里面的console.log(data.obj.a)

data.obj.a會(huì)調(diào)用a的get方法，此時(shí)dep.push(Dep.target)就相當(dāng)于dep.push(a函數(shù))，mix函數(shù)同理

當(dāng)屬性a的值改變時(shí)（data.obj.a = 10），會(huì)觸發(fā)其set方法，dep.forEach(fn => fn())將a函數(shù)和mix函數(shù)循環(huán)執(zhí)行一遍，從而實(shí)現(xiàn)了數(shù)據(jù)驅(qū)動(dòng)視圖

注意點(diǎn)

在驅(qū)動(dòng)視圖之前都要先賦值，比如源代碼2的(value = newVal)和(dep.forEach(fn => fn()))不能互換位置

以上代碼不是vue的源代碼，但原理是一致的，幫助開發(fā)者更好的理解自己寫的代碼