python组件化软件策划_Vue.js：轻量高效的前端组件化方案

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

开发初衷

2013年末，我还在Google Creative Lab工作。当时在项目中使用了一段时间的Angular，在感叹数据绑定带来生产力提升的同时，我也感到Angular的API设计过于繁琐，使得学习曲线颇为陡峭。出于对Angular数据绑定原理的好奇，我开始 “造轮子”，自己实现了一个非常粗糙的、基于依赖收集的数据绑定库。这就是Vue.js的前身。同时在实际开发中，我发现用户界面完全可以用嵌套的组件树来描述，而一个组件恰恰可以对应MVVM中的ViewModel。于是我决定将我的数据绑定实验改进成一个真正的开源项目，其核心思想便是 “数据驱动的组件系统”。

MVVM 数据绑定

MVVM的本质是通过数据绑定链接View和Model，让数据的变化自动映射为视图的更新。Vue.js在数据绑定的API设计上借鉴了Angular的指令机制：用户可以通过具有特殊前缀的HTML 属性来实现数据绑定，也可以使用常见的花括号模板插值，或是在表单元素上使用双向绑定：

{{msg}}

插值本质上也是指令，只是为了方便模板的书写。在模板的编译过程中，Vue.js会为每一处需要动态更新的DOM节点创建一个指令对象。每当一个指令对象观测的数据变化时，它便会对所绑定的目标节点执行相应的DOM操作。基于指令的数据绑定使得具体的DOM操作都被合理地封装在指令定义中，业务代码只需要涉及模板和对数据状态的操作即可，这使得应用的开发效率和可维护性都大大提升。

与Angular不同的是，Vue.js的API里并没有繁杂的module、controller、scope、factory、service等概念，一切都是以“ViewModel 实例”为基本单位：

{{msg}}

//原生对象即数据

var data ={

msg:'hello!'}//创建一个 ViewModel 实例

var vm = newVue({//选择目标元素

el: '#app',//提供初始数据

data: data

})

渲染结果：

hello!