关于vue中发布-订阅模式的原理浅析
2020-11-10 本文已影响0人
叫维特的少年
作为一个vue开发者，在学习和使用vue的过程中都会接触到自定义事件，其中两个方法就是$on和$emit，接下来通过简单的实现来浅析下其中的实现原理
vue的实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue 自定义事件</title>
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
// Vue 实例
const app = new Vue()
// 订阅事件
app.$on("click", () => {
console.log("click1")
})
app.$on("click", () => {
console.log("click2")
})
// 发布事件
app.$emit("click")
</script>
</body>
</html>
vue官网地址
接下来进行简单的分析，在vue的自定义事件中$on可以绑定多个不同或相同名称的事件，所以就要把$on注册的事件放到对象中去，并且该事件的处理函数是在一个数组中保存，当$emit触发某个事件时，会执行这个事件中的多个事件处理函数
如下
//订阅多个事件
$on("change",fn1)
$on("change",fn2)
$on("click",fn3)
$on("click",fn4)
//其形式如下
{
"click":[fn3,fn4],
"change":[fn1,fn2]
}
//当$emit发布事件时会传入事件名称，然后该事件下的所有事件处理函数会被执行
$emit('click');//会执行fn3()，fn4()
发布定于模式的简单实现
class eventEmiter {
constructor(){
//this.subs = {}
//这样写可以提高性能，没有继承任何原型方法，原型链上没有上一层
this.subs = Object.create(null)
}
$on(eventType,handler) {
this.subs[eventType] = this.subs[eventType] || [];
this.subs[eventType].push(handler)
}
$emit(eventType) {
this.subs[eventType].forEach(handler => {
handler();
})
}
}
//进行测试
const em = new eventEmiter()
$on('add',()=>{
console.log('add1');
})
$on('add',()=>{
console.log('add2')
})
$emit('add')
结果如下
发布-订阅.png
最后，比较下Object.create(null)和Object.create({})的差别
因为自己也是在慢慢学习vue中的原理性的东西，如有错误，也希望能够给我指出，也好及时纠正
年华如果虚度，生命将毫无意义
