Vue发布订阅模式实现过程图解
程序员文章站
2022-03-18 17:00:59
vue项目中不同组件间通信一般使用vuex，通常情况下vuex和eventbus不应该混用，不过某些场景下不同组件间只有消息的交互，这时使用eventbus消息通知的方式就更合适一些。图解html&l...
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, key, val) {
// 判断val内是否还可以继续调用(是否还有对象)
this.observe(val) // 递归解决数据嵌套
// 初始化dep
const dep = new dep()
object.defineproperty(obj, key, {
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('属性更新了')
}
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。