内容简介:这周经历的事情有点多, 从周一的一面,到周二的二面到周三的口头offer,周四的体检, 最后再到没收到正式offer,主要原因是在背调的时候发现虚报了原始薪资(10k报12k)和学历问题(我是延毕的)。认清了自己的品质并不好,还是要诚信诶。在小公司工作了两年,迫切希望能在中大型公司中工作。对于这次的失利,还是挺难受的。恰逢周末,通读了《深入浅出vue.js》,写点零零散散的记录吧。在开始读vue源码之前,学习资料绕不开Vue.js技术揭秘和Vue技术内幕这两个文档, 巧的是这两篇源码解读都是从
这周经历的事情有点多, 从周一的一面,到周二的二面到周三的口头offer,周四的体检, 最后再到没收到正式offer,主要原因是在背调的时候发现虚报了原始薪资(10k报12k)和学历问题(我是延毕的)。认清了自己的品质并不好,还是要诚信诶。
在小公司工作了两年,迫切希望能在中大型公司中工作。对于这次的失利,还是挺难受的。恰逢周末,通读了《深入浅出vue.js》,写点零零散散的记录吧。 因为只是想写点东西,研究的不透彻不到位不一定正确,下文质量奇差,阅读过程请注意,请见谅。
在开始读vue源码之前,学习资料绕不开Vue.js技术揭秘和Vue技术内幕这两个文档, 巧的是这两篇源码解读都是从 new Vue()
开始引导我们逐步进入Vue源码的大门, 但从《深入浅出vue.js》中展现了另外一种思路。
先看一下vue的定义
Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架。
加上我们平时使用的经验, 这里我思考下,vue的源码,是要实现什么功能。就像在做一个项目的时候,我们需要进行需求定义一样。
总结了一下,有些跳跃性思维:
- 发布-订阅者模式
- 虚拟DOM
- 模板编译
- 扩展方法
在我的理解中, vue源码核心就是这四件事,其他的有跨平台的包装、提供vue的构造函数和代码结构等等。
一、发布-订阅者模式
这里就不解释这个模式的定义了。我们从代码方面考虑一下实现这个模式需要哪些类和方法。
首先我们都知道,实现这个模式的原理是通过 Object.defineProperty
(vue3.0要改成proxy)为data封装了get和set方法。在getter中收集依赖, 在setter中触发依赖。所以我们需要封装一个函数,或者说是封装一个类,可以拿到一个data,就把data中所有的属性都用 Object.defineProperty
处理一下。这个类在vue源码中就是 Observer ,它的作用就是将一个数据内的所有属性(包括紫属性)都转换成getter、setter的形式,然后追踪它们的变化。
然后我们考虑一下getter中收集依赖的功能要怎么实现,在js中用来存放数据的,我们首先想到的是用数组,再考虑到getter中收集了依赖,可能还会触发其他逻辑,例如需要增删判重呀,所以我们又要封装一个类。 这个类在vue源码中就是 Dep 类,它专门用来帮助我们管理依赖。使用这个类,我们可以收集依赖、删除依赖或者向依赖发送通知等。
再然后我们再想一下,什么是依赖呢,不可能我在记录依赖中就记入用到data的文件名和代码行位置吧。所以我们又需要封装一个类来代表依赖。这个类在xue源码中就是 Watcher 类。Watcher类本质是一个中介,数据发生变化时通知他,然后它再通知其他地方。在我们自己的代码编译阶段,每当遇到一个使用data的地方, 就在那个地方new一个Watcher,至于记录位置嘛,直接把this传进去就好了呀。而且好玩的是,这new Watcher的时候,我们会触发到data的getter方法(因为我们要把数据返回给那个位置嘛),这个getter就自动把Watcher加入到Dep中了,省下了我们还需要遍历代码,再把Watcher加进Dep这个逻辑了。
这里该有张图,就随便贴一张啦= =
大概逻辑就完成了,剩下的就是打补丁,各种bug类型有:
- object的数据可以用getter/setter,array咋办,例如array可以直接push,才不会调你的setter呢。解决吧,找个拦截器,覆盖Array原型上的push、pop、shift等方法,往里一贴,干脆就在拦截器中触发依赖,bug解决,加薪。
- 有一天我往object里添加属性、删除属性,用this.list[0] = 1的方式修改数组时,发现并没有触发更新这个操作,用户怎么办?提bug!程序员怎么办?打补丁!想一想
defineProperty
确实监听不到,es6之前也不能模拟数组的原生行为,那就让用户自己多注意解决吧,给你提供一个vm.$set
,一个vm.$delete
。好了,下班。代码没bug,是你不会用。 - 一上午只想到这两,剩下还有的话大家自己发现吧。
二、虚拟DOM
首先老生常谈一下,引入虚拟DOM后,是80%的场景下提高了渲染速度,而剩下20%反而变慢了。
作为一个框架,我们不仅要考虑减少 程序员 的工作量,还要考虑到用户的体验方面。为了从整体上提高渲染速度,听说有个流行的概念叫virtual DOM,咱vue也要用。
虚拟DOM呢,用代码来实现,也就是一个类,在vue源码中叫做VNode类,我们用这个类来描述真实DOM元素,而且还可以扩展描述,比如说我们可以给vnode也增加分类,这个vnode叫做注释节点,那个叫文本节点,还有个叫元素节点,还有其他的这里不扩展。
有了虚拟DOM,最终还是要渲染到真实DOM上,这个过程就叫patch,这个在源码中也是大头了,但咱不具体讲了,我们先只要知道patch做的事,本质上是新增节点,删除节点和更新节点。源码中大量的代码都是尽可能的优化这个过程。
三、模板编译
vue这个逻辑也很清晰,齐步三步走:1.解析器,2.优化器,3.代码生成器。
平时我们在写.vue文件时,template中的代码看上去和html结构一样,但它为啥能实现 v-for
, v-if
, {{message}}
呢,那就是因为我们看到的网页,并不是我们的template,而是被vue编译过的。
首先,逐行解析咱的代码,用的是HTML解析器和文本解析器,把代码转换成AST(抽象语法树)。
然后,对AST使用优化器优化,例如标记静态节点啥的。
最后,通过代码生成器,把AST编译成可调用的JS语句。由此就可以去生成virtual DOM了。
四、扩展方法 通过以上三个模块,这个框架就歪歪斜斜的搭建起来了。在我们不得不用jquery来写代码的时候,也可以利用上面的思路。
为了用户的体验和逻辑的完整,vue的余下代码中提供了很多方法。包括: vm.$on
, vm.$emit
, vm.$nextTick
, Vue.extend
, Vue.filter
,生命周期钩子函数等等。
以上所述就是小编给大家介绍的《【vue真的香】开始读源码》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!
猜你喜欢:- Redux 源码解读 —— 从源码开始学 Redux
- 学习 ZooKeeper 源码,就从这篇开始
- Cocoapods 源码浅析 - 从 pod 命令开始
- 从理解 Phoenix 索引源码开始,构建全文索引
- 从零开始学习 dotnet 编译过程和 Roslyn 源码分析
- Mac 下 Android 源码编译从零开始:Day Two--编译
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
渐进增强的Web设计
[美] Todd Parker、[英] Patty Toland、[英] Scott Jehl、[法] Maggie Costello Wachs / 牛化成 / 人民邮电出版社 / 2014-1 / 69.00
本书由全球著名Web设计公司Filament集团两位创始人和两位开发主力联手打造,其中Scott Jehl还是jQuery团队成员。四位作者具有多年的网站设计和开发经验,曾为网站、无线设备、Web应用设计过众多高度实用的用户界面,受到了高度赞扬。本书展示了如何利用渐进增强方法开发网站,从而获得最佳用户体验。本书既是理解渐进增强原则和益处的实用指南,也用详细的案例分析,目的是向设计师以及开发人员传授......一起来看看 《渐进增强的Web设计》 这本书的介绍吧!
Markdown 在线编辑器
Markdown 在线编辑器
正则表达式在线测试
正则表达式在线测试