vue 2.x
vue 3.x
發布訂閱模式
vue 的自定義事件
模擬 vue 自定義事件的實現
// 事件觸發器
class eventemitter
this.subs = object.create(null)
} // 註冊事件
$on (eventtype, handler)
// 觸發事件
$emit (eventtype) )}}}
// 測試
let em = new eventemitter()
em.$on('click', () => )
em.$on('click', () => )
em.$emit('click')
沒有事件中心
// 發布者-目標
class dep
// 新增訂閱者
addsub (sub)
}// 發布通知
notify () )
}} // 訂閱者-觀察者
class watcher
} // 測試
let dep = new dep()
let watcher = new watcher()
dep.addsub(watcher)
dep.notify()
compiler
dep
watcher
vue
**
class vue
this.$data = options.data
this.$el = typeof options.el === 'string' ? document.queryselector(options.el) : options.el,
// 2. 把data中的成員轉換成getter和setter，注入到vue例項中
this._proxydata(this.$data)
// 3. 呼叫observer物件，監聽資料的變化
new observer(this.$data)
// 4. 呼叫compiler物件，解析指令和差值表示式
new compiler(this)
} initmethods(vm, methods)
} _proxydata(data),
set(newvalue)
})})
}}
class observer
walk(data))
} definereactive(obj, key, val),
set(newvalue)
})}}
class compiler
// 編譯模板，處理文字節點和元素節點
compile(el)else if(this.iselementnode(node))
// 判斷當前節點下是否有子節點,有子節點時遞迴遍歷compile
if(node.childnodes && node.childnodes.length)
})} // 編譯文字節點
compiletext(node)\}/
let value = node.textcontent
if(reg.test(value))
} // 編譯元素節點,處理指令
compileelement(node)else if(this.isdirective(attrname))
}) } addhandler(el, handlename, handle)
update(node, key, attrname)
// 處理 v-text 指令
textupdater(node, value, key))
} // 處理 v-model 指令
modelupdater(node, value, key))
// 雙向繫結
node.addeventlistener('input', () => )
} // 處理 v-html 指令
htmlupdater(node, value, key))
} // 判斷元素屬性是否是指令
isdirective (attrname)
//判斷是否為文字節點
istextnode(node)
//判斷是否為元素節點
iselementnode(node)
}
class dep
// 新增觀察者
addsub(sub)
} // 傳送通知
// 當資料發生變化的時候更新檢視
update()
}
新增 dep 和 watcher 的依賴關係
資料變化傳送通知
compiler
depwatcher
參考
vue響應式布局 Vue 響應式原理
vue2 的資料偵測 在 src observer 目錄裡面，元件例項在初始化時，會呼叫 observe 函式處理 data function initdata vm observe 改寫了所有物件屬性的 getter setter 和陣列原型上的 7 個會改寫陣列方法，從而讓 data 變成可響應...
vue響應式原理
響應式系統是vue框架核心的部分，資料物件僅僅是普通的 js物件。當我們改變資料時，檢視也會被改變，本文就來 一下vue 的響應式原理。vue響應式的核心是使用了es5 新增的api object.defineproperty 因此vue不支援ie8 object.defineproperty的作用...
vue響應式原理
要了解響應式原理首先應該知道什麼是響應式 更改 vue的響應式原理是什麼 vue資料的雙向繫結是通過資料劫持結合發布訂閱模式，偵測到資料變化，然後通過object.defineproperty 物件對每個屬性的getter和setter進行劫持。當讀取 data 中的資料時自動呼叫 get 方法，當...