Vue整體結(jié)構(gòu)

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

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

Compiler：解析每一個元素中的指令/插值表達式, 替換成相應(yīng)的數(shù)據(jù)

Dep: 發(fā)布者。 收集觀察者，當數(shù)據(jù)變化是， 通知所有的觀察者

Watcher: 觀察者。 數(shù)據(jù)變化更新視圖

Vue（初始化）

• 功能
• 負責接收初始化的參數(shù)(選項）
• 負責把 data 中的屬性注入到 Vue 實例，轉(zhuǎn)換成 getter/setter
• 負責調(diào)用 observer 監(jiān)聽 data 中所有屬性的變化
• 負責調(diào)用 compiler 解析指令/插值表達式
• 結(jié)構(gòu)

• 代碼

class Vue { constructor(options) {// 1. 通過屬性保存選項的數(shù)據(jù)this.$options = optionsconst { el, data } = optionsthis.$data = data || {}// 如果是選擇器， 則獲取DOM元素this.$el = typeof el === 'string' ? document.querySelector(el) : el// 2. 把data中的成員轉(zhuǎn)換成getter和setter，注入到vue實例中this._proxyData(data)// 3. 調(diào)用observer對象，監(jiān)聽數(shù)據(jù)的變化new Observer(data)// 4. 調(diào)用compiler對象，解析指令和差值表達式new Compiler(this)}/*** 代理數(shù)據(jù), 把data里面的屬性轉(zhuǎn)換成getter, setter* @param {*} data */_proxyData(data) {// 遍歷data中的所有屬性O(shè)bject.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（監(jiān)視者）

• 功能
• 把data選項中的每一個屬性， 轉(zhuǎn)換成響應(yīng)式數(shù)據(jù)
• 如果data中的屬性也是對象， 也應(yīng)該把該屬性轉(zhuǎn)換成響應(yīng)式數(shù)據(jù)
• 數(shù)據(jù)發(fā)生變化， 發(fā)送通知
• 結(jié)構(gòu)

• 代碼

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

Compiler（解析器）

• 功能
• 負責編譯模板，解析指令/插值表達式
• 負責頁面的首次渲染
• 當數(shù)據(jù)變化后重新渲染視圖
• 結(jié)構(gòu)

• 代碼

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

Dep（Dependency 發(fā)布者）

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

• 代碼

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

Watcher（觀察者）

• 功能
• 數(shù)據(jù)變化是觸發(fā)依賴， dep通知所有的watcher實例更新視圖
• 自身實例化的時候，往dep對象中添加自己
• 結(jié)構(gòu)

• 代碼

/*** 觀察者, 對應(yīng)的是網(wǎng)頁的節(jié)點中的的指令屬性* 例如：v-text:xxx、 {{xxx}}*/ class Watcher { /*** @param {*} vm vue實例* @param {*} key 觀察的具體屬性* @param {*} cb 屬性值發(fā)生變化后的對應(yīng)的回調(diào)函數(shù)(更新DOM的方法)*/constructor(vm, key, cb) { this.vm = vm// data中的屬性名稱this.key = key// 回調(diào)函數(shù)負責更新視圖this.cb = cb// 把watcher對象記錄到Dep類的靜態(tài)屬性target, 在創(chuàng)建Watcher實例的時候Dep.target = this// 記錄歷史值, vm[key] 觸發(fā)監(jiān)察屬性的getter方法,把觀察者， 添加到發(fā)布者的數(shù)組中this.oldValue = vm[key]Dep.target = null // 清除， 防止重復(fù)添加}/*** 當數(shù)據(jù)發(fā)生變化的時候更新視圖*/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>

總結(jié)

• 整體流程

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

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。