這篇文章主要為大家展示了“Vue.js如何實(shí)現(xiàn)監(jiān)聽(tīng)”，內(nèi)容簡(jiǎn)而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“Vue.js如何實(shí)現(xiàn)監(jiān)聽(tīng)”這篇文章吧。

創(chuàng)新互聯(lián)建站是專業(yè)的玉泉街道網(wǎng)站建設(shè)公司，玉泉街道接單;提供網(wǎng)站設(shè)計(jì)制作、做網(wǎng)站,網(wǎng)頁(yè)設(shè)計(jì),網(wǎng)站設(shè)計(jì),建網(wǎng)站,PHP網(wǎng)站建設(shè)等專業(yè)做網(wǎng)站服務(wù);采用PHP框架,可快速的進(jìn)行玉泉街道網(wǎng)站開(kāi)發(fā)網(wǎng)頁(yè)制作和功能擴(kuò)展;專業(yè)做搜索引擎喜愛(ài)的網(wǎng)站,專業(yè)的做網(wǎng)站團(tuán)隊(duì),希望更多企業(yè)前來(lái)合作!

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屬性的時(shí)候，即調(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這個(gè)類的實(shí)例化對(duì)象，在實(shí)例化的時(shí)候，會(huì)傳入回調(diào)函數(shù)來(lái)執(zhí)行update，vue弄了一個(gè)隊(duì)列來(lái)執(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中實(shí)例化了Watcher，_update函數(shù)負(fù)責(zé)來(lái)更新

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
 });

在解析模板的時(shí)候會(huì)解析Directive，然后綁定，實(shí)例化watcher，這樣模板-data就關(guān)聯(lián)在一起了。

圖片描述

觀察者模式

林林總總的mvc或者mvvm框架基本也都是利用了觀察者模式，這個(gè)也非常有用，尤其在復(fù)雜的系統(tǒng)之中。

利用觀察者模式，在典型的ajax應(yīng)用中，回調(diào)的處理邏輯可以不跟請(qǐng)求耦合在一塊，這樣邏輯上也會(huì)更加清晰。如下是一個(gè)簡(jiǎn)單的發(fā)布/訂閱模式的實(shí)現(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);

這就是一個(gè)簡(jiǎn)單的訂閱發(fā)布系統(tǒng)，每注冊(cè)一個(gè)訂閱者，其實(shí)就是將其回調(diào)處理的callback保存在一個(gè)字典對(duì)象的數(shù)組中，字典對(duì)象的key值可以隨意定義，只要與發(fā)布時(shí)的key對(duì)應(yīng)起來(lái)就好。

怎么使用呢？

<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>

最后一個(gè)將不會(huì)打印出來(lái)，因?yàn)橐呀?jīng)取消訂閱了。

以上是“Vue.js如何實(shí)現(xiàn)監(jiān)聽(tīng)”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

網(wǎng)站欄目：Vue.js如何實(shí)現(xiàn)監(jiān)聽(tīng)
本文鏈接：http://m.rwnh.cn/article44/jcghee.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供電子商務(wù)、軟件開(kāi)發(fā)、外貿(mào)網(wǎng)站建設(shè)、自適應(yīng)網(wǎng)站、網(wǎng)站制作、網(wǎng)站營(yíng)銷

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)