vue中组件之间的数据传递,vue组件监听传入数据变化
本文从vue的元件值传递详细介绍了观测器模式。有兴趣的同学可以参考一下，了解一下它的原理。
目录
观察者模式Vue传输值。第一步，我们在main.js中注册总线第二步，我们开始发送消息。步骤3，组件3中接收消息的机制。观察者模式存在的意义。
观察者模式
首先，提到观察者模式，这不禁让我想起MVVM。MVVM建筑模式感觉观察者的思想被利用了。
我们按照惯例，了解一下什么是观察者模式。
观察者模式类似于发布和订阅模式，需要至少两个不同的对象或多个对象来完成此操作。它更像是一种多团队依赖，即当一个对象的状态发生变化时，所有相关对象的状态都会发生变化；比如朋友圈的功能，一个人可能有上百个好友。当我发布朋友圈的时候，我所有的朋友都会看到这个朋友圈。当另一个人喜欢它时，你所有的朋友和其他喜欢它的人也会收到通知。这很像一个观察者，即我是发布者，我的朋友是订阅者。
Vue传值
那么我们来看看vue是什么。vue的原理众所周知。它是一种自下而上的深度响应的双向绑定模式，即mvvm。也就是说，vue关注模型的变化，模型的变化使得MVVM框架更新dom，导致view View的变化。
举一个项目中很常见的例子：
我们在编写vue项目时都使用过父子组件来传递值，但是兄弟组件是如何实现传递值的呢？首先我们可以用vuex，很常见，但是还有一种方法不知道大家有没有用过，就是Bus。这辆公交车只是一个名字，叫什么并不重要。你可以称之为飞机大炮。没关系。我们主要看它是如何实现的：
第一步，我们先在main.js中注册一下bus
Vue.prototype.$Bus=new Vue()
我们在vue的原型中注册了一个全局变量$Bus，它的值是vue的一个实例。也就是说，到现在为止，$Bus已经具备了vue的所有属性和方法，所以很好操作。
第二步，我们开始发送消息
这与观察者模式的发布订阅模式非常一致。
我们在组件1中编写以下代码：
模板
差异
按钮@click=发送发送/按钮
/div
/模板
脚本
导出默认值{
方法：{
send () {
这个。$巴士。$emit(发送，接收的信息)
}
}
}
/脚本
单击按钮发送消息，此按钮充当发布者。我们用的是vue的$emit的api，那么订阅者有哪些呢？我不说你应该想到的。是的，就是他。
第三步，在组件三中接收消息
模板
差异
{ {消息}}
/div
/模板
脚本
导出默认值{
data () {
返回{
消息：“”
}
},
已安装(){
这个。$巴士。$on(send ，(msg)={
this.message=消息
})
}
}
/脚本
就是使用$on属性作为接收者。
从上面可以看出，vue在很多地方使用了观察者的思想，包括他的双向绑定。
vue的机制
从上图我们可以看到，vue通过Object.defineProperty劫持数据，然后中间过渡，最后渲染到vue层。
诚然，vue.js借鉴了观察者模型，但我觉得有点不一样。观察者模型是事件驱动的。比如我买房，先跟销售了解可能没有合适的房源，然后销售会告诉你，‘如果有合适的房源，我们会第一时间通知你’。当有新的住房时，他会打电话通知你。这一系列的根本是买房事件，驱动了整个过程。众所周知，vue是数据驱动的，即只有当数据中的值发生变化时，Object.defineProperty才会劫持它，从而更新dom，触发视图的更新。
那么有没有更符合观察者模式特点的呢？
当然是node.js的events事件
让我们先来看看事件的工作流程：
var events=require( events )；
//创建eventEmitter对象
var eventEmitter=新事件。event emitter()；
//创建事件处理程序
var connect handler=function connected(){
Console.log(连接成功。);
//触发data_received事件
event emitter . emit( data _ received )；
}
//绑定连接事件处理程序
eventEmitter.on(connection ，connect handler)；
//用匿名函数绑定data_received事件
eventEmitter.on(data_received ，function(){
Console.log(数据接收成功。);
});
//触发连接事件
event emitter . emit( connection )；
Console.log(程序完成了。);
输出：
这完全符合观察者的工作模式，由emit发布，由on接收。因此，node.js提供了良好的监控机制及其对整个事务的处理。它支持nodejs最具特色的I/O模式。比如我们启动http服务的时候会监听它的connect/close，启动http.request的时候会监听data/end等等。
有没有类似的案例？
当然，js有一个事件监听器——addevent listener，也有点观察者的味道。具体用法我就不说了。我想大家都很熟悉。
其实只要你认真想想，很多地方还是有观察者的。最简单的一个是点击事件。是不是也有它的意义？发布者是一个按钮，而接收者可以是任何东西，比如表单、炸弹层等等。
观察者模式存在的意义
首先，我们来说说他的优点：
1，观察者模式需要在观察者和被观察者之间建立一种耦合，他需要一种更抽象的方式将两者联系在一起。
2.观察者模式支持广播，也就是一对多的关系，这让我们很容易想到一种技术，即socket。具体参考vue项目使用websocket技术。
然而，鹅他也有优点和缺点：
1，自己创建订阅者需要一定的时间和内存。
2.在订阅一个消息的时候，也许这个消息并没有发生，但是这个订阅者会一直存在于内存中。
3.观察者模式弱化了物体之间的联系，这是好事。但是，如果过度使用，对象之间的联系会隐藏得很深，这将导致难以跟踪、维护和理解项目。
等一下，还有一种模式叫发布订阅模式。很多人认为是观察者模式(包括我)。后来上网查了一下，发现两者还是有区别的。我们可以说观察者模式和发布订阅模式很像，真的很像，但是本质还是有点不同。最根本的是调度中心不一样。
比如观察者模式更注重目标和观察者是抽象类，比如天气预报。观察者A负责监测天气变化，而B如果想知道天气变化，需要在A中注册自己。天气变化时，A触发天气变化，调度B的界面更新变化。
发布-订阅模式是如何完成这个操作的？A要感知天气变化，需要B作为调度中心，而B需要依靠C的触发来获取天气变化。可能我没解释清楚。网上最好有两张图。
以上是从vue的组件值传递开始的观察者模式的详细说明。更多关于从vue的组件值传递开始的观察者模式的信息，请关注我们的其他相关文章！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。