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

成都創(chuàng)新互聯(lián)是專業(yè)的上栗網(wǎng)站建設公司，上栗接單;提供網(wǎng)站制作、成都網(wǎng)站建設,網(wǎng)頁設計,網(wǎng)站設計,建網(wǎng)站,PHP網(wǎng)站建設等專業(yè)做網(wǎng)站服務;采用PHP框架,可快速的進行上栗網(wǎng)站開發(fā)網(wǎng)頁制作和功能擴展;專業(yè)做搜索引擎喜愛的網(wǎng)站,專業(yè)的做網(wǎng)站團隊,希望更多企業(yè)前來合作!

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

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

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

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

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

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

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

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

MVVM框架

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

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

• View:指的是視圖部分，對應前端就是dom

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

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

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

對于數(shù)據(jù)驅(qū)動的實現(xiàn)，我們可以簡單的通過定時器來實現(xiàn)這個功能，定時器定時監(jiān)控對象數(shù)據(jù)，定時器監(jiān)控數(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);

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

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

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

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

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