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

Most people do not understand the knowledge points of this article "how to monitor Vue.js", so the editor summarizes the following content, detailed content, clear steps, and has a certain reference value. I hope you can get something after reading this article. Let's take a look at this "how to achieve Vue.js monitoring" article.

Demo:

{{message}}

New Vue ({el:'# app', data: {message: 'Hello Vue.jskeeper'}}); set: function reactiveSetter (newVal) {var value = getter? Getter.call (obj): val; if (newVal = value) {return;} if (setter) {setter.call (obj, newVal);} else {val = newVal;} childOb = observe (newVal); dep.notify ();}

This code appears when parsing the data property, calling the Object.defineProperty method to configure the properties of the data. Once the property changes, the notify sends a broadcast.

Dep.prototype.notify = function () {/ / stablize the subscriber list first var subs = toArray (this.subs); for (var I = 0, l = subs.length; I

< l; i++) { subs[i].update(); }}; notify 最终是周知subscribe（订阅者）更新，那么上面的数据变更就是发布者。 subscribe是Watcher这个类的实例化对象，在实例化的时候，会传入回调函数来执行update，vue弄了一个队列来执行watcher的更新函数，具体可参考源码。 Watcher.prototype.run = function () { …… if (value !== this.value || (isObject(value) || this.deep) && !this.shallow) { …… } else { this.cb.call(this.vm, value, oldValue); } } this.queued = this.shallow = false; } }; 在Directive（指令）class中实例化了Watcher，_update函数负责来更新 var watcher = this._watcher = new Watcher(this.vm, this.expression, this._update, // callback { filters: this.filters, twoWay: this.twoWay, deep: this.deep, preProcess: preProcess, postProcess: postProcess, scope: this._scope }); 在解析模板的时候会解析Directive，然后绑定，实例化watcher，这样模板-data就关联在一起了。 图片描述

Observer mode

A wide variety of mvc or mvvm frameworks basically take advantage of the Observer pattern, which is also very useful, especially in complex systems.

Using the observer pattern, in a typical ajax application, the processing logic of the callback can not be coupled with the request, which makes the logic clearer. The following is an implementation of a simple publish / subscribe model

Var PubSub = {}; (function (Q) {var topics = {}, subUid =-1; q.publish = function (topic) {if (! topics [topic]) {return false;} var subscribers = topics [topic], len = subscribers? Subscribers.length: 0; while (len--) {var args = Array.prototype.slice.call (arguments, 1); args.unshift (topic); subscribers [len] .callback.apply (this, args);} return this;}; q.subscribe = function (topic, callback) {if (! topics [topic]) {topics [topic] = [];} var subuid = (+ + subUid). ToString (); topics [topic] .push ({token: subuid, callback: callback}); return subuid;} Q.unsubscribe = function (subid) {for (var k in topics) {if (topics [k]) {for (var I = 0, j = topics [k] .length; I < j; iTunes +) {if (topics[ k] [I]. Token = = subid) {topics.splice (I, 1); return subid;}} return this;};}) (PubSub)

This is a simple subscription and publishing system. Every time you register a subscriber, the callback processed by its callback is saved in an array of dictionary objects. The key value of the dictionary object can be defined at will, as long as it corresponds to the key at the time of publication.

How do I use it?

Var messageLogger = function () {console.log (JSON.stringify (arguments));}; var subscription = PubSub.subscribe ('/ newMessage', messageLogger); / / {"0": "/ newMessage", "1": "hello world"} PubSub.publish ('/ newMessage', 'hello world') / / {"0": "/ newMessage", "1": ["test", "a", "b", "c"]} PubSub.publish ('/ newMessage', ['test',' a', 'baked,' c']) / / {"0": "/ newMessage", "1": {"sender": "hello world", "body": "hey man"} PubSub.publish ('/ newMessage', {sender: 'hello world', body:' hey man'}); PubSub.unsubscribe (subscription); PubSub.publish ('/ newMessage', ['test',' aversion, 'baked,' c'], 1)

The last one will not be printed because the subscription has been unsubscribed.

The above is about the content of this article on "how to monitor Vue.js". I believe we all have a certain understanding. I hope the content shared by the editor will be helpful to you. If you want to know more related 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.