vue.js浅谈

vue.js是一套构建用户界面的渐进式框架，vue.js的目标是通过尽可能简单的API实现响应的数据绑定和组合的视图组件。
vue.js是MVVM的架构，如图：

从图中可以看出视图层和模型层的相互传递，通过用户操作来绑定一些DOM事件来重新渲染到视图层。具体的内部架构如下图：

vue通过DOM事件操作和指令来进行视图层和模型层的相互通讯。可以看出vue是以“ViewModel 实例”为基本单位，没有Angular繁杂的概念，简单易上手。

vue最重要的就是 数据绑定和组件系统
数据绑定
数据绑定是怎么实现的呢
数据绑定即是视图层和模型层的双向绑定，双向绑定则是基本ES5中的object.defineProperty的属性
如下图绿色部分：

里面的两个属性getter和setter，在这两个函数内部实现依赖的收集和触发，而且完美支持嵌套的对象结构。对于数组，则通过包裹数组的可变方法（比如push）来监听数组的变化。这使得操作Vue.js的数据和操作原生对象几乎没有差别。
组件系统
相信基本上所有的现代框架都已经走向了组件化道路，Web Components 从规范层面做这个实践。主流框架都有各有不同的封装，但 核心思想都是一样，把UI结构映射到恰当的组件树 ，如下图所示:

在Vue中，父子组件之间的通信是通过 props 传递。从父向子单向传递；而如果子组件想要在父组件作用里面产生副作用，就需要去派发事件。这样就形成一个基本的父子通信模式.
Vue的组件引入构建工具之后有一个 单文件组件概念 ，如下图所示，就是这个Vue文件。在同一个Vue文件里，可以同时写 template, script 和 style，三个东西放在一个里面。同时，Vue的单文件组件和 Web Components 有一个本质不同，它是基于构建工具实现。这样的好处是有了一个构建的机会，可以对这些单文件组件做更多的分析处，在每一个语言块里可以单独使用不同的处理器.

从上面可以看出VUE是简单的积木系统，虽然没有angular和react完善的架构，但数据和用户操作相得益彰。以上只是基本描述，当做实际项目的时候，才知道有哪些坑需要填。呵呵！