作者:empty 页数:456 出版社:empty |
Vue.js技术揭秘
致谢
当前文档《Vue, js技术揭秘》由进击的皇虫使用书栈(BookStack, CN) 进行构建, 生成于2018-12-10。书栈(Bookstack.CN) 仅提供文档编写、整理、归类等功能, 以及对文档内容的生成和导出工具。文档内容由网友们编写和整理, 书栈(BookStack.CN) 难以确认文档内容知识点是否错漏。如果您在阅读文档获取知识的时候,发现文档内容有不恰当的地方,请向我们反馈,让我们共同携手,将知识准确、高效且有效地传递给每一个人。同时,如果您在日常工作、生活和学习中遇到有价值有营养的知识文档,欢迎分享到书栈(BookStack.CN) , 为知识的传承献上您的一份力量!如果当前文档生成时间太久, 请到书栈(BookStack.CN) 获取最新的文档, 以跟上知识更新换代的步伐。文档地址:http://www.bookstack.cn/books/vue-analysis书栈官网:http://www.bookstack.cn书栈开源:https://github.com/TruthHun分享,让知识传承更久远!感谢知识的创造者,感谢知识的分享者,也感谢每一位阅读到此处的读者,因为我们都将成为知识的传承者。本文档使用书栈(Honk e Stack.CN) *建
Vue.js技术揭秘
目前社区有很多Vue.js的源码解析文章, 但是质量层次不齐, 不够系统和全面, 这本电子书的目标是全方位细致深度解析Vue.js的实现原理, 让同学们可以彻底掌握Vue.js。目前分析的版本是Vue.js的最新版本Vue.js 2.5.17-beta.0, 井且之后会随着版本升级而做相应的更新, 充分发挥电子书的优势。这本电子书是作为《Vue.js源码揭秘》口视频课程的辅助教材。电子书是开源的, 同学们可以免费阅读,视频是收费的,25+小时纯干货课程,如果有需要的同学可以购买来学习,但请务必支持正版,请尊重作者的劳动成果。章节目录为了把Vue.js的源码讲明白, 课程设计成由浅入深, 分为核心、编译、扩展、生态四个方面去讲,并拆成了八个章节,如下图:介绍了Flow、Vue.js的源码目录设计、Vue, js的源码构建方式, 以及从入口开始分析了详细讲解了模板数据到DOM渲染的过程, 从开始,分析了分析了组件化的实现原理,并且分析了组件周边的原理实现,包括合并配置、生命周期、组件注册、异
第四章:深入响应式原理详细讲解了数据的变化如何驱动视图的变化,分析了响应式对象的创建,依赖收集、派发更新的实现过程,一些特殊情况的处理,并对比了计算属性和侦听属性的实现,最后分析了组件更新的过程。第五章:编译从编译的入口函数开始,分析了编译的三个核心流程的实现:parse->optimize->codegen。第六章:扩展详细讲解了event、v-model、slot、keep-alive、transition、transitiongroup等常用功能的原理实现, 该章节作为一个可扩展章节, 未来会分析更多Vue提供的特性第七章:Vue-Router分析了Vue-Router的实现原理, 从路由注册开始, 分析了路由对象、matcher, 并深入分析了整个路径切换的实现过程和细节。第八章:Vue x分析了Vue x的实现原理, 深入分析了它的初始化过程, 常用API以及插件部分的实现原文:https://ustbhuangyi.github.io/vue-analysis/本文档使用书(Honk Stack.CN) 构建准备工作那么从这一章开始我们即将分析Vue的源码, 我们将会介绍一些前置知识如flow、源码目录、构建方式、编译入口等。除此之外, 我希望你已经用过Vue做过2个以上的实际项目, 对Vue的思想有了一定的了解, 对绝大部分的API都已经有使用。同时, 我也要求你有一定的原生JavaScript的功底, 并对代码调试有一定的了解。如果你具备了以上条件, 并且对Vue的实现原理很感兴趣, 那么就可以开始这门课程的学习了, 我将会为你打开Vue的底层世界大门, 对它的实现细节一探究竟。原文:https://ustbhuangyi.github.io/vue-analysis/prepare/本文档使用书栈(Hool Stack.CN) 构建
认识Flow
Flow l是facebook出品的JavaScript静态类型检查工具。Vue.js的源码利用了Flow做了静态类型检查, 所以了解Flow有助于我们阅读源码。为什么用FlowJavaScript是动态类型语言, 它的灵活性有目共睹, 但是过于灵活的副作用是很容易就写出非常隐蔽的隐患代码, 在编译期甚至看上去都不会报错, 但在运行阶段就可能出现各种奇怪的bug。类型检查是当前动态类型语言的发展趋势,所谓类型检查,就是在编译期尽早发现(由类型错误引起的) bug, 又不影响代码运行(不需要运行时动态检查类型) , 使编写JavaScript具有和编写Java等强类型语言相近的体验。项目越复杂就越需要通过工具的手段来保证项目的维护性和增强代码的可读性。Vue, js在做2.0重构的时候, 在ES 2015的基础上, 除了ESL int保证代码风格之外, 也引入了Flow做静态类型检查。之所以选择Flow, 主要是因为Babel和ESL int都有对应的Flow插件以支持语法, 可以完全沿用现有的构建配置,非常小成本的改动就可以拥有静态类型检查的能力。Flow的工作方式通常类型检查分成2种方式:·类型推断:通过变量的使用上下文来推断出变量类型,然后根据这些推断来检查类型。·类型注释:事先注释好我们期待的类型, Flow会基于这些注释来判断。类型推断它不需要任何代码修改即可进行类型检查,最小化开发者的工作量。它不会强制你改变开发习惯,因为它会自动推断出变量的类型。
因为在Vue.js 2.0中, 最终渲染都是通过render函数,如果写template属性,则需要编译成render函数,那么这个编译过程会发生运行时,所以需要带有编译器的版本,很显然, 这个编译过程对性能会有一定损耗, 所以通常我们更推荐使用Runtime-only的Vue.js。总结通过这一节的分析, 我们可以了解到Vue.js的构建打包过程, 也知道了不同作用和功能的Vue.js它们对应的入口以及最终编译生成的JS文件。
目录
致谢
介绍
准备工作
数据驱动
组件化
深入响应式原理
编译
扩展
认识Flow
Vue.js源码目录设计
Vue.js源码构建
从入口开始
new Vue发生了什么
Vue实例挂载的实现
render
Virtual DOM
createElement
update
create Component
patch
合并配置
生命周期
组件注册
异步组件
响应式对象
依赖收集
派发更新
next Tick
检测变化的注意事项
计算属性VS侦听属性
组件更新
原理图
编译入口
parse
optimize
codegen
event
v-model
slot
keep-alive
transition
transition-group
路由注册
Vue Router对象
matcher
路径切换
Vue x初始化
API
插件
Vue Router
Vue x
..............