Shulou(Shulou.com)05/31 Report--

Today, I would like to share with you how to use components to pass values in vue to achieve the observer model of the relevant knowledge points, detailed content, clear logic, I believe that most people still know too much about this knowledge, so share this article for your reference, I hope you can learn something after reading this article, let's take a look at it.

The first step is to register bus in main.js.

Vue.prototype.$Bus = new Vue ()

We have registered a global variable $Bus in the prototype of vue, whose value is an instance of vue, that is to say, so far, $Bus has all the properties and methods of vue, which is easy to operate.

Step two, we start sending messages.

This is very consistent with the publish and subscribe model of the observer model.

We write the following code in component 1:

Send export default {methods: {send () {this.$Bus.$emit ("send", 'received information')}

Click the button to send a message, this button acts as the publisher, we use vue's $emit api, so what is the subscriber? I don't have to tell you, you should have thought of it. Yeah, that's him.

The third step is to receive the message {{message}} export default {data () {return {message:''}}, mounted () {this.$Bus.$on ('send', (msg) = > {this.message = msg})}} in component 3.

Is to use the attribute $on as the recipient

From the above, we can see that vue uses the observer's mind in many ways, including his two-way binding.

The mechanism of vue

As we can see from the above figure, vue hijacks the data through Object.defineProperty, then makes a transit in the middle, and finally renders it to the vue layer.

What we can be sure is that vue.js borrows from the observer model, but I feel there is a difference between the observer model and the event-driven model. For example, when I buy a house, there may be no suitable housing for the first time and sales, and then the sales will say to you:'if there is a suitable house, we will let you know as soon as possible, 'and he will call you when there is a new house. The root of this series is the event of buying a house, which drives the whole process. We all know that vue is data-driven, that is, only if the value in data changes, Object.defineProperty will hijack him to update dom and trigger view update.

Is there anything more in line with the characteristics of the observer model?

Of course it's the events incident of node.js.

First, let's look at the workflow of events:

Var events = require ('events'); / / create eventEmitter object var eventEmitter = new events.EventEmitter (); / / create event handler var connectHandler = function connected () {console.log (' connected successfully.') ; / trigger data_received event eventEmitter.emit ('data_received');} / bind connection event handler eventEmitter.on (' connection', connectHandler); / / bind data_received event eventEmitter.on using anonymous functions ('data_received', function () {console.log (' data received successfully.') ;}); / / triggers the connection event eventEmitter.emit ('connection'); console.log ("Program execution completed.")

Output:

This is exactly in line with the working mode of the observer, published by emit and received by on. So, node.js provides a good monitoring mechanism, as well as his handling of the whole transaction. It supports nodejs's most characteristic Inodejs O mode, such as listening to connect / close,http.request when we start the http service and listening to data / end when we start the service.

Are there any similar cases?

Of course, js has an event listener-addEventListener, which also means something like an observer. I'm not going to say the specific usage. I'm sure everyone is familiar with it.

In fact, as long as you seriously think about it, there are still many places where there are observers, the simplest is a click event, is also meaningful, the publisher is a button, and the receiver can be a form, bounce layer, and so on.

The significance of the existence of the Observer Model

First of all, let's talk about his strengths:

1. The observer model needs to establish a coupling between the observer and the observed, and it needs a more abstract link between the two.

2. Observer mode supports broadcasting, that is, an one-to-many relationship, which makes it easy for us to think of a technology, that is, socket. For more information, please refer to the vue project using websocket technology.

However, goose, he also has his advantages and disadvantages:

1. It takes a certain amount of time and memory to create subscribers.

2, when subscribing to a message, the message may not occur, but the subscriber is always in memory.

3. Observer mode weakens the relationship between objects, which is a good thing, but if overused, the relationship between objects will also be hidden deeply, which will make the project difficult to track, maintain and understand.

Later, there is another model called publish and subscribe model, and many people think it is the observer model (including me). Later, I looked it up on the Internet and found that there was a difference between them. We can say that the observer model is very similar to the publish and subscribe model, but it is a little different in nature. The most fundamental difference is that the dispatch center is different.

For example, the observer model pays more attention to the abstract classes of the target and the observer, such as weather forecast, where observer An is responsible for monitoring weather changes, while B needs to register itself in An if it wants to know the weather changes. when the weather changes, A triggers the weather change and schedules the interface of B to update the change.

And how does the publish-subscribe model do this? If A wants to perceive the weather change, it needs B as the dispatching center, and B needs to rely on the trigger of C to get the weather change. Maybe my explanation is not very clear. There are two better pictures on the Internet.

These are all the contents of the article "how to use component values in vue to implement the Observer pattern". Thank you for reading! I believe you will gain a lot after reading this article. The editor will update different knowledge for you every day. If you want to learn more knowledge, please pay attention to the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.