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

成都創(chuàng)新互聯(lián)服務(wù)項(xiàng)目包括金水網(wǎng)站建設(shè)、金水網(wǎng)站制作、金水網(wǎng)頁(yè)制作以及金水網(wǎng)絡(luò)營(yíng)銷(xiāo)策劃等。多年來(lái)，我們專(zhuān)注于互聯(lián)網(wǎng)行業(yè)，利用自身積累的技術(shù)優(yōu)勢(shì)、行業(yè)經(jīng)驗(yàn)、深度合作伙伴關(guān)系等，向廣大中小型企業(yè)、政府機(jī)構(gòu)等提供互聯(lián)網(wǎng)行業(yè)的解決方案，金水網(wǎng)站推廣取得了明顯的社會(huì)效益與經(jīng)濟(jì)效益。目前，我們服務(wù)的客戶(hù)以成都為中心已經(jīng)輻射到金水省份的部分城市，未來(lái)相信會(huì)繼續(xù)擴(kuò)大服務(wù)區(qū)域并繼續(xù)獲得客戶(hù)的支持與信任！

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

比如說(shuō)我們點(diǎn)擊一個(gè)button，需要元素的文本進(jìn)行是和否的切換。在jquery刀耕火種的年代中，對(duì)于頁(yè)面的修改我們一般是這樣的一個(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ù)的變化就能夠自然的通知頁(yè)面進(jìn)行頁(yè)面的重新渲染。

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

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

MVVM框架

Vuejs的數(shù)據(jù)驅(qū)動(dòng)是通過(guò)MVVM這種框架來(lái)實(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)是不能直接通訊的，而是需要通過(guò)ViewModel來(lái)實(shí)現(xiàn)雙方的通訊。當(dāng)數(shù)據(jù)變化的時(shí)候，viewModel能夠監(jiān)聽(tīng)到這種變化，并及時(shí)的通知view做出修改。同樣的，當(dāng)頁(yè)面有事件觸發(fā)時(shí)，viewMOdel也能夠監(jiān)聽(tīng)到事件，并通知model進(jìn)行響應(yīng)。Viewmodel就相當(dāng)于一個(gè)觀(guān)察者，監(jiān)控著雙方的動(dòng)作，并及時(shí)通知對(duì)方進(jìn)行相應(yīng)的操作。

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

對(duì)于數(shù)據(jù)驅(qū)動(dòng)的實(shí)現(xiàn)，我們可以簡(jiǎn)單的通過(guò)定時(shí)器來(lái)實(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);

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無(wú)理由+7*72小時(shí)售后在線(xiàn)，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國(guó)服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性?xún)r(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專(zhuān)為企業(yè)上云打造定制，能夠滿(mǎn)足用戶(hù)豐富、多元化的應(yīng)用場(chǎng)景需求。

當(dāng)前名稱(chēng)：淺談vuejs實(shí)現(xiàn)數(shù)據(jù)驅(qū)動(dòng)視圖原理-創(chuàng)新互聯(lián)
轉(zhuǎn)載注明：http://www.chinadenli.net/article22/dceecc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供外貿(mào)建站、虛擬主機(jī)、App設(shè)計(jì)、網(wǎng)站內(nèi)鏈、面包屑導(dǎo)航、品牌網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀(guān)點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話(huà)：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)