如果把vue比作某样东西，那我会把它比作多细胞生物体，因为多细胞生物具有一定的层次与结构，而vue也具有特定的结构，怀着小V虐我千百遍我待小V如初恋的心态，我们试着将vue分解开来，看看里面到底有什么！
首先，vue的核心要素：1、数据驱动（概念） 2、组件式编程（思想）
一、数据驱动：
1、Vue.js数据观测原理在技术实现上，利用的是ES5Object.defineProperty和储存器属性：getter个setter（所以只兼容ie9及以上版本），可称为基于依赖收集的观测机制。核心是vm，即ViweModel，保证数据和视图的一致性。
2、watcher：每一个指令都会有一个对应的用来观测数据的对象，叫做watcher，比如v-text='msg'，{{msg}}，即为两个watcher，watcher对象中包含了待渲染的关联DOM元素。
3、基于依赖收集的观测机制原理
- 将原生的数据改造成'可观察对象'，通常为调用defineProperty改变data对象中数据为存 储器属性，一个可观察对象可以被取值getter，也可以被赋值setter。
- 在解析模板，也就是watcher的求值过程中，每一个被取值的可观察对象都会将当前的 watcher注册为自己的一个订阅者，并成为当前watcher的一个依赖。
- 当一个被依赖的可观察对象被赋值时，它会通知notify所有订阅自己的watcher重新求 值，并触发相应的更新，即watcher对象中关联的DOM改变渲染。
- 优点：依赖收集的优点在于可以精确、主动的追踪数据的变化，不需要手动触发或对作用 域中所有watcher都求值（angulpushar脏检查实现方式的缺点），特殊的是，对于数 组，需要通过包裹数组的可变方法（比如push）来监听数组的变化，在添加/删除属性， 或是修改数组特定位置元素时，也需要调用特定的函数，如obj.$add( key,value )才能出 发更新，这是es5的语言特性所限。
二、组件式编程（思想）：
1、组件的核心（思想）
- 模板（template）：模板声明了数据和最终展现给用户的DOM之间的映射关系
- 初始数据（data）：一个组件的初始数据状态。对于可复用的组件来说，这通常是私有状态
- 接收的外部参数（props）：组件之间用过参数来进行数据的传递和共享
- 方法（methods）：对数据的改动操作一般都在组件的方法内进行
- 声明周期钩子函数（lifecycle hooks）：一个组件会出发多个生命周期钩子函数，最新2.0版本对于生命周期名称改动很大
- 私有资源（assets）：vue.js当中将用户自定义的指令、过利器、组件等统称为资源。一个组件可以声明自己的私有资源，私有资源只有改组件和它的子组件可以调用
2、声明周期
- beforeCreate：组件实例刚刚被创建，组件属性计算之前，如data属性实例化之前（el和data并未初始化。el：undefined；data：undefined；message：undefined）
- created：组件实例化完成，属性已经绑定，但DOM还没生成，$el属性不存在（完成了data数据的初始化，但是el没有。el：undefined；data：[Object][Object]；message：'数据'）
- beforeMount：模板编译/挂载之前（完成了el和data的初始化。el：p>{{message}}<p/>；data：[Object][Object]；message：'数据'）
- mounted：模板编译/挂载之后（完成了挂载。el：p>数据<p/>；data：[Object][Object]；message：'数据'）
- methods：定义事件（为其可读性，建议所有事件都绑定在methods(){}里面，根据业务不同，动态的在各个钩子内部调用）
- beforeUpdate：组件更新之前，此时模板会被重新编译（mounted输出新的数据）
- updated：组件更新之后
- activated：组件被激活时调用
- deactivated：组件被移除时调用
- beforeDestroy：组件销毁前调用
- destroyed：组件销毁后调用
* 生命周期总结： ①beforecreated：可以在这里加loading开始
②created：在这里结束loading，还可以做一些初始化，实现函数自执行
③mounted：在这里发起后端请求，拿回数据，配合路由钩子做一些事情
④beforeDestroy：你确认要删除XX吗？
⑤destroyed：当前组件已被删除
3、vue指令
- v-for：循环
- v-show：显示与隐藏（display：none/block）
- v-if：现实与隐藏（根据表达式的值动态选择是否挂载DOM树）
- v-class：动态绑定元素的class
- ：class="[num?'red':'green']"
- v-style与上类似
4、数据侦听
- computed：个人觉得computed更适合做过滤器，监听一个数据的变化，根据应用逻辑 返回新的数据，这也是过滤器的本质，可利用闭包扩展
- watch ：为了发现对象内部值的变化，可以在选项参数中指定deep：true，注意监 听数组化的时候不需要这么做
* computed/watch/methods的区别：
- computed为响应式运算（只关心运算结果）
- watch为监听动作（可拿到新值和旧值去处理一些特有逻辑）
- methods是更为纯粹的手动定义的方法（更便捷的扩展了开发者自己的思维）
5、vue-router
概念：路由（就是指向的意思）
- route ：它是一条路由，home按钮=>home内容 about按钮=>about内容
- routes：它是一组路由，把上面每一天路由结合起来，就形成了一个数组
[{home按钮=>home内容}，{about按钮=>about内容}]
- router ：router是一个机制，相当于一个管理者，它负责管理路由，因为routes只是定义了一组路由，它放在那里是静态的，当真正来了请求，怎么办？就是当用户点击home按钮的时候，这是router就起作用了，它会到routes中去查找，去找对应的home内容，所以页面中就会显示home内容
总结：vue.js学习曲线非常平稳，主要是文档实在太优秀了，旁证了设计师出身的程序员多可怕，其轻量、高性能的特点，对于移动场景也有很好的契合，更重要的是，设计完备的组件系统和配套的构建工具、插件，使得vue.js在保留了其简洁API的同时，也已经完全有能力担当起复杂的大型应用的开发。