Vue发布订阅模式实现过程图解
更新时间：2020年04月30日 09:59:46 作者：林中有风
这篇文章主要介绍了Vue发布订阅模式实现过程图解,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
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('属性更新了')
}
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了vue中的router-view组件的使用教程，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下2018-10-10
element-plus按需引入后ElMessage与ElLoading在页面中的使用
这篇文章主要介绍了element-plus按需引入后ElMessage与ElLoading在页面中的使用方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-09-09
Mock.js是一个模拟数据生成器,可以让前端独立于后端进行开发,下面这篇文章主要给大家介绍了关于使用Mockjs模拟接口实现增删改查、分页及多条件查询的相关资料,需要的朋友可以参考下2022-04-04
这篇文章主要介绍了Vue项目打包部署到iis服务器的配置方法，文中通过代码示例给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下2019-10-10
这篇文章主要为大家详细介绍了vue实现弹窗拖拽效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-09-09
这篇文章主要介绍了在vue2.0中引用element-ui组件库,需要的朋友可以参考下2018-06-06
这篇文章主要介绍了vue深度优先遍历多层数组对象方式(相当于多棵树、三级树)，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-08-08
Vue中commit和dispatch区别及用法辨析(最新)
在Vue中,commit和dispatch是两个用于触发Vuex store中的mutations和actions的方法,这篇文章主要介绍了Vue中commit和dispatch区别及其用法辨析,需要的朋友可以参考下2024-06-06
这篇文章主要介绍了Vue 实现一个简单的鼠标拖拽滚动效果插件，帮助大家更好的理解和使用vue框架，感兴趣的朋友可以了解下2020-12-12
EventBus称为事件总线,当两个组件属于不同的两个组件分支,或者两个组件没有任何联系的时候,不想使用Vuex这样的库来进行数据通信,就可以通过事件总线来进行通信,这篇文章主要给大家介绍了关于Vue eventBus事件总线封装后再用的相关资料,需要的朋友可以参考下2022-06-06
最新评论