三大框架之vue.js

前言

       若是把vue比做某样东西，那我会把它比做多细胞生物体，由于多细胞生物具备必定的层次结构，而vue也具备特定的结构，怀着小V虐我千百遍我待小V如初恋的心态，咱们试着将vue分解开来，看看里面到底有什么！

vue的核心要素：一、数据驱动（概念）    二、组件式编程（思想）

1、数据驱动：

一、Vue.js数据观测原理在技术实现上，利用的是ES5Object.defineProperty和储存器属性：getter个setter（因此只兼容ie9及以上版本），可称为基于依赖收集的观测机制。核心是vm，即ViweModel，保证数据和视图的一致性。

二、watcher：每个指令都会有一个对应的用来观测数据的对象，叫作watcher，好比v-text='msg'，{{msg}}，即为两个watcher，watcher对象中包含了待渲染的关联DOM元素。

三、基于依赖收集的观测机制原理

•  将原生的数据改形成'可观察对象'，一般为调用defineProperty改变data对象中数据为存   储器属性，一个可观察对象能够被取值getter，也能够被赋值setter。
  
•  在解析模板，也就是watcher的求值过程当中，每个被取值的可观察对象都会将当前的   watcher注册为本身的一个订阅者，并成为当前watcher的一个依赖。
  
•  当一个被依赖的可观察对象被赋值时，它会通知notify全部订阅本身的watcher从新求   值，并触发相应的更新，即watcher对象中关联的DOM改变渲染。
  
•  优势：依赖收集的优势在于能够精确、主动的追踪数据的变化，不须要手动触发或对做用   域中全部watcher都求值（angulpushar脏检查实现方式的缺点），特殊的是，对于数 组，须要经过包裹数组的可变方法（好比push）来监听数组的变化，在添加/删除属性，   或是修改数组特定位置元素时，也须要调用特定的函数，如obj.$add( key,value )才能出   发更新，这是es5的语言特性所限。

2、组件式编程（思想）：

一、组件的核心（思想）

• 模板（template）：模板声明了数据和最终展示给用户的DOM之间的映射关系
  
• 初始数据（data）：一个组件的初始数据状态。对于可复用的组件来讲，这一般是私有状态
• 接收的外部参数（props）：组件之间用过参数来进行数据的传递和共享
• 方法（methods）：对数据的改动操做通常都在组件的方法内进行
• 声明周期钩子函数（lifecycle hooks）：一个组件会出发多个生命周期钩子函数，最新2.0版本对于生命周期名称改动很大
• 私有资源（assets）：vue.js当中将用户自定义的指令、过利器、组件等统称为资源。一个组件能够声明本身的私有资源，私有资源只有改组件和它的子组件能够调用
  

二、声明周期

• 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：当前组件已被删除

                        

三、vue指令

• v-for：循环
• v-show：显示与隐藏（display：none/block）
• v-if：现实与隐藏（根据表达式的值动态选择是否挂载DOM树）
• v-class：动态绑定元素的class
• ：class="[num?'red':'green']"
• v-style与上相似

四、数据侦听

• computed：我的以为computed更适合作过滤器，监听一个数据的变化，根据应用逻辑                        返回新的数据，这也是过滤器的本质，可利用闭包扩展
• watch        ：为了发现对象内部值的变化，能够在选项参数中指定deep：true，注意监                         听数组变化的时候不须要这么作

   *  computed/watch/methods的区别：

• computed为响应式运算（只关心运算结果）
  
• watch为监听动做（可拿到新值和旧值去处理一些特有逻辑）
• methods是更为纯粹的手动定义的方法（更便捷的扩展了开发者本身的思惟）
  

五、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的同时，也已经彻底有能力担当起复杂的大型应用的开发。