Vue釋出訂閱模式實現過程圖解
阿新 • • 發佈:2020-05-01
vue專案中不同元件間通訊一般使用vuex,通常情況下vuex和EventBus不應該混用,不過某些場景下不同元件間只有訊息的互動,這時使用EventBus訊息通知的方式就更合適一些。
圖解
html
<body> <script src="./Dvue.js"></script> <script> const app = new DVue({ data: { test: "I am test",foo: { bar: "bar" } } }) app.$data.test = "hello world!" // app.$data.foo.bar = "hello!" </script> </body>
Dvue.js
class DVue { constructor(options) { this.$options = options // 資料響應化 this.$data = options.data this.observe(this.$data) // 模擬一下watcher建立 // 啟用get 並將依賴新增到deps陣列上 new Watcher() this.$data.test new Watcher() this.$data.foo.bar } observe(value) { // 判斷value是否是物件 if (!value || typeof value !== 'object') { return } // 遍歷該物件 Object.keys(value).forEach(key => { this.defineReactive(value,key,value[key]) }) } // 資料響應化 defineReactive(obj,val) { // 判斷val內是否還可以繼續呼叫(是否還有物件) this.observe(val) // 遞迴解決資料巢狀 // 初始化dep const dep = new Dep() Object.defineProperty(obj,{ get() { // 讀取的時候 判斷Dep.target是否有,如果有則呼叫addDep方法將Dep.target新增到deps陣列上 Dep.target && dep.addDep(Dep.target) return val },set(newVal) { if (newVal === val) { return; } val = newVal // console.log(`${key}屬性更新了:${val}`) dep.notify() // 更新時候呼叫該方法 } }) } } // Dep: 用來管理Watcher class Dep { constructor() { // 這裡存放若干依賴(watcher) |一個watcher對應一個屬性 this.deps = []; } // 新增依賴 addDep (dep) { this.deps.push(dep) } // 通知方法 notify() { this.deps.forEach(dep => dep.update()) } } // Watcher class Watcher { constructor () { // 將當前watcher例項指定到Dep靜態屬性target上 Dep.target = this // 當前this就是Watcher物件 } update() { console.log('屬性更新了') } }
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支援我們。