資訊專欄INFORMATION COLUMN
摘要：概念理解重要特性雙向綁定和之間無(wú)耦合通過(guò)操作利用提供的機(jī)制自動(dòng)實(shí)現(xiàn)的更新。實(shí)現(xiàn)說(shuō)明解析不包括模板指令等因?yàn)槟０寰幾g解析等和本文核心主題無(wú)關(guān)這些僅僅是基于雙向綁定的應(yīng)用場(chǎng)景。雙向綁定的核心是實(shí)現(xiàn)。
引言
最近在看vue的源碼,有些感觸,下面闡述一些個(gè)人理解。
之前寫過(guò)一篇文章,是講述關(guān)于觀察者模式的,與本文主旨有關(guān),需要的朋友可以看一下。
vue的核心是mvvm,vue2又增加了虛擬dom。
我的研究方向也是以這兩個(gè)為主。
本文主要講述mvvm,至于vdom(主要研究方向是整個(gè)思想和diff算法)下次再論述。
m(model)v(view)vm(view-model),重要特性雙向綁定,m和v之間無(wú)耦合,通過(guò)操作m,利用vm提供的機(jī)制,自動(dòng)實(shí)現(xiàn)v的更新。用過(guò)vue應(yīng)該會(huì)有較深體會(huì)。
和其相對(duì)比比較容易誤解是mvc,m(model)v(view)c(controller),和mvvm的顯著區(qū)別是m和v之間存在耦合,業(yè)務(wù)邏輯集中在c當(dāng)中。 用過(guò)springmvc應(yīng)該會(huì)有體會(huì)。
mvvm實(shí)現(xiàn)說(shuō)明 解析不包括模板、指令、Mustache等,因?yàn)槟０寰幾g、解析等和本文核心主題無(wú)關(guān),這些僅僅是基于雙向綁定的應(yīng)用場(chǎng)景。本文主題想討論的是->結(jié)合觀察者模式簡(jiǎn)單實(shí)現(xiàn)雙向綁定的核心。
雙向綁定的核心是實(shí)現(xiàn)Dep、observer、Watcher。
Dep 存放收集Watcher,當(dāng)訂閱的消息發(fā)生時(shí)(即數(shù)據(jù)發(fā)生改變),notify所有watch,讓訂閱者執(zhí)行實(shí)現(xiàn)自己定義的update邏輯
Watcher 轉(zhuǎn)化表達(dá)式,收集依賴,當(dāng)被觀察的值發(fā)生變化時(shí),觸發(fā)callback。重要update方法,當(dāng)model數(shù)據(jù)發(fā)生變化時(shí),修改依賴指令或組件中的值,觸發(fā)callback函數(shù)
observer 是一個(gè)類,附屬于每一個(gè)被觀察的對(duì)象(即model數(shù)據(jù)),defineReactive=>observe方式給對(duì)象以及子屬性(實(shí)質(zhì)調(diào)用defineProperty方式)建立get和set屬性方法
結(jié)合下圖,以便于大致理解。
關(guān)于其執(zhí)行流程具體如下,上述示例圖中畫的其實(shí)也只是大致流程,實(shí)現(xiàn)過(guò)程中有很多細(xì)節(jié),列舉幾個(gè)我認(rèn)為比較重要的。
this.get()執(zhí)行的時(shí)候,會(huì)把Dep的全局tatget對(duì)象置為當(dāng)前對(duì)象,而data的get方法以此作為judge調(diào)用者依據(jù),從而完成依賴收集,收集完cleanupDeps,將其置空,以免影響下次收集。
當(dāng)data持續(xù)變化時(shí),queueWatcher中has[id]的judge防止watcher重復(fù)添加,nextTick的使用保證view更新時(shí)使用的最新值,異步的應(yīng)用有三種實(shí)現(xiàn)方式(兼容性考慮),基于優(yōu)先級(jí)順序依次是Promise、MutationObserver、setTimeout。
data變化,view更新的實(shí)現(xiàn)是通過(guò)notify->run-> expOrFn.call(vm,vm)->vm._update(vnode, hydrating)->vm.__patch__(prevVnode, vnode)一系列調(diào)用過(guò)程實(shí)現(xiàn)。
觀察者體現(xiàn)至于觀察者模式是如何在其中體現(xiàn)呢?
observer和Watcher是一對(duì)多的關(guān)系,連接機(jī)制通過(guò)dep(其中注冊(cè)了一些觀察者), 消息觸發(fā)根源是user,其行為導(dǎo)致model改變,被觀察者(data)進(jìn)行notify, 具體訂閱者watcher執(zhí)行自己預(yù)先定義好的update邏輯。
整個(gè)過(guò)程很好的體現(xiàn)了注冊(cè)-通知的機(jī)制。
總結(jié)這篇文章分析基于Vue(Version 2.2.6),示例中圖畫的丑,畫圖真心不易。個(gè)人觀點(diǎn),如有不同理解,歡迎comment。
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/82649.html
摘要：上篇文章，我們講解了的屬性映射和方法的重定義，鏈接地址如下源碼解析一屬性映射和函數(shù)引用的重定義這篇文章給大家?guī)?lái)的是的雙向綁定講解。這就是的雙向綁定。使用定時(shí)器定時(shí)檢查的值，發(fā)生變化就通知訂閱者。這個(gè)方法不好，定時(shí)器不能實(shí)時(shí)反應(yīng)變化。 文章中的代碼時(shí)階段，可以下載源碼測(cè)試一下。git項(xiàng)目地址：https://github.com/xubaodian/...項(xiàng)目使用webpack構(gòu)建，下...
摘要：兼容性更詳細(xì)的可以看一下實(shí)現(xiàn)思路系列的雙向綁定，關(guān)鍵步驟實(shí)現(xiàn)數(shù)據(jù)監(jiān)聽器，用重寫數(shù)據(jù)的，值更新就在中通知訂閱者更新數(shù)據(jù)。 showImg(https://segmentfault.com/img/remote/1460000015375220?w=640&h=426); 前言 現(xiàn)在的前端面試不管你用的什么框架，總會(huì)問(wèn)你這個(gè)框架的雙向綁定機(jī)制，有的甚至要求你現(xiàn)場(chǎng)實(shí)現(xiàn)一個(gè)雙向綁定出來(lái)，那對(duì)于...
摘要：雙向數(shù)據(jù)綁定簡(jiǎn)言之?dāng)?shù)據(jù)動(dòng)頁(yè)面動(dòng)，頁(yè)面動(dòng)，數(shù)據(jù)動(dòng)典型的應(yīng)用就是在做表單時(shí)候，輸入框的內(nèi)容改動(dòng)后，跟該輸入框的的值改動(dòng)?？垂倬W(wǎng)上的這個(gè)的演示案例雙向數(shù)據(jù)綁定的好處要說(shuō)出這個(gè)好處的時(shí)候，也只有在實(shí)際場(chǎng)景中才能對(duì)應(yīng)的顯示出來(lái)。 前言：本系列學(xué)習(xí)筆記從以下幾個(gè)點(diǎn)展開 什么是雙向數(shù)據(jù)綁定 雙向數(shù)據(jù)綁定的好處 怎么實(shí)現(xiàn)雙向數(shù)據(jù)綁定 實(shí)現(xiàn)雙向數(shù)據(jù)數(shù)據(jù)綁定需要哪些知識(shí)點(diǎn) 數(shù)據(jù)劫持 發(fā)布訂閱模式 ...
摘要：雙向數(shù)據(jù)綁定指的是，將對(duì)象屬性變化與視圖的變化相互綁定。數(shù)據(jù)雙向綁定已經(jīng)了解到是通過(guò)數(shù)據(jù)劫持的方式來(lái)做數(shù)據(jù)綁定的，其中最核心的方法便是通過(guò)來(lái)實(shí)現(xiàn)對(duì)屬性的劫持，達(dá)到監(jiān)聽數(shù)據(jù)變動(dòng)的目的。和允許觀察數(shù)據(jù)的更改并觸發(fā)更新。 1 MVVM 雙向數(shù)據(jù)綁定指的是，將對(duì)象屬性變化與視圖的變化相互綁定。換句話說(shuō)，如果有一個(gè)擁有name屬性的user對(duì)象，與元素的內(nèi)容綁定，當(dāng)給user.name賦予一個(gè)新...
閱讀 693·2021-11-24 09:39
閱讀 2364·2021-11-22 13:54
閱讀 2231·2021-09-23 11:46
閱讀 3275·2019-08-30 15:55
閱讀 2705·2019-08-30 15:54
閱讀 2437·2019-08-30 14:18
閱讀 1567·2019-08-29 14:15
閱讀 2759·2019-08-29 13:49
