Vue整體結構

Vue: 把data中的成員注入到Vue實例，并且把data中的成員轉換成getter, setter

Observer: 劫持對象的所有屬性， 如有變動可拿最新的值， 通知Dep

Compiler：解析每一個元素中的指令/插值表達式, 替換成相應的數據

Dep: 發布者。 收集觀察者，當數據變化是， 通知所有的觀察者

Watcher: 觀察者。 數據變化更新視圖

Vue（初始化）

• 功能
• 負責接收初始化的參數(選項）
• 負責把 data 中的屬性注入到 Vue 實例，轉換成 getter/setter
• 負責調用 observer 監聽 data 中所有屬性的變化
• 負責調用 compiler 解析指令/插值表達式
• 結構

• 代碼

class Vue { constructor(options) {// 1. 通過屬性保存選項的數據this.$options = optionsconst { el, data } = optionsthis.$data = data || {}// 如果是選擇器， 則獲取DOM元素this.$el = typeof el === 'string' ? document.querySelector(el) : el// 2. 把data中的成員轉換成getter和setter，注入到vue實例中this._proxyData(data)// 3. 調用observer對象，監聽數據的變化new Observer(data)// 4. 調用compiler對象，解析指令和差值表達式new Compiler(this)}/*** 代理數據, 把data里面的屬性轉換成getter, setter* @param {*} data */_proxyData(data) {// 遍歷data中的所有屬性Object.keys(data).forEach(key => { // 把data的屬性注入到vue實例中Object.defineProperty(this, key, {enumerable: true, // 可枚舉configurable: true, // 可配置,get() { return data[key]},set(newValue) { if (data[key] === newValue) returndata[key] = newValue}})})} }

Observer（監視者）

• 功能
• 把data選項中的每一個屬性， 轉換成響應式數據
• 如果data中的屬性也是對象， 也應該把該屬性轉換成響應式數據
• 數據發生變化， 發送通知
• 結構

• 代碼

/*** 監視者*/ class Observer { constructor(data) {this.walk(data)}/*** 遍歷對象的所有屬性* @param {*} data */walk(data) { // 1. 判斷data是否是對象if (!data || typeof data !== 'object') return// 2. 遍歷data對象的所有屬性Object.keys(data).forEach(key => { this.defineReactive(data, key, data[key])})}/*** 轉換成響應式， 把屬性轉換成getter, setter* @param {*} obj 對象* @param {*} key 鍵* @param {*} val 值*/defineReactive(obj, key, val) { const that = this// 負責收集依賴，并發送通知const dep = new Dep()// 如果val是對象，把val內部的屬性轉換成響應式數據，遞歸調用this.walk(val)Object.defineProperty(obj, key, {enumerable: true,configurable: true,get() { // 收集依賴, target就是Watcher實例Dep.target && dep.addSub(Dep.target)return val // obj[key] 會觸發遞歸， 所以上面方法需要傳遞一個val},set(newVal) { if (val === newVal) returnval = newVal// 如果賦值的值是一個新的對象的話that.walk(newVal)// 發送通知dep.notify()}})} }

Compiler（解析器）

• 功能
• 負責編譯模板，解析指令/插值表達式
• 負責頁面的首次渲染
• 當數據變化后重新渲染視圖
• 結構

• 代碼

/*** 編譯器*/ class Compiler {constructor (vm) {this.el = vm.$elthis.vm = vmthis.compile(this.el)}/*** 編譯魔板， 處理文本節點和元素節點* @param {*} el 節點*/compile (el) {const childNodes = el.childNodes // 偽數組Array.from(childNodes).forEach(node => {if (this.isTextNode(node)) {// 處理文本節點this.compileText(node)} else if (this.isElementNode(node)) {// 處理元素節點this.comileElement(node)}// 判斷node節點，是否有子節點，如果有子節點，要遞歸調用compileif (node.childNodes && node.childNodes.length) {this.compile(node)}})}/*** 編譯元素節點， 處理指令* @param {*} node 元素節點*/comileElement(node) {const attributes = node.attributes // 偽數組// 遍歷所有的屬性節點Array.from(node.attributes).forEach(attr => {// 判斷屬性是否是指令let attrName = attr.nameif (this.isDirective(attrName)) {// v-text => textattrName = attrName.substr(2)let key = attr.value // 屬性值this.update(node, key, attrName)}})}/*** 編譯解析節點的指令， 并把指令解析出對應的值* @param {*} node 節點* @param {*} key 屬性值對應的字段* @param {*} attrName 屬性名稱， 用于拼接后續的方法名*/update(node, key, attrName) {let updateFn = this[`${attrName}Updater`] // 方法名稱updateFn && updateFn.call(this, node, this.vm[key], key) // 調用， call改變this指向}/*** 處理v-text指令* @param {*} node 節點* @param {*} value 文本內容* @param {*} key 創建Watcher所需*/textUpdater(node, value, key) { node.textContent = value // 初次渲染new Watcher(this.vm, key, (newValue) => { node.textContent = newValue})}/*** 處理v-model指令* @param {*} node * @param {*} value * @param {*} key 創建Watcher所需*/modelUpdater(node, value, key) { node.value = value // 初次渲染new Watcher(this.vm, key, (newVal) => { node.value = newVal})// 雙向綁定node.addEventListener('input', () => {this.vm[key] = node.value})}/*** 編譯文本節點， 處理插值表達式* @param {*} node 元素節點*/compileText (node) {let reg = /{{(.+?)}}/ // 正則const content = node.textContent // 文本內容if (reg.test(content)) {let key = RegExp.$1.trim()node.textContent = content.replace(reg, this.vm[key]) // 初次渲染// 創建watcher對象，當數據改變更新視圖, key對應的值發生改變時， 會調用回調函數new Watcher(this.vm, key, (newValue) => { node.textContent = newValue})} }/*** 判斷元素屬性是否是指令* @param {*} attrName 屬性名稱*/isDirective (attrName) {return attrName.startsWith('v-')}/*** 判斷節點是否是文本節點* @param {*} node 節點*/isTextNode (node) {return node.nodeType === 3}/*** 判斷節點是否是元素節點* @param {*} node 節點*/isElementNode (node) {return node.nodeType === 1} }

Dep（Dependency 發布者）

• 功能
• 收集依賴，添加觀察者(watcher)
• 通知所有觀察者
• 結構

• 代碼

/*** 發布者* 每一個監視的屬性， 都具有一個對應的發布者對象*/ class Dep { constructor() { // 存儲所有的觀察者this.watchs = []}/*** 添加觀察者（監視的屬性對應的觀察者）* 在監察的屬性的getter 方法里添加觀察者* @param {*} watch 觀察者*/addSub(watch) { if (watch && watch.update) { // 觀察者， 必須具有update方法this.watchs.push(watch)}}/*** 給所有的觀察者， 發送通知*/notify() {this.watchs.forEach(watch => { watch.update()})} }

Watcher（觀察者）

• 功能
• 數據變化是觸發依賴， dep通知所有的watcher實例更新視圖
• 自身實例化的時候，往dep對象中添加自己
• 結構

• 代碼

/*** 觀察者, 對應的是網頁的節點中的的指令屬性* 例如：v-text:xxx、 {{xxx}}*/ class Watcher { /*** @param {*} vm vue實例* @param {*} key 觀察的具體屬性* @param {*} cb 屬性值發生變化后的對應的回調函數(更新DOM的方法)*/constructor(vm, key, cb) { this.vm = vm// data中的屬性名稱this.key = key// 回調函數負責更新視圖this.cb = cb// 把watcher對象記錄到Dep類的靜態屬性target, 在創建Watcher實例的時候Dep.target = this// 記錄歷史值, vm[key] 觸發監察屬性的getter方法,把觀察者， 添加到發布者的數組中this.oldValue = vm[key]Dep.target = null // 清除， 防止重復添加}/*** 當數據發生變化的時候更新視圖*/update() { let newValue = this.vm[this.key]if (this.oldValue === newValue) returnthis.cb(newValue) // 更新視圖} }

測試

• 代碼

<!DOCTYPE html> <html lang="cn"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Vue簡化版</title> </head> <body><div id="app"><h1>差值表達式</h1><h3>{{ msg }}</h3><h3>{{ count }}</h3><h1>v-text</h1><div v-text="msg"></div><h1>v-model</h1><input type="text" v-model="msg"><input type="text" v-model="count"></div><script src="./js/dep.js"></script><script src="./js/watcher.js"></script><script src="./js/compiler.js"></script><script src="./js/observer.js"></script><script src="./js/vue.js"></script><script>let vm = new Vue({el: '#app',data: {msg: 'Hello Vue',count: 100,person: { name: 'zs' }}})console.log(vm.msg)// vm.msg = { test: 'Hello' }vm.test = 'abc'</script> </body> </html>

總結

• 整體流程

• Vue
• 記錄傳入的選項，設置 $data/$el
• 把 data 的成員注入到 Vue 實例
• 負責調用 Observer 實現數據響應式處理（數據劫持）
• 負責調用 Compiler 編譯指令/插值表達式等
• Observer
• 數據劫持
• 負責把 data 中的成員轉換成 getter/setter
• 負責把多層屬性轉換成 getter/setter
• 如果給屬性賦值為新對象，把新對象的成員設置為 getter/setter
• 添加 Dep 和 Watcher 的依賴關系
• 數據變化發送通知
• Compiler
• 負責編譯模板，解析指令/插值表達式
• 負責頁面的首次渲染過程
• 當數據變化后重新渲染
• Dep
• 收集依賴，添加訂閱者(watcher)
• 通知所有訂閱者
• Watcher
• 自身實例化的時候往dep對象中添加自己
• 當數據變化dep， 通知所有的watcher實例的updater更新視圖

總結

以上是生活随笔為你收集整理的vue 将行转换成对象_Vue简化版实现的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。