詳解Vue中的MVVM原理和實現(xiàn)方法

更新時間：2020年07月15日 09:16:15 作者：小羽羽

這篇文章主要介紹了Vue中的MVVM原理和實現(xiàn)方法，文中講解非常細致，幫助大家更好的理解和學(xué)習(xí)，感興趣的朋友可以了解下

下面由我阿巴阿巴的詳細走一遍Vue中MVVM原理的實現(xiàn)，這篇文章大家可以學(xué)習(xí)到：

1.Vue數(shù)據(jù)雙向綁定核心代碼模塊以及實現(xiàn)原理

2.訂閱者-發(fā)布者模式是如何做到讓數(shù)據(jù)驅(qū)動視圖、視圖驅(qū)動數(shù)據(jù)再驅(qū)動視圖

3.如何對元素節(jié)點上的指令進行解析并且關(guān)聯(lián)訂閱者實現(xiàn)視圖更新

一、思路整理

實現(xiàn)的流程圖：

我們要實現(xiàn)一個類MVVM簡單版本的Vue框架,就需要實現(xiàn)一下幾點：

1、實現(xiàn)一個數(shù)據(jù)監(jiān)聽Observer，對數(shù)據(jù)對象的所有屬性進行監(jiān)聽，數(shù)據(jù)發(fā)生變化可以獲取到最新值通知訂閱者。

2、實現(xiàn)一個解析器Compile解析頁面節(jié)點指令，初始化視圖。

3、實現(xiàn)一個觀察者Watcher，訂閱數(shù)據(jù)變化同時綁定相關(guān)更新函數(shù)。并且將自己放入觀察者集合Dep中。Dep是Observer和Watcher的橋梁，數(shù)據(jù)改變通知到Dep，然后Dep通知相應(yīng)的Watcher去更新視圖。

二、實現(xiàn)

以下采用ES6的寫法，比較簡潔，所以大概在300多行代碼實現(xiàn)了一個簡單的MVVM框架。

1、實現(xiàn)html頁面

按Vue的寫法在頁面定義好一些數(shù)據(jù)跟指令，引入了兩個JS文件。先實例化一個MVue的對象，傳入我們的el，data，methods這些參數(shù)。待會再看Mvue.js文件是什么？

html

<body>
 <div id="app">
  <h2>{{person.name}} --- {{person.age}}</h2>
  <h3>{{person.fav}}</h3>
  <h3>{{person.a.b}}</h3>
  <ul>
   <li>1</li>
   <li>2</li>
   <li>3</li>
  </ul>
  <h3>{{msg}}</h3>
  <div v-text="msg"></div>
  <div v-text="person.fav"></div>
  <div v-html="htmlStr"></div>
  <input type="text" v-model="msg">
  <button v-on:click="click111">按鈕on</button>
  <button @click="click111">按鈕@</button>
 </div>
 <script src="./MVue.js"></script>
 <script src="./Observer.js"></script>
 <script>
  let vm = new MVue({
   el: '#app',
   data: {
    person: {
     name: '星哥',
     age: 18,
     fav: '姑娘',
     a: {
      b: '787878'
     }
    },
    msg: '學(xué)習(xí)MVVM實現(xiàn)原理',
    htmlStr: '<h4>大家學(xué)的怎么樣</h4>',
   },
   methods: {
    click111() {
     console.log(this)
     this.person.name = '學(xué)習(xí)MVVM'
     // this.$data.person.name = '學(xué)習(xí)MVVM'
    }
   }
  })
 </script>

</body>

2、實現(xiàn)解析器和觀察者

MVue.js

// 先創(chuàng)建一個MVue類,它是一個入口
Class MVue {
  construction(options) {
    this.$el = options.el
    this.$data = options.data
    this.$options = options
  }
  if(this.$el) {
    // 1.實現(xiàn)一個數(shù)據(jù)的觀察者   --先看解析器，再看Obeserver
    new Observer(this.$data)
    // 2.實現(xiàn)一個指令解析器
    new Compile(this.$el,this)
  }
}

// 定義一個Compile類解析元素節(jié)點和指令
class Compile {
  constructor(el,vm) {
    // 判斷el是否是元素節(jié)點對象，不是就通過DOM獲取
    this.el = this.isElementNode(el) ? el : document.querySelector(el)
    this.vm = vm
    // 1.獲取文檔碎片對象，放入內(nèi)存中可以減少頁面的回流和重繪
    const fragment = this.node2Fragment(this.el)

    // 2.編輯模板
    this.compile(fragment)

    // 3.追加子元素到根元素(還原頁面)
    this.el.appendChild(fragment)
  }

  // 將元素插入到文檔碎片中
  node2Fragment(el) {
    const f = document.createDocumnetFragment();
    let firstChild
    while(firstChild = el.firstChild) {
      // appendChild
      // 將已經(jīng)存在的節(jié)點再次插入，那么原來位置的節(jié)點自動刪除，并在新的位置重新插入。
      f.appendChild(firstChild)
    }
    // 此處執(zhí)行完，頁面已經(jīng)沒有元素節(jié)點了
    return f
  }

  // 解析模板
  compile(frafment) {
    // 1.獲取子節(jié)點
    conts childNodes = fragment.childNodes;
    [...childNodes].forEach(child => {
      if(this.isElementNode(child)) {
        // 是元素節(jié)點
        // 編譯元素節(jié)點
        this.compileElement(child)
      } else {
        // 文本節(jié)點
        // 編譯文本節(jié)點
        this.compileText(child)
      }

      // 嵌套子節(jié)點進行遍歷解析
      if(child.childNodes && child.childNodes.length) {
        this.compule(child)
      }
    })
  }

  // 判斷是元素節(jié)點還是屬性節(jié)點
  isElementNode(node) {
    // nodeType屬性返回 以數(shù)字值返回指定節(jié)點的節(jié)點類型。1-元素節(jié)點 2-屬性節(jié)點
    return node.nodeType === 1
  }

  // 編譯元素節(jié)點
  compileElement(node) {
    // 獲得元素屬性集合
    const attributes = node.attributes
    [...attributes].forEach(attr => {
      const {name, value} = attr
      if(this.isDirective(name)) { // 判斷屬性是不是以v-開頭的指令
        // 解析指令（v-mode v-text v-on:click 等...）
        const [, dirctive] = name.split('-')
        const [dirName, eventName] = dirctive.split(':')
        // 初始化視圖 將數(shù)據(jù)渲染到視圖上
        compileUtil[dirName](node, value, this.vm, eventName)

        // 刪除有指令的標簽上的屬性
        node.removeAttribute('v-' + dirctive)
      } else if (this.isEventName(name)) { //判斷屬性是不是以@開頭的指令
        // 解析指令
        let [, eventName] = name.split('@')
        compileUtil['on'](node,val,this.vm, eventName)

        // 刪除有指令的標簽上的屬性
        node.removeAttribute('@' + eventName)
      } else if(this.isBindName(name)) { //判斷屬性是不是以:開頭的指令
        // 解析指令
        let [, attrName] = name.split(':')
        compileUtil['bind'](node,val,this.vm, attrName)

        // 刪除有指令的標簽上的屬性
        node.removeAttribute(':' + attrName)
      }
    })
  }

  // 編譯文本節(jié)點
  compileText(node) {
    const content = node.textContent
    if(/\{\{(.+?)\}\}/.test(content)) {
      compileUtil['text'](node, content, this.vm)
    }
  }

  // 判斷屬性是不是指令
  isDirective(attrName) {
    return attrName.startsWith('v-')
  }
  // 判斷屬性是不是以@開頭的事件指令
  isEventName(attrName) {
    return attrName.startsWith('@')
  }
  // 判斷屬性是不是以:開頭的事件指令
  isBindName(attrName) {
    return attrName.startsWith(':')
  }
}


// 定義一個對象，針對不同指令執(zhí)行不同操作
const compileUtil = {
  // 解析參數(shù)(包含嵌套參數(shù)解析)，獲取其對應(yīng)的值
  getVal(expre, vm) {
    return expre.split('.').reduce((data, currentVal) => {
      return data[currentVal]
    }, vm.$data)
  },
  // 獲取當前節(jié)點內(nèi)參數(shù)對應(yīng)的值
  getgetContentVal(expre,vm) {
    return expre.replace(/\{\{(.+?)\}\}/g, (...arges) => {
      return this.getVal(arges[1], vm)
    })
  },
  // 設(shè)置新值
  setVal(expre, vm, inputVal) {
    return expre.split('.').reduce((data, currentVal) => {
      return data[currentVal] = inputVal
    }, vm.$data)
  },

  // 指令解析：v-test
  test(node, expre, vm) {
    let value;
    if(expre.indexOf('{{') !== -1) {
      // 正則匹配{{}}里的內(nèi)容
      value = expre.replace(/\{\{(.+?)\}\}/g, (...arges) => {

        // new watcher這里相關(guān)的先可以不看，等后面講解寫到觀察者再回頭看。這里是綁定觀察者實現(xiàn)   的效果是通過改變數(shù)據(jù)會觸發(fā)視圖，即數(shù)據(jù)=》視圖。
        // 沒有new watcher 不影響視圖初始化(頁面參數(shù)的替換渲染)。
        // 訂閱數(shù)據(jù)變化，綁定更新函數(shù)。
        new watcher(vm, arges[1], () => {
          // 確保 {{person.name}}----{{person.fav}} 不會因為一個參數(shù)變化都被成新值
          this.updater.textUpdater(node, this.getgetContentVal(expre,vm))
        })

        return this.getVal(arges[1],vm)
      })
    } else {
      // 同上，先不看
      // 數(shù)據(jù)=》視圖
      new watcher(vm, expre, (newVal) => {
      // 找不到{}說明是test指令，所以當前節(jié)點只有一個參數(shù)變化，直接用回調(diào)函數(shù)傳入的新值
    this.updater.textUpdater(node, newVal)
     })

      value = this.getVal(expre,vm)
    }

    // 將數(shù)據(jù)替換，更新到視圖上
    this.updater.textUpdater(node,value)
  },
  //指令解析： v-html
  html(node, expre, vm) {
    const value = this.getVal(expre, vm)

    // 同上，先不看
    // 綁定觀察者 數(shù)據(jù)=》視圖
    new watcher(vm, expre (newVal) => {
      this.updater.htmlUpdater(node, newVal)
    })

    // 將數(shù)據(jù)替換，更新到視圖上
    this.updater.htmlUpdater(node, newVal)
  },
  // 指令解析：v-mode
  model(node,expre, vm) {
    const value = this.getVal(expre, vm)

    // 同上，先不看
    // 綁定觀察者 數(shù)據(jù)=》視圖
    new watcher(vm, expre, (newVal) => {
      this.updater.modelUpdater(node, newVal)
    })

    // input框 視圖=》數(shù)據(jù)=》視圖
    node.addEventListener('input', (e) => {
      //設(shè)置新值 - 將input值賦值到v-model綁定的參數(shù)上
      this.setVal(expre, vm, e.traget.value)
    })
    // 將數(shù)據(jù)替換，更新到視圖上
    this.updater.modelUpdater(node, value)
  },
  // 指令解析： v-on
  on(node, expre, vm, eventName) {
    // 或者指令綁定的事件函數(shù)
    let fn = vm.$option.methods && vm.$options.methods[expre]
    // 監(jiān)聽函數(shù)并調(diào)用
    node.addEventListener(eventName,fn.bind(vm),false)
  },
  // 指令解析： v-bind
  bind(node, expre, vm, attrName) {
    const value = this.getVal(expre,vm)
    this.updater.bindUpdate(node, attrName, value)
  }

// updater對象，管理不同指令對應(yīng)的更新方法
updater: {
    // v-text指令對應(yīng)更新方法
    textUpdater(node, value) {
      node.textContent = value
    },
    // v-html指令對應(yīng)更新方法
    htmlUpdater(node, value) {
      node.innerHTML = value
    },
    // v-model指令對應(yīng)更新方法
    modelUpdater(node,value) {
      node.value = value
    },
    // v-bind指令對應(yīng)更新方法
    bindUpdate(node, attrName, value) {
      node[attrName] = value
    }
  },
}

3、實現(xiàn)數(shù)據(jù)劫持監(jiān)聽

我們有了數(shù)據(jù)監(jiān)聽，還需要一個觀察者可以觸發(fā)更新視圖。因為需要數(shù)據(jù)改變才能觸發(fā)更新，所有還需要一個橋梁Dep收集所有觀察者(觀察者集合)，連接Observer和Watcher。數(shù)據(jù)改變通知Dep，Dep通知相應(yīng)的觀察者進行視圖更新。

Observer.js

// 定義一個觀察者
class watcher {
  constructor(vm, expre, cb) {
    this.vm = vm
    this.expre = expre
    this.cb =cb
    // 把舊值保存起來
    this.oldVal = this.getOldVal()
  }
  // 獲取舊值
  getOldVal() {
    // 將watcher放到targe值中
    Dep.target = this
    // 獲取舊值
    const oldVal = compileUtil.getVal(this.expre, this.vm)
    // 將target值清空
    Dep.target = null
    return oldVal
  }
  // 更新函數(shù)
  update() {
    const newVal = compileUtil.getVal(this.expre, this.vm)
    if(newVal !== this.oldVal) {
      this.cb(newVal)
    }
  }
}


// 定義一個觀察者集合
class Dep {
  constructor() {
    this.subs = []
  }
  // 收集觀察者
  addSub(watcher) {
    this.subs.push(watcher)
  }
  //通知觀察者去更新
  notify() {
    this.subs.forEach(w => w.update())
  }
}



// 定義一個Observer類通過gettr，setter實現(xiàn)數(shù)據(jù)的監(jiān)聽綁定
class Observer {
  constructor(data) {
    this.observer(data)
  }

  // 定義函數(shù)解析data,實現(xiàn)數(shù)據(jù)劫持
  observer (data) {
    if(data && typeof data === 'object') {
      // 是對象遍歷對象寫入getter，setter方法
      Reflect.ownKeys(data).forEach(key => {
        this.defineReactive(data, key, data[key]);
      })
    }
  }

  // 數(shù)據(jù)劫持方法
  defineReactive(obj,key, value) {
    // 遞歸遍歷
    this.observer(data)
    // 實例化一個dep對象
    const dep = new Dep()
    // 通過ES5的API實現(xiàn)數(shù)據(jù)劫持
    Object.defineProperty(obj, key, {
      enumerable: true,
      configurable: false,
      get() {
        // 當讀當前值的時候，會觸發(fā)。
        // 訂閱數(shù)據(jù)變化時，往Dep中添加觀察者
        Dep.target && dep.addSub(Dep.target)
        return value
      },
      set: (newValue) => {
        // 對新數(shù)據(jù)進行劫持監(jiān)聽
        this.observer(newValue)
        if(newValue !== value) {
          value = newValue
        }
        // 告訴dep通知變化
        dep.notify()
      }
    })
  }

}

三、總結(jié)

其實復(fù)雜的地方有三點：

1、指令解析的各種操作有點復(fù)雜饒人，其中包含DOM的基本操作和一些ES中的API使用。但是你靜下心去讀去想，肯定是能理順的。

2、數(shù)據(jù)劫持中Dep的理解，一是收集觀察者的集合，二是連接Observer和watcher的橋梁。

3、觀察者是什么時候進行綁定的？又是如何工作實現(xiàn)了數(shù)據(jù)驅(qū)動視圖，視圖驅(qū)動數(shù)據(jù)驅(qū)動視圖的。

在gitHub上有上述源碼地址，歡迎clone打樁嘗試，還請不要吝嗇一個小星星喲！

以上就是詳解Vue中的MVVM原理和實現(xiàn)方法的詳細內(nèi)容，更多關(guān)于Vue中的MVVM的資料請關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: