三大框架之vue.js

       

        如果把vue比作某样东西,那我会把它比作多细胞生物体,因为多细胞生物具有一定的层次与结构,而vue也具有特定的结构,怀着小V虐我千百遍我待小V如初恋的心态,我们试着将vue分解开来,看看里面到底有什么!

 

 

三大框架之vue.js_第1张图片

 

首先,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的同时,也已经完全有能力担当起复杂的大型应用的开发。

 

 

  

 

 

 

你可能感兴趣的:(三大框架之vue.js)