小編這次要給大家分享的是Vue如何實現(xiàn)發(fā)布訂閱模式，文章內(nèi)容豐富，感興趣的小伙伴可以來了解一下，希望大家閱讀完這篇文章之后能夠有所收獲。
創(chuàng)新互聯(lián)公司長期為上千客戶提供的網(wǎng)站建設(shè)服務(wù)，團隊從業(yè)經(jīng)驗10年，關(guān)注不同地域、不同群體，并針對不同對象提供差異化的產(chǎn)品和服務(wù)；打造開放共贏平臺，與合作伙伴共同營造健康的互聯(lián)網(wǎng)生態(tài)環(huán)境。為南和企業(yè)提供專業(yè)的成都網(wǎng)站建設(shè)、網(wǎng)站建設(shè)，南和網(wǎng)站改版等技術(shù)服務(wù)。擁有十余年豐富建站經(jīng)驗和眾多成功案例,為您定制開發(fā)。
vue項目中不同組件間通信一般使用vuex，通常情況下vuex和EventBus不應(yīng)該混用，不過某些場景下不同組件間只有消息的交互，這時使用EventBus消息通知的方式就更合適一些。
圖解
html
Dvue.js
重慶分公司
重慶分公司
class DVue {
constructor(options) {
this.$options = options
// 數(shù)據(jù)響應(yīng)化
this.$data = options.data
this.observe(this.$data)
// 模擬一下watcher創(chuàng)建
// 激活get 并將依賴添加到deps數(shù)組上
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])
})
}
// 數(shù)據(jù)響應(yīng)化
defineReactive(obj, key, val) {
// 判斷val內(nèi)是否還可以繼續(xù)調(diào)用(是否還有對象)
this.observe(val) // 遞歸解決數(shù)據(jù)嵌套
// 初始化dep
const dep = new Dep()
Object.defineProperty(obj, key, {
get() {
// 讀取的時候 判斷Dep.target是否有，如果有則調(diào)用addDep方法將Dep.target添加到deps數(shù)組上
Dep.target && dep.addDep(Dep.target)
return val
},
set(newVal) {
if (newVal === val) {
return;
}
val = newVal
// console.log(`${key}屬性更新了：${val}`)
dep.notify() // 更新時候調(diào)用該方法
}
})
}
}
// Dep: 用來管理Watcher
class Dep {
constructor() {
// 這里存放若干依賴(watcher) |一個watcher對應(yīng)一個屬性
this.deps = [];
}
// 添加依賴
addDep (dep) {
this.deps.push(dep)
}
// 通知方法
notify() {
this.deps.forEach(dep => dep.update())
}
}
// Watcher
class Watcher {
constructor () {
// 將當(dāng)前watcher實例指定到Dep靜態(tài)屬性target上
Dep.target = this // 當(dāng)前this就是Watcher對象
}
update() {
console.log('屬性更新了')
}
}看完這篇關(guān)于Vue如何實現(xiàn)發(fā)布訂閱模式的文章，如果覺得文章內(nèi)容寫得不錯的話，可以把它分享出去給更多人看到。
