国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

訂閱發布和vue雙向綁定

Joyven / 1688人閱讀

摘要:概念理解重要特性雙向綁定和之間無耦合通過操作利用提供的機制自動實現的更新。實現說明解析不包括模板指令等因為模板編譯解析等和本文核心主題無關這些僅僅是基于雙向綁定的應用場景。雙向綁定的核心是實現。

引言

</>復制代碼

  1. 最近在看vue的源碼,有些感觸,下面闡述一些個人理解。
    之前寫過一篇文章,是講述關于觀察者模式的,與本文主旨有關,需要的朋友可以看一下。

vue的核心是mvvm,vue2又增加了虛擬dom。
我的研究方向也是以這兩個為主。
本文主要講述mvvm,至于vdom(主要研究方向是整個思想和diff算法)下次再論述。

mvvm概念理解

m(model)v(view)vm(view-model),重要特性雙向綁定,m和v之間無耦合,通過操作m,利用vm提供的機制,自動實現v的更新。用過vue應該會有較深體會。

和其相對比比較容易誤解是mvc,m(model)v(view)c(controller),和mvvm的顯著區別是m和v之間存在耦合,業務邏輯集中在c當中。 用過springmvc應該會有體會。

mvvm實現

說明 解析不包括模板、指令、Mustache等,因為模板編譯、解析等和本文核心主題無關,這些僅僅是基于雙向綁定的應用場景。本文主題想討論的是->結合觀察者模式簡單實現雙向綁定的核心。

雙向綁定的核心是實現Dep、observer、Watcher。

Dep 存放收集Watcher,當訂閱的消息發生時(即數據發生改變),notify所有watch,讓訂閱者執行實現自己定義的update邏輯

Watcher 轉化表達式,收集依賴,當被觀察的值發生變化時,觸發callback。重要update方法,當model數據發生變化時,修改依賴指令或組件中的值,觸發callback函數

observer 是一個類,附屬于每一個被觀察的對象(即model數據),defineReactive=>observe方式給對象以及子屬性(實質調用defineProperty方式)建立get和set屬性方法

結合下圖,以便于大致理解。

關于其執行流程具體如下,上述示例圖中畫的其實也只是大致流程,實現過程中有很多細節,列舉幾個我認為比較重要的。

this.get()執行的時候,會把Dep的全局tatget對象置為當前對象,而data的get方法以此作為judge調用者依據,從而完成依賴收集,收集完cleanupDeps,將其置空,以免影響下次收集。

當data持續變化時,queueWatcher中has[id]的judge防止watcher重復添加,nextTick的使用保證view更新時使用的最新值,異步的應用有三種實現方式(兼容性考慮),基于優先級順序依次是Promise、MutationObserver、setTimeout。

data變化,view更新的實現是通過notify->run-> expOrFn.call(vm,vm)->vm._update(vnode, hydrating)->vm.__patch__(prevVnode, vnode)一系列調用過程實現。

觀察者體現

</>復制代碼

  1. 至于觀察者模式是如何在其中體現呢?

observer和Watcher是一對多的關系,連接機制通過dep(其中注冊了一些觀察者), 消息觸發根源是user,其行為導致model改變,被觀察者(data)進行notify, 具體訂閱者watcher執行自己預先定義好的update邏輯。

整個過程很好的體現了注冊-通知的機制。

總結

這篇文章分析基于Vue(Version 2.2.6),示例中圖畫的丑,畫圖真心不易。個人觀點,如有不同理解,歡迎comment。

文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。

轉載請注明本文地址:http://m.specialneedsforspecialkids.com/yun/82649.html

相關文章

  • Vue源碼解析(二)Vue雙向綁定講解及實現

    摘要:上篇文章,我們講解了的屬性映射和方法的重定義,鏈接地址如下源碼解析一屬性映射和函數引用的重定義這篇文章給大家帶來的是的雙向綁定講解。這就是的雙向綁定。使用定時器定時檢查的值,發生變化就通知訂閱者。這個方法不好,定時器不能實時反應變化。 文章中的代碼時階段,可以下載源碼測試一下。git項目地址:https://github.com/xubaodian/...項目使用webpack構建,下...

    ckllj 評論0 收藏0
  • 160行代碼仿Vue實現極簡雙向綁定[詳細注釋]

    摘要:兼容性更詳細的可以看一下實現思路系列的雙向綁定,關鍵步驟實現數據監聽器,用重寫數據的,值更新就在中通知訂閱者更新數據。 showImg(https://segmentfault.com/img/remote/1460000015375220?w=640&h=426); 前言 現在的前端面試不管你用的什么框架,總會問你這個框架的雙向綁定機制,有的甚至要求你現場實現一個雙向綁定出來,那對于...

    endiat 評論0 收藏0
  • vue 雙向數據綁定的實現學習(一)

    摘要:雙向數據綁定簡言之數據動頁面動,頁面動,數據動典型的應用就是在做表單時候,輸入框的內容改動后,跟該輸入框的的值改動。看官網上的這個的演示案例雙向數據綁定的好處要說出這個好處的時候,也只有在實際場景中才能對應的顯示出來。 前言:本系列學習筆記從以下幾個點展開 什么是雙向數據綁定 雙向數據綁定的好處 怎么實現雙向數據綁定 實現雙向數據數據綁定需要哪些知識點 數據劫持 發布訂閱模式 ...

    anonymoussf 評論0 收藏0
  • Vue面試題精選:Vue原理以及雙向數據綁定的實戰過程

    摘要:雙向數據綁定指的是,將對象屬性變化與視圖的變化相互綁定。數據雙向綁定已經了解到是通過數據劫持的方式來做數據綁定的,其中最核心的方法便是通過來實現對屬性的劫持,達到監聽數據變動的目的。和允許觀察數據的更改并觸發更新。 1 MVVM 雙向數據綁定指的是,將對象屬性變化與視圖的變化相互綁定。換句話說,如果有一個擁有name屬性的user對象,與元素的內容綁定,當給user.name賦予一個新...

    malakashi 評論0 收藏0

發表評論

0條評論

Joyven

|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<