国产99久久精品_欧美日本韩国一区二区_激情小说综合网_欧美一级二级视频_午夜av电影_日本久久精品视频

最新文章專題視頻專題問答1問答10問答100問答1000問答2000關(guān)鍵字專題1關(guān)鍵字專題50關(guān)鍵字專題500關(guān)鍵字專題1500TAG最新視頻文章推薦1 推薦3 推薦5 推薦7 推薦9 推薦11 推薦13 推薦15 推薦17 推薦19 推薦21 推薦23 推薦25 推薦27 推薦29 推薦31 推薦33 推薦35 推薦37視頻文章20視頻文章30視頻文章40視頻文章50視頻文章60 視頻文章70視頻文章80視頻文章90視頻文章100視頻文章120視頻文章140 視頻2關(guān)鍵字專題關(guān)鍵字專題tag2tag3文章專題文章專題2文章索引1文章索引2文章索引3文章索引4文章索引5123456789101112131415文章專題3
問答文章1 問答文章501 問答文章1001 問答文章1501 問答文章2001 問答文章2501 問答文章3001 問答文章3501 問答文章4001 問答文章4501 問答文章5001 問答文章5501 問答文章6001 問答文章6501 問答文章7001 問答文章7501 問答文章8001 問答文章8501 問答文章9001 問答文章9501
當前位置: 首頁 - 科技 - 知識百科 - 正文

vue觀察模式淺析

來源:懂視網(wǎng) 責編:小采 時間:2020-11-27 22:07:03
文檔

vue觀察模式淺析

vue觀察模式淺析:觀察者模式 首先話題下來,我們得反問一下自己,什么是觀察者模式? 概念 觀察者模式(Observer):通常又被稱作為發(fā)布-訂閱者模式。它定義了一種一對多的依賴關(guān)系,即當一個對象的狀態(tài)發(fā)生改變的時候,所有依賴于它的對象都會得到通知并自動更新,解決了主
推薦度:
導讀vue觀察模式淺析:觀察者模式 首先話題下來,我們得反問一下自己,什么是觀察者模式? 概念 觀察者模式(Observer):通常又被稱作為發(fā)布-訂閱者模式。它定義了一種一對多的依賴關(guān)系,即當一個對象的狀態(tài)發(fā)生改變的時候,所有依賴于它的對象都會得到通知并自動更新,解決了主

觀察者模式

首先話題下來,我們得反問一下自己,什么是觀察者模式?

概念

觀察者模式(Observer):通常又被稱作為發(fā)布-訂閱者模式。它定義了一種一對多的依賴關(guān)系,即當一個對象的狀態(tài)發(fā)生改變的時候,所有依賴于它的對象都會得到通知并自動更新,解決了主體對象與觀察者之間功能的耦合。

講個故事

上面對于觀察者模式的概念可能會比較官方化,所以我們講個故事來理解它。

A:是共產(chǎn)黨派往國民黨密探,代號 001(發(fā)布者)
B:是共產(chǎn)黨的通信人員,負責與 A 進行秘密交接(訂閱者)

  • A 日常工作就是在明面采集國民黨的一些情報
  • B 則負責暗中觀察著 A
  • 一旦 A 傳遞出一些有關(guān)國民黨的消息(更多時候需要對消息進行封裝傳遞,后面根據(jù)源碼具體分析)
  • B 會立馬訂閱到該消息,然后做一些相對應(yīng)的變更,比如說通知共產(chǎn)黨們做一些事情應(yīng)對國民黨的一些動作。
  • 適用性

    以下任一場景都可以使用觀察者模式

  • 當一個抽象模型有兩個方面,其中一個方面依賴于另一方面。講這兩者封裝在獨立的對象中可以讓它們可以各自獨立的改變和復(fù)用
  • 當一個對象的改變的時候,需要同時改變其它對象,但是卻不知道具體多少對象有待改變
  • 當一個對象必須通知其它對象,但是卻不知道具體對象到底是誰。換句話說,你不希望這些對象是緊密耦合的。
  • 以下是我對vue觀察者模式的理解:

    不要對框架的偏見, 你真的了解jquery、angular、react 等等,框架是什么只是工具而已。

    你用過jquery的 trigger、on、off 事件綁定的方法嗎?事實上 vue 不過也是這種模式,只不過vue 是自動調(diào)用on方法,自動觸發(fā)trigger。甚至可以不用jquery對事件監(jiān)聽觸發(fā)的實現(xiàn)。其實最終解釋就是對某種事件的callback(基礎(chǔ)原理)。

    以下是源碼目錄截圖:


    1... vue 實例初始化時,會對data函數(shù)返回的對象里的屬性調(diào)用以下方法,代碼注釋如下:

    // 這個是 vue 綁定自動綁定事件的方法和觸發(fā)事件方法, 會把data函數(shù)返回的對象變量屬性,重寫對應(yīng)屬性的 賦值 和獲取的操作。具體查看 (mdn Object.defineProperty api)
     Object.defineProperty(obj, key, {
     enumerable: true,
     configurable: true,
     get: function reactiveGetter () {
     const value = getter ? getter.call(obj) : val
     // watcher 對象, 如果存在
     if (Dep.target) {
     // 把Watcher 實例 推入 Dep 實例的 subs 數(shù)組里, 這個就相當于 on
     dep.depend()
     if (childOb) {
     childOb.dep.depend()
     if (Array.isArray(value)) {
     dependArray(value)
     }
     }
     }
     return value
     },
     set: function reactiveSetter (newVal) {
     const value = getter ? getter.call(obj) : val
     /* eslint-disable no-self-compare */
     if (newVal === value || (newVal !== newVal && value !== value)) {
     return
     }
     /* eslint-enable no-self-compare */
     if (process.env.NODE_ENV !== 'production' && customSetter) {
     customSetter()
     }
     if (setter) {
     setter.call(obj, newVal)
     } else {
     val = newVal
     }
     childOb = !shallow && observe(newVal)
     // 通知 Dep 實例 中subs 里數(shù)組 中所有 Watcher 實例, 然后調(diào)用Watcher實例里的 update方法(), 這個就相當于 trigger。
     dep.notify()
     }
     })
    // Watcher 構(gòu)造函數(shù) 
     constructor (
     vm: Component,
     expOrFn: string | Function,
     cb: Function,
     options?: ?Object,
     isRenderWatcher?: boolean
     )

    2...Watcher初始化時,會調(diào)用Dep.pushTarget方法, 把 Wathcer實例賦值到dep.js 里的Dep.target, 接著會根據(jù) exporFn,運行exporFn 所代表的方法。這個方法里基本上包含調(diào)用 1...里的getter方法(想想render鉤子里的操作基本有獲取vue實例屬性data里的值或者獲取vue實例的計算屬性的值)。

    var vm = new Vue({
     data () {
     return {msg: '找個小姐姐!'}
     },
     // 相當于 exporFn
     render(h) {
     return h('h3', {},
     // 這里面就會調(diào)用 msg 對應(yīng)的 getter方法
     this.msg
     )
     }
    })

    所以就會使 render 函數(shù) 與 Vue 實例 的 數(shù)據(jù) data屬性 和觀察屬性等產(chǎn)生聯(lián)系,這就形成一個閉環(huán)。當其中的屬性變化,就會自動調(diào)用 setter 方法,從而觸發(fā)dep.notify 方法,進而又會觸發(fā) dep.subs 里的 Watcher 實例調(diào)用 update方法,進而更新。
    (這部分代碼不知如何說,故此沒寫, 具體查看源碼)

    聲明:本網(wǎng)頁內(nèi)容旨在傳播知識,若有侵權(quán)等問題請及時與本網(wǎng)聯(lián)系,我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

    文檔

    vue觀察模式淺析

    vue觀察模式淺析:觀察者模式 首先話題下來,我們得反問一下自己,什么是觀察者模式? 概念 觀察者模式(Observer):通常又被稱作為發(fā)布-訂閱者模式。它定義了一種一對多的依賴關(guān)系,即當一個對象的狀態(tài)發(fā)生改變的時候,所有依賴于它的對象都會得到通知并自動更新,解決了主
    推薦度:
    標簽: 模式 VUE 觀察
    • 熱門焦點

    最新推薦

    猜你喜歡

    熱門推薦

    專題
    Top
    主站蜘蛛池模板: 欧美第一网站 | 欧美日韩亚洲视频 | 91精品久久久久久久久久 | 国产精品久久久久aaaa | 91中文字幕在线观看 | 亚洲另类欧美日韩 | 亚洲精品小视频 | 亚洲欧美日韩国产综合高清 | 国产日韩一区二区三区在线播放 | 亚州一区二区 | 黄色在线免费看 | 在线精品亚洲欧洲第一页 | 日韩网站在线观看 | 日韩国产在线播放 | 在线观看国产黄色 | 国产九区| 亚洲一二三区视频 | 国模大胆一区二区三区 | 欧美日韩亚洲第一页 | 国产欧美精品综合一区 | 亚洲一区二区三区精品影院 | 91香蕉国产亚洲一区二区三区 | 免费国产小视频在线观看 | 91视频一区二区三区 | 一区二区亚洲视频 | 日韩欧美理论 | 日韩欧美国产一区二区三区 | 亚洲精品午夜国产va久久成人 | 在线观看中文 | 福利一区福利二区 | 日韩精品一区二区三区毛片 | 亚洲国产综合久久精品 | 一级毛片免费毛片一级毛片免费 | 久久久久免费精品国产小说 | 91精品国产免费久久久久久 | 97久久综合区小说区图片专区 | 久久精品国产免费中文 | 亚洲国产精品一区二区久久 | 亚洲码欧美码一区二区三区 | 国产成人精品在视频 | 国产在线精品一区二区高清不卡 |