前端开发工具vue.js开发实践总结

最近有很长时间没有更新博客了，换了公司，全部的心思都放在项目上了。通过这次项目的上线，让我感受最深的是前后端分离后，前端页面的模块化管理，以及前端页面的数据邦定。在接触vue.js之前，我之前端要用到的dom结构，都是通过拼接字符串的方式进行输出的。这种方式最大的痛点是拼接很麻烦，也不是很直观，几乎无法复用，和数据紧密的偶合在一起，维护不方便，太多太多的问题。在同事的推荐下，开始接触vue.js这个开源项目。如果你不知道什么是vue,那么请看这里的介绍http://vuejs.org/。

vue的更新很快，从我最开始接触时的0.11.5，到现在的0.12.7，中文版的介绍一直停留在0.11.5的版本。如果是入门，且英文不是很好的情况下，我建议还是用0.11.5的版本。

如果你之前有用过angular.js或别的双向绑定的js库,那么你会有一种自来熟的感觉。当然，vue作为一个轻量的前端视图层工具，与angular相比，还是有很明显的区别的：

1. vue仅仅是mvvm中的view层，只是一个如jquery般的工具库，而不是框架，而angular而是mvvm框架。

2. vue的双向邦定是基于ES5 中的 getter/setters来实现的，而angular而是由自己实现一套模版编译规则，需要进行所谓的“脏”检查，vue则不需要。因此，vue在性能上更高效，但是代价是对于ie9以下的浏览器无法支持。

3. vue需要提供一个el对象进行实始化，后续的所有作用范围也是在el对象之下，而angular而是整个html页面。一个页面，可以有多个vue实例，而angular好像不是这么玩的。

4. vue真的很容易上手，学习成本相对低，不过可以参考的资料不是很丰富，官方文档比较简单，缺少全面的使用案例。高级的用法，需要自己去研究源码，至少目前是这样。

下面开始写一些的使用经验：

首先是你要去官网下载vue.js，具体的起步请参考：http://cn.vuejs.org/guide/index.html ，细节部分不在版书。

vue在构建的时候，需要使用new进行实例化，比如:

var view = new Vue({
   el : '#container'
});

　　el 根据官方api的介绍，可以是String | HTMLElement | Function, 一般来说，传一个id比较常用，这一步就是告诉vue,从这个节点开始，后面的内容就于vue开始接管了。

接管之后有些什么好处呢?

1. ajax取出的内容，再也不用拼接好再innerHTML到页面上了，直接在相要出现的地方写上{{数据}}或v-text="数据"或v-html="数据" ，就会自动显示出来。

2. 对于表单来说，特别input之类的元素，不再需要自己监听事件了。比如:

<input type="text" v-mode="name">
 <div>这里会自动显示input的value:{{name}}</div>

　　

这时，只要input中内容有变化，name的值就会自动在div中显示出来。这个在手机上的特别方便，不需要判断keycode,也不需要判断event是keyup还是keydown,

利用这个特性，进行表单元素的验证，也是很方便的。结合v-if,v-show,v-style,v-class这些控制器，可以实现以往，我们要写很复杂的ajax或者js才能实现的功能。

关于它们的用法，看看官网的示例，自己照着写一遍就知道了。只是关于v-class，官方的例子不是很清楚，我这里补充一下：

<div v-class="
     hide ： isHide,
     red   : isRed
"></div>

javascript:

new Vue({
 
       data:{
           isHide:true,
           isRed:true
       }
})

　　

　　这里的意思是说，当vue中的isHide是true的时候，就给div用hide的样式名,同理,如果isRed为true的时候，red的样式名也用上。假设isHide和isRed都为true,那么div的class属性就是这样的：

<div class="hide red"></div>

　　

关于v-if和v-show虽然都可以控制元素的显示和隐藏，但是它们是有区别的。如果用v-if的话，整个dom结构压根就不会出现在页面上，如果是用v-show的话，要视后面的条件来定，如果是true,则显示，如果为false,则加上style="display:none". 所以呢，如果是组件之类的大块头，个人觉得用v-if更好一些，如果是一些暂时性隐藏，一会要显示的，还是v-show更方便。对于v-style和v-show来比较，v-show相当于是v-style="display:none"和v-style="display:block"的快捷方式。

用vue,少不了要介绍它的组件，v-component="my-component", 为什么要用组件呢，它是提高代码复用的大杀技。比如要输出一个列表，如果dom结构一致，只是数据不同，那么html中，只要写上组件名就可以了。

html:

<div id="wrap">
<div v-component="list" v-with="list1"></div>
<div v-component="list" v-with="list2"></div>
<!-- v-with="是指要邦定给当前组件的数据"-->
</div>

　　

javascript:

var view = new Vue({
   el : '#wrap',
 
   data:{
      list1 : [{name:'frog'},{name:'bjtqti'}],
      list2: []
   },
    components : {
        list : {
             template:'<li>{{name}}</div>'
        }
    }
});

　　

说完组件，就是dom节点的引用，在没有用vue之前，我们对页面结点找查，需要依赖jquery之类的工具，而在vue中，对于需要引用的dom节点，只要在页面上写上v-el="取个名“就可以拿到。

比如取下面的元素：

<div v-el="wrap">
//....
</div>

在jquery中，需要$('div')[0],而在vue中直接用view.$$.wrap就可以了。(view是new Vue()产生的实例引用)

   var view = new Vue({...});
 
  alert(view.$$.wrap)
 

　　可以说是指哪取哪，这也是angular曾经宣称要干掉jquery这样的工具的理由。这其实一点也不稀奇，因为vue在实例化的时候，实际上就是遍列了页面的所有dom节点，加一个标记，就是告诉vue,这个地方呆会我要用，给我记住了。用的时候，报名字，自动送上来。当然，关于vue能做的还有很多，由于时间关系，就不细写了。

最后要说的一点是，vue实例化需要遍历页面上所有结点，所以，如果不需要vue进行管理的dom，且下面子节点又很多的情况下，最好给它加上v-pre指令，vue会自动忽略它，对于由大量动态数据生成的内容，最好用组件来存放，一来提高代码复用，二来减少初始化vue时在扫描dom上所消耜的时间。一般来说，一个页面，只实例化一个vue实例就好。

说到提高性能，vue对于大部分数据都是进行双向邦定的，在dom节点创建之后，数据所占用的内存依然是保存的。所以对于内存点用比传统的字符串方式要高，对于下拉加载这样的操作，还是蛮令人担心的。官方说，对v-repeat这样的指令，通过使用track-by过滤具有相同特征的字段,比如id，可以有效减少相同元素的重复渲染。虽然使用vue还没有到需要我们这样操心内存的地步，这也是我们为了操作方便所要付出的代价，我个人认为，不需要双向邦定的数据，特别是大量的数据，还是不要用为好。当然，如果你对React这样的单向邦定的视图工具比较熟的话，结合用，就更好了。再或者，自己扩展一个vue的指令，用来处理这种特殊的情况，这些都是考验个人学习能力的活，新技术都不完美，所以才要不断学习,追求新技术的过程，也就是追求完美的过程。