前言
如果把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当中将用户自定义的指令、过利器、组件等统称为资源。一个组件可以声明自己的私有资源,私有资源只有改组件和它的子组件可以调用
- 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是更为纯粹的手动定义的方法(更便捷的扩展了开发者自己的思维)
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的同时,也已经完全有能力担当起复杂的大型应用的开发。