详解从vue的组件传值着手观察者模式

Oprah ·

更新时间:2024-11-14

· 376 次阅读

观察者模式

Vue传值

第一步，我们先在main.js中注册一下bus

第二步，我们开始发送消息

第三步，在组件三中接收消息

vue的机制

观察者模式存在的意义

观察者模式

首先，提到观察者模式，这不禁让我想到了MVVM，MVVM架构模式感觉用到了观察者的思想。

我们还是按照惯例，了解一下什么是观察者模式

观察者模式，类似发布订阅模式，完成这个动作首先最少得有两个不同的对象，或者多个对象，他更像是一种一队多的依赖关系，也就是一种对象的状态发生改变，与其相关所有的对象的状态都会发生改变；比如说朋友圈这个功能，一个人可能有上百个好友，当我发布一条朋友圈后，所有和我成为好友的人都会看见这个朋友圈，当另一个人点赞后，所有你的好友其他点赞的人也会收到通知，这很像观察者，也就是我是发布者，我的好友是订阅者。

Vue传值

然后我们看一下什么是vue，vue的原理大家都知道，他是一种自底向上的一种深入响应式的双向绑定模式，即MVVM，也就是说，vue关注model的变化，model的变化让mvvm框架更新dom，从而产生视图view变化。

举一个项目中很常见的例子：

在写vue项目中我们都用过父子组件传值，但是兄弟组件传值是怎么实现的，首先我们可以用vuex，这很常见，但是还有一种方法不知道你用过没有，就是Bus，这个Bus只是一种命名而已，叫什么无所谓，你可以叫飞机大炮都可以，这不重要，我们主要看看他是怎么实现的：

第一步，我们先在main.js中注册一下bus


Vue.prototype.$Bus = new Vue()

我们往vue的原型里注册了一个全局变量$Bus，他的值是vue的实例，也就是说，到现在为止，$Bus里边有了vue所有的属性和方法，这下就好操作了

第二步，我们开始发送消息

这就很符合观察者模式的发布订阅模式

我们在组件1中写如下代码：


<template>
    <div>
        <button @click="send">发送</button>
    </div>
</template>
<script>
export default {
    methods: {
        send () {
            this.$Bus.$emit("send",'接收的信息')
        }
    }
}
</script>

点击按钮发送一条信息，这个按钮也就是充当发布者，我们用到了vue的$emit这个api，那么订阅者是什么呢？我不说你也应该想到了，对，就是他

第三步，在组件三中接收消息


<template>
    <div>
        {{message}}
    </div>
</template>
<script>
export default {
    data () {
        return {
            message: ''
        }
    },
    mounted () {
        this.$Bus.$on('send', (msg) => {
            this.message = msg
        })
    }
}
</script>

就是用$on这个属性充当接收者

从上可以看出，vue很多地方用到了观察者的思想，包括他的双向绑定也是如此

vue的机制

从上图我们可以看出，vue是通过Object.defineProperty实现对数据的劫持，然后中间做了一个中转，最后渲染到vue层。

我们可以肯定的是，vue.js借鉴了观察者模式，但是我感觉还是有点区别的，观察者模式跟注重的是事件驱动，比如我买房这个动作，第一次和销售了解可能没有合适的房源，然后销售就会跟你说： ‘如果有合适的房源我们会第一时间通知你'，当有新房源的时候他会给你打电话通知你，这一系列的根源是买房这个事件，他驱动了整套流程。而vue我们都知道是数据驱动，也就是只有data里的值发生改变的话，Object.defineProperty才会对他劫持，从而去更新dom，触发视图的更新。

那么有没有更符合观察者模式特征的？

当然是node.js的events事件了。

首先我们看看events的工作流程：


var events = require('events');
// 创建 eventEmitter 对象
var eventEmitter = new events.EventEmitter();
// 创建事件处理程序
var connectHandler = function connected() {
   console.log('连接成功。');
   // 触发 data_received 事件 
   eventEmitter.emit('data_received');
}
// 绑定 connection 事件处理程序
eventEmitter.on('connection', connectHandler);
// 使用匿名函数绑定 data_received 事件
eventEmitter.on('data_received', function(){
   console.log('数据接收成功。');
});
// 触发 connection 事件 
eventEmitter.emit('connection');
console.log("程序执行完毕。");

输出一下：