加班加点一连一个多月，总算是快把一个开始时内心完整没有底的项目收工了。新项目基于旧系统开辟，在保存原有老架构jade + knockout + jquery + gulp的同时，新页面完整采纳vue + vue-route + vuex + webpack。两套框架都没正儿八经做过，jade和knockout第一次打仗，vue和webpack之前只是写写demo，vue-route和vuex也没用过，又碰巧别的一个前端同事去职，所以当时决议新页面完整用新框架的时刻，照样鼓了不少勇气的。

一气呵成，梳理下这段时候进修和运用vue今后，给本身最大的收成：开辟头脑转变。

事宜驱动

先说说之前前端发开的头脑体式格局。
比方说，要完成ajax体式格局提交一个表单，那末就要监听一个提交按钮的事宜。在触发点击事宜后，从页面的DOM元素中一个个网络数据，然后在做数据处置惩罚，末了挪用接口提交。网络数据是个迥殊烦琐的事变，种种选择器种种变量。

再比方说，在牢固区域内，事宜触发展现差别组件，那就要监听事宜通报来的条件，来推断哪一个组件要display:block，其他组件要display:none，以至能够大批用到DOM操纵，种种appendChild，insertBefore，removeChild。

其他相似依据条件addClass, removeClass调解组件款式；经由过程getAttribute、dataset等等猎取DOM绑定的数据；经由过程setAttribute、innerHtml等等直接修正DOM的操纵也是不可胜数。

个人觉得这类体式格局的优点就是直观，页面做任何转变全交由js处置惩罚，先干什么后干什么都由本身一手代码操控全场，有种掌控一切的觉得。

然则，大型项目里，代码编写的本钱和保护的本钱都很高。对代码范例的请求高，对笼统的请求高，尤其是笼统程度，全赖个人编程程度，笼统程度低的话，冗杂的代码基础不想多看一眼。这也许就是为啥项目里有一个代码写的烂的人在，代码就会愈来愈烂的缘由。

数据驱动

网上已许多关于数据驱动的文章了，但光看文章，体味远不如本身实践一遍来的印象深入。在基于vue开辟的新页面中，用js直接处置惩罚DOM的代码少少（刚开始上手的时刻平常都邑不太习气数据驱动编程，写些操纵DOM的代码，厥后逐步会替换掉的）。

数据驱动的条件是事先将DOM与数据绑定，像vue这类就是依靠defineProperties, setter, getter将一个vue对象与一个DOM节点模板关联起来，这个DOM节点里一切子节点、一切节点属性，全都能够和vue对象中的data绑定，做到data中某个属性值变化时，响应DOM节点中对应的某个属性就变化。

如此一来，关注点完整星散。离开设想页面DOM构造和数据构造，然后将DOM与数据构造做关联，以后一切的事宜触发的都只是数据的变化，DOM会自动依据数据的变化做响应转变。

前面例子中的表单提交，交由v-model属性将input双向绑定到data中去，在触发表单提交时，直接把data传给后端完事儿了；差别组件之间的切换，vue官网就有个动态组件的例子：

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

<component v-bind:is="currentView">
  <!-- 组件在 vm.currentview 变化时转变！ -->
</component>

只需体贴currentView的指向便可随意马虎切换组件，或许经由过程v-if或v-show来完成依据value的真假值来控制响应DOM节点是不是显现；其他DOM属性变化都能够用v-bind与data做绑定，比方v-bind:class=”dataClass”，只需dataClass一变化，DOM的class就会转变。

vue的这些动态绑定的功用很轻易上手，相对上手比较慢的是vue供应的组件功用，触及父子组件通信，以及用vuex完成全局state治理等等，先控制数据驱动的头脑，再打仗这些会轻易很多。

固然纵然vue也会碰到不能不直接操纵DOM的状况。纪录一个现在碰到实际问题：

有一个table组件，展现从背景传过来的数据。数据中会有”http://xxx.xxx/xxx.png”须要渲染成<img src=”” target=”_blank”>http://xxx.xxx/xxx.png”>标签。平常表格组件会供应formatter方法来处置惩罚单元格特别处置惩罚逻辑，这里我就不能不直接天生DOM节点

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