摘要：趁熱打鐵，梳理下這段時(shí)間學(xué)習(xí)和使用以后，給自己最大的收獲開(kāi)發(fā)思維轉(zhuǎn)變。事件驅(qū)動(dòng)先說(shuō)說(shuō)以前前端發(fā)開(kāi)的思維方式。分開(kāi)設(shè)計(jì)頁(yè)面結(jié)構(gòu)和數(shù)據(jù)結(jié)構(gòu)，然后將與數(shù)據(jù)結(jié)構(gòu)做關(guān)聯(lián)，之后所有的事件觸發(fā)的都只是數(shù)據(jù)的變化，會(huì)自動(dòng)根據(jù)數(shù)據(jù)的變化做相應(yīng)改變。

加班加點(diǎn)連續(xù)一個(gè)多月，總算是快把一個(gè)開(kāi)始時(shí)心里完全沒(méi)有底的項(xiàng)目收工了。新項(xiàng)目基于舊系統(tǒng)開(kāi)發(fā)，在保留原有老架構(gòu)jade + knockout + jquery + gulp的同時(shí)，新頁(yè)面完全采用vue + vue-route + vuex + webpack。兩套框架都沒(méi)正兒八經(jīng)做過(guò)，jade和knockout第一次接觸，vue和webpack以前只是寫(xiě)寫(xiě)demo，vue-route和vuex也沒(méi)用過(guò)，又恰巧另外一個(gè)前端同事離職，所以當(dāng)時(shí)決定新頁(yè)面完全用新框架的時(shí)候，還是鼓了不少勇氣的。

趁熱打鐵，梳理下這段時(shí)間學(xué)習(xí)和使用vue以后，給自己最大的收獲：開(kāi)發(fā)思維轉(zhuǎn)變。

先說(shuō)說(shuō)以前前端發(fā)開(kāi)的思維方式。
比如說(shuō)，要實(shí)現(xiàn)ajax方式提交一個(gè)表單，那么就要監(jiān)聽(tīng)一個(gè)提交按鈕的事件。在觸發(fā)點(diǎn)擊事件后，從頁(yè)面的DOM元素中一個(gè)個(gè)收集數(shù)據(jù)，然后在做數(shù)據(jù)處理，最后調(diào)用接口提交。收集數(shù)據(jù)是個(gè)特別繁瑣的事情，各種選擇器各種變量。

再比如說(shuō)，在固定區(qū)域內(nèi)，事件觸發(fā)展示不同組件，那就要監(jiān)聽(tīng)事件傳遞來(lái)的條件，來(lái)判斷哪個(gè)組件要display:block，其他組件要display:none，甚至可能大量用到DOM操作，各種appendChild，insertBefore，removeChild。

其他類似根據(jù)條件addClass, removeClass調(diào)整組件樣式；通過(guò)getAttribute、dataset等等獲取DOM綁定的數(shù)據(jù)；通過(guò)setAttribute、innerHtml等等直接修改DOM的操作也是數(shù)不勝數(shù)。

個(gè)人感覺(jué)這種方式的好處就是直觀，頁(yè)面做任何改變?nèi)挥蒵s處理，先干什么后干什么都由自己一手代碼操控全場(chǎng)，有種掌控一切的感覺(jué)。

但是，大型項(xiàng)目里，代碼編寫(xiě)的成本和維護(hù)的成本都很高。對(duì)代碼規(guī)范的要求高，對(duì)抽象的要求高，尤其是抽象程度，全賴個(gè)人編程水平，抽象程度低的話，冗長(zhǎng)的代碼根本不想多看一眼。這大概就是為啥項(xiàng)目里有一個(gè)代碼寫(xiě)的爛的人在，代碼就會(huì)越來(lái)越爛的原因。

網(wǎng)上已經(jīng)很多關(guān)于數(shù)據(jù)驅(qū)動(dòng)的文章了，但光看文章，體會(huì)遠(yuǎn)不如自己實(shí)踐一遍來(lái)的印象深刻。在基于vue開(kāi)發(fā)的新頁(yè)面中，用js直接處理DOM的代碼極少（剛開(kāi)始上手的時(shí)候一般都會(huì)不太習(xí)慣數(shù)據(jù)驅(qū)動(dòng)編程，寫(xiě)些操作DOM的代碼，后來(lái)慢慢會(huì)替換掉的）。

數(shù)據(jù)驅(qū)動(dòng)的前提是事先將DOM與數(shù)據(jù)綁定，像vue這種就是依賴defineProperties, setter, getter將一個(gè)vue對(duì)象與一個(gè)DOM節(jié)點(diǎn)模板關(guān)聯(lián)起來(lái)，這個(gè)DOM節(jié)點(diǎn)里所有子節(jié)點(diǎn)、所有節(jié)點(diǎn)屬性，全都可以和vue對(duì)象中的data綁定，做到data中某個(gè)屬性值變化時(shí)，相應(yīng)DOM節(jié)點(diǎn)中對(duì)應(yīng)的某個(gè)屬性就變化。

如此一來(lái)，關(guān)注點(diǎn)完全分離。分開(kāi)設(shè)計(jì)頁(yè)面DOM結(jié)構(gòu)和數(shù)據(jù)結(jié)構(gòu)，然后將DOM與數(shù)據(jù)結(jié)構(gòu)做關(guān)聯(lián)，之后所有的事件觸發(fā)的都只是數(shù)據(jù)的變化，DOM會(huì)自動(dòng)根據(jù)數(shù)據(jù)的變化做相應(yīng)改變。

前面例子中的表單提交，交由v-model屬性將input雙向綁定到data中去，在觸發(fā)表單提交時(shí)，直接把data傳給后端完事兒了；不同組件之間的切換，vue官網(wǎng)就有個(gè)動(dòng)態(tài)組件的例子：

var vm = new Vue({
  el: "#example",
  data: {
    currentView: "home"
  },
  components: {
    home,
    posts,
    archive
  }
})


  

只需關(guān)心currentView的指向便可輕易切換組件，或者通過(guò)v-if或v-show來(lái)實(shí)現(xiàn)根據(jù)value的真假值來(lái)控制相應(yīng)DOM節(jié)點(diǎn)是否顯示；其他DOM屬性變化都可以用v-bind與data做綁定，比如v-bind:class="dataClass"，只要dataClass一變化，DOM的class就會(huì)改變。

vue的這些動(dòng)態(tài)綁定的功能很容易上手，相對(duì)上手比較慢的是vue提供的組件功能，涉及父子組件通訊，以及用vuex實(shí)現(xiàn)全局state管理等等，先掌握數(shù)據(jù)驅(qū)動(dòng)的思想，再接觸這些會(huì)容易得多。

當(dāng)然即使vue也會(huì)遇到不得不直接操作DOM的情況。記錄一個(gè)目前遇到實(shí)際問(wèn)題：

有一個(gè)table組件，展示從后臺(tái)傳過(guò)來(lái)的數(shù)據(jù)。數(shù)據(jù)中會(huì)有"http://xxx.xxx/xxx.png"需要渲染成標(biāo)簽。一般表格組件會(huì)提供formatter方法來(lái)處理單元格特殊處理邏輯，這里我就不得不直接生成DOM節(jié)點(diǎn)

formatter: function({picUrl}){
    this.$createElement("img", {
        attrs: {
            src: picUrl
        },
    }
}