這篇文章主要為大家展示了“Vue.js如何實現(xiàn)監(jiān)聽”,內(nèi)容簡而易懂,條理清晰,希望能夠幫助大家解決疑惑,下面讓小編帶領(lǐng)大家一起研究并學習一下“Vue.js如何實現(xiàn)監(jiān)聽”這篇文章吧。
創(chuàng)新互聯(lián)建站是專業(yè)的玉泉街道網(wǎng)站建設(shè)公司,玉泉街道接單;提供網(wǎng)站設(shè)計制作、做網(wǎng)站,網(wǎng)頁設(shè)計,網(wǎng)站設(shè)計,建網(wǎng)站,PHP網(wǎng)站建設(shè)等專業(yè)做網(wǎng)站服務(wù);采用PHP框架,可快速的進行玉泉街道網(wǎng)站開發(fā)網(wǎng)頁制作和功能擴展;專業(yè)做搜索引擎喜愛的網(wǎng)站,專業(yè)的做網(wǎng)站團隊,希望更多企業(yè)前來合作!
demo:
<script src="../vue.js"> </script> <div id="app"> <p> {{ message }} </p> <input v-model="message"> </div> <script type="text/javascript"> new Vue({ el: '#app', data: { message: 'Hello Vue.js!' } }); </script> 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(); }
這段代碼出現(xiàn)在解析data屬性的時候,即調(diào)用Object.defineProperty
方法配置data的屬性。一旦屬性發(fā)生變化,就notify發(fā)送廣播。
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(訂閱者)更新,那么上面的數(shù)據(jù)變更就是發(fā)布者。 subscribe是Watcher這個類的實例化對象,在實例化的時候,會傳入回調(diào)函數(shù)來執(zhí)行update,vue弄了一個隊列來執(zhí)行watcher的更新函數(shù),具體可參考源碼。
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函數(shù)負責來更新
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就關(guān)聯(lián)在一起了。
圖片描述
觀察者模式
林林總總的mvc或者mvvm框架基本也都是利用了觀察者模式,這個也非常有用,尤其在復雜的系統(tǒng)之中。
利用觀察者模式,在典型的ajax應(yīng)用中,回調(diào)的處理邏輯可以不跟請求耦合在一塊,這樣邏輯上也會更加清晰。如下是一個簡單的發(fā)布/訂閱模式的實現(xiàn)
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; i++){ if(topics[k][i].token === subid){ topics[k].splice(i, 1); return subid; } } } } return this; }; })(PubSub);
這就是一個簡單的訂閱發(fā)布系統(tǒng),每注冊一個訂閱者,其實就是將其回調(diào)處理的callback保存在一個字典對象的數(shù)組中,字典對象的key值可以隨意定義,只要與發(fā)布時的key對應(yīng)起來就好。
怎么使用呢?
<script> 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', 'b', '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', 'a', 'b', 'c'], 1); </script>
最后一個將不會打印出來,因為已經(jīng)取消訂閱了。
以上是“Vue.js如何實現(xiàn)監(jiān)聽”這篇文章的所有內(nèi)容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內(nèi)容對大家有所幫助,如果還想學習更多知識,歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道!
網(wǎng)站欄目:Vue.js如何實現(xiàn)監(jiān)聽
本文鏈接:http://muchs.cn/article44/jcghee.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供電子商務(wù)、軟件開發(fā)、外貿(mào)網(wǎng)站建設(shè)、自適應(yīng)網(wǎng)站、網(wǎng)站制作、網(wǎng)站營銷
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)