第一章 Vue.js简介
1、什么是Vue.js
Vue.js
,通常简称Vue,是一款友好,多用途且高性能的JavaScript框架,能够帮助我们创建可维护性和可测试性更强的代码。
它是一款渐近式的JavaScript框架。渐进式就是如果你有一个现成的服务端应用,也就是非单页应用,可以将Vue.js
作为该应用的一部分嵌入其中,带来更加丰富的交互体验。
2、Vue.js简史
2013年7月28日,尤雨溪,英文名叫Evan You,在Github上第一次为Vue.js提交代码,当时还不叫Vue.js,仓库中看出,这时的名字叫做Element,后来被更名为Seed.js;
2013年12月7日,尤雨溪在Github上发布了新版本0.6.6,将项目正式改名为Vue.js,并且把默认的指令前缀变成了 v- 。这一版本,代表Vue.js正式问世;
2014年2月1日,尤雨溪将Vue.js 0.8 发布在了国外的Hacker News网站,这代表它首次公开发布。
2015年10月26日,Vue.js终于迎来了1.0.0版本的发布;
2016年10月1日,祖国的生日,同时也是Vue.js 2.0发布的日子;
Vue.js 2.0 引入了非常多的特性,其中一个明显的效果是Vue.js变得更轻,更快了,引入了虚拟DOM,支持JSX和TypeScript,支持流失服务端渲染,支持跨平台的能力等。
第二章 Object的变化侦测
1、什么是变化侦测
Vue.js
会自动通过状态生成DOM,并将其输出到页面上显示出来,这个过程叫做渲染。通常,在运行时应用内部的状态会不断发生变化,此时需要不停地重新渲染。这时如何确定状态中发生了什么变化?
变化侦测就是用来解决这个问题的,它分为两种类型:
- “推”push
Vue.js的变化侦测属于“推”,当状态发送变化时,Vue.js立刻就知道,而且在一定程度上直到哪些状态变了。因此它知道的信息更多,也就可以进行更细粒度的更新。这样也有一定的代价,因为粒度越细,每个状态所绑定的依赖就越多,依赖追踪在内存上的开销就会越大。因此,从Vue.js 2.0 开始,它引入了虚拟DOM,将粒度调整为中等粒度,即一个状态所绑定的依赖不再是具体的DOM节点,而是一个组件。这样状态变化后,会通知到组件,组件内部在使用虚拟DOM进行比对。这可大大降低依赖数量,从而降低依赖追踪所消耗的内存。 - “拉”pull
Angular和React中的变化侦测都属于“拉”,就是说当状态发生变化时,他不知道哪个状态变了,只知道状态可能变了,然后就发送一个信号告诉框架,框架内部收到信号后,会进行一个暴力对比来找出哪些DOM节点需要重新渲染,这在Angular中是叫做脏检测,在React中使用的是虚拟DOM (简单说,状态变了,你不知道哪个状态变了,你就全部拉出来看,来一个一个比较看哪个状态变了,之后重新渲染)
2、变化侦测的过程
我们以
student {
name:'小明';
age:18;
school:{
sname:'XXXX';
adress:'XXX';
}
}
为数据案例
第一步,我们使用Object.defineProperty
进行封装,转变为getter/setter
的形式来追踪变化;
第二步:收集依赖,即把用到数据student
中属性的地方收集起来,getter
就是收集依赖;如果属性发生改变则在setter
中触发依赖;比如,我们修改了name:“小红”
,setter
触发依赖;
第三步:getter
收集依赖,我们把这些依赖存放到Dep类
中,它专门帮我们管理依赖,收集,删除或发生通知。比如,上一步修改了name
,触发了setter
,那么settter
就会通知Dep
;
第四步:属性发生变化之后,通知谁——Watcher
。比如,上一步,setter
已经通知Dep
,但Dep
只是用于存放的依赖地方,不能修改所用到依赖的地方,所以我们要通知Watcher
角色,然后它再通知到 使用了name
这个属性的其他地方,告诉它们,name
数据已经修改了,你们要更新了;
第五步:封装Observer类
,将数据内所有属性(子属性)都转换为getter/setter
的形式。比如,我们看到student
对象里面的其中一个属性school
也是一个对象,所以我们也要把这个school
对象中的属性都转为getter/setter
属性进行侦测。
3、关于Object的问题
无法侦测到一个新属性被添加到对象中,也无法侦测到一个属性从对象中删除,为了解决这个问题Vue.js
提供了两个API——vm.$set
/ vm.$delete
总结:
如有写的不好的地方,或不懂的地方,欢迎大家来找我讨论。
脚踏实地,一步一步来!!!