技术分享VUE深入浅出&TypeScript快速入门

Posted 2021-03-30 人和数据

8月15日，贵州人和致远数据服务有限责任公司（以下简称：人和数据）技术部的小伙伴郑华为大家分享了 Flow、Vue.js 的源码目录设计、Vue.js 的源码构建方式，以及从入口开始分析了 Vue.js 的初始化过程。让小编带你来看看吧！

数据驱动

详细讲解了模板数据到 DOM 渲染的过程，从 new Vue 开始，分析了 mount、render、update、patch 等流程。

组件化

分析了组件化的实现原理，并且分析了组件周边的原理实现，包括合并配置、生命周期、组件注册、异步组件。

深入响应式原理

详细讲解了数据的变化如何驱动视图的变化，分析了响应式对象的创建，依赖收集、派发更新的实现过程，一些特殊情况的处理，并对比了计算属性和侦听属性的实现，最后分析了组件更新的过程。

编译

从编译的入口函数开始，分析了编译的三个核心流程的实现：parse -> optimize -> codegen。

扩展

详细讲解了 event、v-model、slot、keep-alive、transition、transition-group 等常用功能的原理实现，该章节作为一个可扩展章节，未来会分析更多 Vue 提供的特性。

Vue-Router

分析了 Vue-Router 的实现原理，从路由注册开始，分析了路由对象、matcher，并深入分析了整个路径切换的实现过程和细节。

Vuex

分析了 Vuex 的实现原理，深入分析了它的初始化过程，常用 API 以及插件部分的实现。

 VUE源码分析的思维导图

响应式对象的生命周期流程

VUE生命周期

VUE中API的结构

在工作中vue是如何使用的?

 

1. 不对整体架构做过多约束,方便与其他库或已有的前端技术栈结合

2. 以POJO作为Model使得VUE对于数据持久层的接口非常灵活

3. 基于组件的开发模式有利于将界面代码自然分割成更容易维护的模块

4. 基于CommonJS的单文件组件:vueify使组件分层清晰可见

5. 生命周期的可控性让数据的驱动顺心所欲

6. 语法糖和文档的完备使新人入手快,老鸟反查错误便捷

TypeScript

TypeScript是javascript类型的超集，它可以编译成纯JavaScript。

TypeScript可以在任何浏览器、任何计算机和任何操作系统上运行，并且是开源的。

 

始于JavaScript，归于JavaScript

TypeScript从今天数以百万计的JavaScript开发者所熟悉的语法和语义开始。使用现有的JavaScript代码，包括流行的JavaScript库，并从JavaScript代码中调用TypeScript代码。

 

TypeScript可以编译出纯净、 简洁的JavaScript代码，并且可以运行在任何浏览器上、Node.js环境中和任何支持ECMAScript 3（或更高版本）的JavaScript引擎中。

 

强大的工具构建 大型应用程序

类型允许JavaScript开发者在开发JavaScript应用程序时使用高效的开发工具和常用操作比如静态检查和代码重构。

 

类型是可选的，类型推断让一些类型的注释使你的代码的静态验证有很大的不同。类型让你定义软件组件之间的接口和洞察现有JavaScript库的行为。

 

 先进的JavaScript

TypeScript提供最新的和不断发展的JavaScript特性，包括那些来自2015年的ECMAScript和未来的提案中的特性，比如异步功能和Decorators，以帮助建立健壮的组件。

 

这些特性为高可信应用程序开发时是可用的，但是会被编译成简洁的ECMAScript3（或更新版本）的JavaScript。

 

TypeScript中的接口

TypeScript的核心原则之一是对值所具有的结构进行类型检查。 它有时被称做“鸭式辨型法”或“结构性子类型化”。 在TypeScript里，接口的作用就是为这些类型命名和为你的代码或第三方代码定义契约。

 

TypeScript和flow的对比

1. 功能方面,TypeScript和Flow基本已经一致

2. 生态圈方面, TS占了很大优势

3. Definitely-Typed的类型定义相当全,相比flow-typed就弱很多

4. 编辑器等周边看来,TS的VSCode天生支持,而Flow也有nuclide

5. 扩展性看,TS的可扩展性目前基本为零.Flow由于有Babel支持所以可能会好一点

6. TS的有自己的规范,文档齐全,有问题能很快找到答案

7. Flow的类型系统虽然复杂,但是文档非常孱弱