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

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

Observer: 劫持對(duì)象的所有屬性， 如有變動(dòng)可拿最新的值， 通知Dep

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

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

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

Vue（初始化）

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

• 代碼

class Vue { constructor(options) {// 1. 通過(guò)屬性保存選項(xiàng)的數(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實(shí)例中this._proxyData(data)// 3. 調(diào)用observer對(duì)象，監(jiān)聽(tīng)數(shù)據(jù)的變化new Observer(data)// 4. 調(diào)用compiler對(duì)象，解析指令和差值表達(dá)式new Compiler(this)}/*** 代理數(shù)據(jù), 把data里面的屬性轉(zhuǎn)換成getter, setter* @param {*} data */_proxyData(data) {// 遍歷data中的所有屬性O(shè)bject.keys(data).forEach(key => { // 把data的屬性注入到vue實(shí)例中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選項(xiàng)中的每一個(gè)屬性， 轉(zhuǎn)換成響應(yīng)式數(shù)據(jù)
• 如果data中的屬性也是對(duì)象， 也應(yīng)該把該屬性轉(zhuǎn)換成響應(yīng)式數(shù)據(jù)
• 數(shù)據(jù)發(fā)生變化， 發(fā)送通知
• 結(jié)構(gòu)

• 代碼

/*** 監(jiān)視者*/ class Observer { constructor(data) {this.walk(data)}/*** 遍歷對(duì)象的所有屬性* @param {*} data */walk(data) { // 1. 判斷data是否是對(duì)象if (!data || typeof data !== 'object') return// 2. 遍歷data對(duì)象的所有屬性O(shè)bject.keys(data).forEach(key => { this.defineReactive(data, key, data[key])})}/*** 轉(zhuǎn)換成響應(yīng)式， 把屬性轉(zhuǎn)換成getter, setter* @param {*} obj 對(duì)象* @param {*} key 鍵* @param {*} val 值*/defineReactive(obj, key, val) { const that = this// 負(fù)責(zé)收集依賴，并發(fā)送通知const dep = new Dep()// 如果val是對(duì)象，把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實(shí)例Dep.target && dep.addSub(Dep.target)return val // obj[key] 會(huì)觸發(fā)遞歸， 所以上面方法需要傳遞一個(gè)val},set(newVal) { if (val === newVal) returnval = newVal// 如果賦值的值是一個(gè)新的對(duì)象的話that.walk(newVal)// 發(fā)送通知dep.notify()}})} }

Compiler（解析器）

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

• 代碼

/*** 編譯器*/ class Compiler {constructor (vm) {this.el = vm.$elthis.vm = vmthis.compile(this.el)}/*** 編譯魔板， 處理文本節(jié)點(diǎn)和元素節(jié)點(diǎn)* @param {*} el 節(jié)點(diǎn)*/compile (el) {const childNodes = el.childNodes // 偽數(shù)組Array.from(childNodes).forEach(node => {if (this.isTextNode(node)) {// 處理文本節(jié)點(diǎn)this.compileText(node)} else if (this.isElementNode(node)) {// 處理元素節(jié)點(diǎn)this.comileElement(node)}// 判斷node節(jié)點(diǎn)，是否有子節(jié)點(diǎn)，如果有子節(jié)點(diǎn)，要遞歸調(diào)用compileif (node.childNodes && node.childNodes.length) {this.compile(node)}})}/*** 編譯元素節(jié)點(diǎn)， 處理指令* @param {*} node 元素節(jié)點(diǎn)*/comileElement(node) {const attributes = node.attributes // 偽數(shù)組// 遍歷所有的屬性節(jié)點(diǎn)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é)點(diǎn)的指令， 并把指令解析出對(duì)應(yīng)的值* @param {*} node 節(jié)點(diǎn)* @param {*} key 屬性值對(duì)應(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é)點(diǎn)* @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é)點(diǎn)， 處理插值表達(dá)式* @param {*} node 元素節(jié)點(diǎn)*/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對(duì)象，當(dāng)數(shù)據(jù)改變更新視圖, key對(duì)應(yīng)的值發(fā)生改變時(shí)， 會(huì)調(diào)用回調(diào)函數(shù)new Watcher(this.vm, key, (newValue) => { node.textContent = newValue})} }/*** 判斷元素屬性是否是指令* @param {*} attrName 屬性名稱*/isDirective (attrName) {return attrName.startsWith('v-')}/*** 判斷節(jié)點(diǎn)是否是文本節(jié)點(diǎn)* @param {*} node 節(jié)點(diǎn)*/isTextNode (node) {return node.nodeType === 3}/*** 判斷節(jié)點(diǎn)是否是元素節(jié)點(diǎn)* @param {*} node 節(jié)點(diǎn)*/isElementNode (node) {return node.nodeType === 1} }

Dep（Dependency 發(fā)布者）

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

• 代碼

/*** 發(fā)布者* 每一個(gè)監(jiān)視的屬性， 都具有一個(gè)對(duì)應(yīng)的發(fā)布者對(duì)象*/ class Dep { constructor() { // 存儲(chǔ)所有的觀察者this.watchs = []}/*** 添加觀察者（監(jiān)視的屬性對(duì)應(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實(shí)例更新視圖
• 自身實(shí)例化的時(shí)候，往dep對(duì)象中添加自己
• 結(jié)構(gòu)

• 代碼

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

測(cè)試

• 代碼

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

總結(jié)

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

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