您的位置:首页 > 设计教程 > 网页设计 > 内页

Vue.js:轻量高效的前端组件化方案

核心提示: Vue js 是2014年2月开源的一个前端开发库,通过简洁的 API 提供高效的数据绑定和灵活的组件系统。在前端纷繁复杂的生态中,Vue js有幸受到一定程度的关注,目前在 GitHub上已经有5000+的star。本文将从各方面对Vue js做一个深入的介绍。

同时,还可以在*.vue文件中使用其他预处理器,只需要安装对应的Webpack loader即可:

 





<script lang="babel">
// 利用 Babel 编译 ES2015
export default {
  data () {
    return {
      msg: 'Hello from Babel!'
    }
  }
}
</script>

 

 

这样的组件格式,把一个组件的模板、样式、逻辑三要素整合在同一个文件中,即方便开发,也方便复用和维护。另外,Vue.js本身支持对组件的异步加载,配合Webpack的分块打包功能,可以极其轻松地实现组件的异步按需加载。

其他特性

Vue.js还有几个值得一提的特性:

 

  1. 异步批量DOM更新:当大量数据变动时,所有受到影响的watcher会被推送到一个队列中,并且每个watcher只会推进队列一次。这个队列会在进程的下一个 “tick” 异步执行。这个机制可以避免同一个数据多次变动产生的多余DOM操作,也可以保证所有的DOM写操作在一起执行,避免DOM读写切换可能导致的layout。
  2. 动画系统:Vue.js提供了简单却强大的动画系统,当一个元素的可见性变化时,用户不仅可以很简单地定义对应的CSS Transition或Animation效果,还可以利用丰富的JavaScript钩子函数进行更底层的动画处理。
  3. 可扩展性:除了自定义指令、过滤器和组件,Vue.js还提供了灵活的mixin机制,让用户可以在多个组件中复用共同的特性。

 

与Web Components的异同

对Web Components有了解的读者看到这里可能会产生疑问:Vue.js的组件和Web Components的区别在哪里呢?这里简要地做一下分析。

Web Components是一套底层规范,本身并不带有数据绑定、动画系统等上层功能,因此更合适的比较对象可能是Polymer。Polymer在API和功能上和Vue.js比较相似,但它对Web Components的硬性依赖使得它在浏览器支持方面有一定的问题——在不支持Web Components规范的浏览器中,需要加载庞大的polyfill,不仅在性能上会有影响,并且有些功能,比如ShadowDOM,polyfill并没有办法完美支持。同时,Web Components规范本身尚未定稿,一些具体设计上仍存在不小的分歧。相比之下,Vue.js在支持的浏览器中(IE9+)没有任何依赖。

除此之外,在支持Web Components的环境中,我们也可以很简单地利用Web Components底层API将一个Vue.js组件封装在一个真正的自定义元素中,从而实现Vue.js组件和其他框架的无缝整合。

总结

在发布之初,Vue.js原本是着眼于轻量的嵌入式使用场景。在今天,Vue.js也依然适用于这样的场景。由于其轻量(22kb min+gzip)、高性能的特点,对于移动场景也有很好的契合度。更重要的是,设计完备的组件系统和配套的构建工具、插件,使得Vue.js在保留了其简洁API的同时,也已经完全有能力担当起复杂的大型应用的开发。

从诞生起到现在的一年半历程中,Vue.js经历了一次彻底的重构,多次API的设计改进,目前已经趋于稳定,测试覆盖率长期保持在100%,GitHub Bug数量长期保持在个位数,并在世界各地都已经有公司/项目将Vue.js应用到生产环境中。在2015年晚些时候,Vue.js将发布1.0版本,敬请期待。

【参考链接】

Vue.js官方网站:http://vuejs.org

Vue.js GitHub仓库:https://github.com/yyx990803/vue

Webpack官方网站: http://webpack.github.io

vue-loader单页组件示例:https://github.com/vuejs/vue-loader-example

文章源自 设计联盟 www.DesignLinks.cn 中国最具影响力的创意设计综合网站

编辑:Beach

资讯标签: 轻量 前端 方案
搜索推荐
设计联盟官方微信
设计联盟官方微信
微信公众号:designlinks
扫一扫 订阅最新资讯
回到顶部