千鋒教育-做有情懷、有良心、有品質(zhì)的職業(yè)教育機(jī)構(gòu)

手機(jī)站
千鋒教育

千鋒學(xué)習(xí)站 | 隨時(shí)隨地免費(fèi)學(xué)

千鋒教育

掃一掃進(jìn)入千鋒手機(jī)站

領(lǐng)取全套視頻
千鋒教育

關(guān)注千鋒學(xué)習(xí)站小程序
隨時(shí)隨地免費(fèi)學(xué)習(xí)課程

當(dāng)前位置:首頁(yè)  >  技術(shù)干貨  > 前端技巧|vue雙向綁定原理 助你面試成功

前端技巧|vue雙向綁定原理 助你面試成功

來(lái)源:千鋒教育
發(fā)布人:小千
時(shí)間: 2021-03-01 09:05:00 1614560700

      在面試一些大廠(chǎng)的時(shí)候,面試官可能會(huì)問(wèn)到你vue雙向數(shù)據(jù)綁定的原理是什么?有些小伙伴不知道是什么東西,這樣你在面試官的眼里就大打折扣了,今天小千就來(lái)給大家介紹一下vue的雙向綁定原理,千萬(wàn)不要錯(cuò)過(guò)啦。

      vue雙向綁定

      大家其實(shí)對(duì)于這個(gè)問(wèn)題不會(huì)很陌生,vue中采用mvvm的模式,內(nèi)置vm將view層與model層兩者進(jìn)行關(guān)聯(lián),任何一方的變化都會(huì)讓另外一方受到影響。那回答完后,面試官還會(huì)繼續(xù)追問(wèn),請(qǐng)回答一下你理解的雙向數(shù)據(jù)綁定背后的原理是什么?那今天我們就一起探討一下vue的背后的一些方式實(shí)現(xiàn)。

      所謂要實(shí)現(xiàn)雙向數(shù)據(jù)綁定,vue中內(nèi)部采用了發(fā)布-訂閱模式。內(nèi)部結(jié)合了Object.defineProperty這個(gè)ES5的新特性(ie8瀏覽器可不支持哦...),對(duì)vue傳入的數(shù)據(jù)進(jìn)行了相應(yīng)的數(shù)據(jù)攔截,為其動(dòng)態(tài)添加get與set方法。當(dāng)數(shù)據(jù)變化的時(shí)候,就會(huì)觸發(fā)對(duì)應(yīng)的set方法,當(dāng)set方法觸發(fā)完成的時(shí)候,內(nèi)部會(huì)進(jìn)一步觸發(fā)watcher,當(dāng)數(shù)據(jù)改變了,接著進(jìn)行虛擬dom對(duì)比,執(zhí)行render,后續(xù)視圖更新操作完畢。

      來(lái),直接上圖看一下

1

      好,分析完原理后,我們來(lái)看下es5這個(gè)方法Object.defineProperty有什么用呢?

      上代碼運(yùn)行一下:

2

      運(yùn)行的時(shí)候,我們不難發(fā)現(xiàn),輸入框里面的內(nèi)容改變的時(shí)候,p標(biāo)簽里面的值也會(huì)對(duì)應(yīng)的得到變化。原因是因?yàn)楫?dāng)輸入框的內(nèi)容發(fā)生變化的時(shí)候,我們獲取到了輸入框的值,然后將其賦值給object.msg屬性。這樣object的msg屬性的set方法就會(huì)被執(zhí)行,從而將對(duì)應(yīng)的content值進(jìn)行了改變。

      那,后續(xù)當(dāng)我們?nèi)バ薷臄?shù)據(jù),視圖會(huì)不會(huì)自動(dòng)更新呢?

3

      這樣,整了一個(gè)定時(shí)器,過(guò)了2s中,修改了對(duì)象的數(shù)據(jù),對(duì)象數(shù)據(jù)發(fā)生變化,從而又會(huì)觸發(fā)set方法,實(shí)現(xiàn)了響應(yīng)的數(shù)據(jù)改變,視圖也會(huì)變成了hello-world的值。其實(shí),這就是借助了vue中的Object.defineProperty對(duì)于數(shù)據(jù)的攔截處理的流程。

      補(bǔ)充小貼士

      vue 2.x中使用的Object.defineProperty對(duì)于數(shù)據(jù)進(jìn)行攔截,其實(shí)還是有缺陷的

      1、對(duì)象屬性的新加或者刪除無(wú)法監(jiān)聽(tīng);

      2、數(shù)組元素的增加和刪除無(wú)法監(jiān)聽(tīng)

      那為啥2.x的時(shí)候不解決呢,從兩點(diǎn)考慮:

      1.性能:通過(guò)遍歷對(duì)象的屬性進(jìn)行監(jiān)聽(tīng),但是屬性值也是對(duì)象就需要深度遍歷了,這時(shí)候顯然能夠劫持完整對(duì)象更好

      2.無(wú)法監(jiān)聽(tīng)數(shù)組:屬性值改為數(shù)組,數(shù)組也算是一種特殊的對(duì)象,下標(biāo)其實(shí)就是對(duì)象的屬性,理論上是可以通過(guò)Object.defineProperty來(lái)處理的,那尤大大為什么沒(méi)有采用這種方式呢,猜測(cè)源于數(shù)組的使用場(chǎng)景,數(shù)組的主要操作場(chǎng)景是遍歷,如果每一個(gè)元素都掛載set和get方法,會(huì)產(chǎn)生巨大性能消耗,而且數(shù)組下標(biāo)變化頻繁,操作方法居多,一旦數(shù)組長(zhǎng)度發(fā)生變化,在無(wú)法自動(dòng)檢測(cè)的狀態(tài)下,手動(dòng)更新會(huì)是一個(gè)相當(dāng)繁瑣的工作。

      那vue中是如何實(shí)現(xiàn)對(duì)數(shù)組的劫持呢,對(duì)7種常用的數(shù)組操作進(jìn)行了重寫(xiě),分別是push() 、pop() 、shift()、 unshift() 、splice() 、sort()、 reverse(),其中Vue.set()對(duì)于數(shù)組的處理其實(shí)就是調(diào)用了splice方法

      針對(duì)Object.defineProperty的缺點(diǎn),ES6 Proxy都能夠完美得解決,它唯一的缺 點(diǎn)就是,對(duì)IE不友好,所以vue3在檢測(cè)到如果是使用IE的情況下(沒(méi)錯(cuò),IE11都不支持Proxy),會(huì)自動(dòng)降級(jí)為Object.defineProperty的數(shù)據(jù)監(jiān)聽(tīng)系統(tǒng)。

      那么到這一步,恭喜哦! 你已經(jīng)明白了vue2.x的雙向數(shù)據(jù)綁定原理了

      想學(xué)習(xí)web前端的同學(xué),可以參考千鋒web前端培訓(xùn)班提供的web前端學(xué)習(xí)路線(xiàn),該學(xué)習(xí)路線(xiàn)對(duì)從零基礎(chǔ)小白到web前端初級(jí)開(kāi)發(fā)工程師,web前端高級(jí)開(kāi)發(fā)工程師,后面的web前端大神級(jí)開(kāi)發(fā)工程師都有一個(gè)明確清晰的指導(dǎo),根據(jù)千鋒web前端培訓(xùn)機(jī)構(gòu)提供的web前端學(xué)習(xí)路線(xiàn)圖可以讓你對(duì)學(xué)習(xí)web前端開(kāi)發(fā)需要掌握的知識(shí)有個(gè)清晰的了解,并快速入門(mén)web前端開(kāi)發(fā)。想要獲取前端完整學(xué)習(xí)路線(xiàn)和免費(fèi)的學(xué)習(xí)資料可以添加我們的web前端技術(shù)分享交流qq群:857920838  加群找群管理領(lǐng)取即可,等你來(lái)哦~~

tags:
聲明:本站稿件版權(quán)均屬千鋒教育所有,未經(jīng)許可不得擅自轉(zhuǎn)載。
10年以上業(yè)內(nèi)強(qiáng)師集結(jié),手把手帶你蛻變精英
請(qǐng)您保持通訊暢通,專(zhuān)屬學(xué)習(xí)老師24小時(shí)內(nèi)將與您1V1溝通
免費(fèi)領(lǐng)取
今日已有369人領(lǐng)取成功
劉同學(xué) 138****2860 剛剛成功領(lǐng)取
王同學(xué) 131****2015 剛剛成功領(lǐng)取
張同學(xué) 133****4652 剛剛成功領(lǐng)取
李同學(xué) 135****8607 剛剛成功領(lǐng)取
楊同學(xué) 132****5667 剛剛成功領(lǐng)取
岳同學(xué) 134****6652 剛剛成功領(lǐng)取
梁同學(xué) 157****2950 剛剛成功領(lǐng)取
劉同學(xué) 189****1015 剛剛成功領(lǐng)取
張同學(xué) 155****4678 剛剛成功領(lǐng)取
鄒同學(xué) 139****2907 剛剛成功領(lǐng)取
董同學(xué) 138****2867 剛剛成功領(lǐng)取
周同學(xué) 136****3602 剛剛成功領(lǐng)取
相關(guān)推薦HOT
什么是分治算法,和遞歸有什么關(guān)系?

分治算法是什么分治算法是一種算法設(shè)計(jì)思想,其主要思想是將一個(gè)復(fù)雜的問(wèn)題分解為兩個(gè)或更多相同或相似的子問(wèn)題,直到子問(wèn)題簡(jiǎn)單到可以直接解決...詳情>>

2023-10-14 03:22:51
為什么微服務(wù)一定要上Docker?

為什么微服務(wù)一定要上Docker微服務(wù)作為一種軟件架構(gòu)模式,需要考慮的因素包括服務(wù)的獨(dú)立性、可擴(kuò)展性、可維護(hù)性和可移植性等。這其中,Docker的...詳情>>

2023-10-14 03:15:33
C++的traits技術(shù)到底是什么?

在C++編程中,traits是一種編程技巧,其主要目的是在編譯時(shí)提供關(guān)于類(lèi)型的額外信息。它可以將類(lèi)型的一些特性(如其關(guān)聯(lián)類(lèi)型、屬性、函數(shù)等)抽...詳情>>

2023-10-14 03:00:03
汽車(chē)行業(yè)什么工作會(huì)用到MATLAB?

MATLAB在汽車(chē)行業(yè)的應(yīng)用MATLAB是一種用于算法開(kāi)發(fā)、數(shù)據(jù)可視化、數(shù)據(jù)分析和數(shù)值計(jì)算的高級(jí)語(yǔ)言和交互式環(huán)境。在汽車(chē)行業(yè)中,MATLAB的應(yīng)用非常廣...詳情>>

2023-10-14 02:45:08
紅帽RHEL8和7有什么區(qū)別?

一、軟件包管理器的區(qū)別軟件包管理器是操作系統(tǒng)中管理軟件包的工具,RHEL 8和7在軟件包管理器方面有一些重要的區(qū)別:RHEL 8采用了新的軟件包管...詳情>>

2023-10-14 02:41:24
快速通道