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

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

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

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

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

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

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

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

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

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

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

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

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


  

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

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

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

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

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