這篇文章主要介紹vue.js中數(shù)據(jù)驅(qū)動(dòng)指的是什么，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

專注于為中小企業(yè)提供成都網(wǎng)站制作、成都做網(wǎng)站服務(wù),電腦端+手機(jī)端+微信端的三站合一,更高效的管理,為中小企業(yè)祁陽免費(fèi)做網(wǎng)站提供優(yōu)質(zhì)的服務(wù)。我們立足成都，凝聚了一批互聯(lián)網(wǎng)行業(yè)人才，有力地推動(dòng)了上千企業(yè)的穩(wěn)健成長(zhǎng)，幫助中小企業(yè)通過網(wǎng)站建設(shè)實(shí)現(xiàn)規(guī)模擴(kuò)充和轉(zhuǎn)變。

vue.js中數(shù)據(jù)驅(qū)動(dòng)是當(dāng)數(shù)據(jù)發(fā)生變化的時(shí)候，用戶界面發(fā)生相應(yīng)的變化，開發(fā)者不需要手動(dòng)的去修改dom，vuejs封裝了數(shù)據(jù)和dom對(duì)象操作的映射，我們只需要關(guān)心數(shù)據(jù)的邏輯處理。

什么是數(shù)據(jù)驅(qū)動(dòng)

數(shù)據(jù)驅(qū)動(dòng)是vuejs較大的特點(diǎn)。在vuejs中，所謂的數(shù)據(jù)驅(qū)動(dòng)就是當(dāng)數(shù)據(jù)發(fā)生變化的時(shí)候，用戶界面發(fā)生相應(yīng)的變化，開發(fā)者不需要手動(dòng)的去修改dom。

比如說我們點(diǎn)擊一個(gè)button，需要元素的文本進(jìn)行是和否的切換。在jquery刀耕火種的年代中，對(duì)于頁面的修改我們一般是這樣的一個(gè)流程，我們對(duì)button綁定事件，然后獲取文案對(duì)應(yīng)的元素dom對(duì)象，然后根據(jù)切換修改該dom對(duì)象的文案值。

而對(duì)于vuejs實(shí)現(xiàn)這個(gè)功能的流程，只需要在button元素上指明事件，同時(shí)聲明對(duì)應(yīng)文案的屬性，點(diǎn)擊事件的時(shí)候改變屬性的值，對(duì)應(yīng)元素的文本就能夠自動(dòng)的進(jìn)行切換，我們不需要像以前那樣手動(dòng)的操作dom。

簡(jiǎn)而言之，就是vuejs幫我們封裝了數(shù)據(jù)和dom對(duì)象操作的映射，我們只需要關(guān)心數(shù)據(jù)的邏輯處理，數(shù)據(jù)的變化就能夠自然的通知頁面進(jìn)行頁面的重新渲染。

這樣做的確實(shí)給我們帶來的好處，我們不需要再在代碼中頻繁地去操作dom了，在實(shí)際項(xiàng)目中，我們有很大部分代碼都是在數(shù)據(jù)修改以后，手動(dòng)操作重新渲染頁面元素，當(dāng)頁面越來越復(fù)雜的時(shí)候，頁面代碼組織會(huì)越來難以維護(hù)。同時(shí)，js對(duì)dom的頻繁操作，會(huì)使得頁面代碼的出錯(cuò)概率高，頁面的視圖展示會(huì)融合在js代碼中，對(duì)于頁面視圖顯示的升級(jí)也不友好。

那么vuejs是如何實(shí)現(xiàn)這種數(shù)據(jù)驅(qū)動(dòng)的呢？

MVVM框架

Vuejs的數(shù)據(jù)驅(qū)動(dòng)是通過MVVM這種框架來實(shí)現(xiàn)的。MVVM框架主要包含3個(gè)部分:model、view和 viewmodel。

• Model:指的是數(shù)據(jù)部分，對(duì)應(yīng)到前端就是javascript對(duì)象

• View:指的是視圖部分，對(duì)應(yīng)前端就是dom

• Viewmodel:就是連接視圖與數(shù)據(jù)的中間件

數(shù)據(jù)(Model)和視圖(View)是不能直接通訊的，而是需要通過ViewModel來實(shí)現(xiàn)雙方的通訊。當(dāng)數(shù)據(jù)變化的時(shí)候，viewModel能夠監(jiān)聽到這種變化，并及時(shí)的通知view做出修改。同樣的，當(dāng)頁面有事件觸發(fā)時(shí)，viewMOdel也能夠監(jiān)聽到事件，并通知model進(jìn)行響應(yīng)。Viewmodel就相當(dāng)于一個(gè)觀察者，監(jiān)控著雙方的動(dòng)作，并及時(shí)通知對(duì)方進(jìn)行相應(yīng)的操作。

Vue.js的數(shù)據(jù)驅(qū)動(dòng)實(shí)現(xiàn)

對(duì)于數(shù)據(jù)驅(qū)動(dòng)的實(shí)現(xiàn)，我們可以簡(jiǎn)單的通過定時(shí)器來實(shí)現(xiàn)這個(gè)功能，定時(shí)器定時(shí)監(jiān)控對(duì)象數(shù)據(jù)，定時(shí)器監(jiān)控?cái)?shù)據(jù)變化，確定是否更新界面

    a = 1;
    function renderDom(){
        document.getElementById('app').innerHTML = '數(shù)據(jù)是' + a;
    }
    
    function watcher(method){
        var b = a;
        method.apply();
         return setInterval(function(){
           if(b != a){
                method.apply();
                b = a;
           }
        }, 1000)
    }
    watcher(renderDom);

當(dāng)然vuejs不可能是這樣簡(jiǎn)單暴力的實(shí)現(xiàn)方式，vuejs是通過在實(shí)現(xiàn)一個(gè)觀察者來實(shí)現(xiàn)的數(shù)據(jù)驅(qū)動(dòng)。

首先，vuejs在實(shí)例化的過程中，會(huì)對(duì)遍歷傳給實(shí)例化對(duì)象選項(xiàng)中的data 選項(xiàng)，遍歷其所有屬性并使用 Object.defineProperty 把這些屬性全部轉(zhuǎn)為 getter/setter。

同時(shí)每一個(gè)實(shí)例對(duì)象都有一個(gè)watcher實(shí)例對(duì)象，他會(huì)在模板編譯的過程中,用getter去訪問data的屬性，watcher此時(shí)就會(huì)把用到的data屬性記為依賴，這樣就建立了視圖與數(shù)據(jù)之間的聯(lián)系。當(dāng)之后我們渲染視圖的數(shù)據(jù)依賴發(fā)生改變（即數(shù)據(jù)的setter被調(diào)用）的時(shí)候，watcher會(huì)對(duì)比前后兩個(gè)的數(shù)值是否發(fā)生變化，然后確定是否通知視圖進(jìn)行重新渲染。

這樣就實(shí)現(xiàn)了所謂的數(shù)據(jù)對(duì)于視圖的驅(qū)動(dòng)。

以上是“vue.js中數(shù)據(jù)驅(qū)動(dòng)指的是什么”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

網(wǎng)站名稱：vue.js中數(shù)據(jù)驅(qū)動(dòng)指的是什么-創(chuàng)新互聯(lián)
分享鏈接：http://aaarwkj.com/article38/dipisp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供移動(dòng)網(wǎng)站建設(shè)、營(yíng)銷型網(wǎng)站建設(shè)、網(wǎng)站導(dǎo)航、服務(wù)器托管、品牌網(wǎng)站制作、靜態(tài)網(wǎ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í)需注明來源： 創(chuàng)新互聯(lián)