三大框架之vue.js

       

        如果把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}}

  ；data：[Object][Object]；message：'数据'）

• mounted：模板编译/挂载之后（完成了挂载。el：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的同时，也已经完全有能力担当起复杂的大型应用的开发。