【读书笔记】Vue设计与实现(一)

182 阅读3分钟

本书是期盼已久的关于Vue3.0版本解读的一本国产书,填补了这个领域的空白,此书登场,恐怕无人能出其右,好书要多读,细读。

所以我计划配合书的章节安排,做一系列记录,不会很深,给大家作为了解,若觉得不错,可以选择入手,不论是对框架层的理解,还是技术层的启发,相信会得到不少的帮助。

全书共六篇,每篇作为一个记录。

第一篇包含三章内容,这三章内容基本从全局的角度,从设计思路上,捋清楚了Vue做了什么,以及怎么做的,为后面继续深入了解打下基础。

Vue3的权衡和核心要素

编译时还是运行时

区分开发环境对代码做不同处理

tree-shaking:没用到的代码不进入最终的代码包中

特性开关:可选择性的不使用某些特性,也减少包体积

友好的错误提示、错误处理:决定了开发者的使用体验和对代码中的异常处理

良好的TS支持:使用TS编写和提供TS支持是完全不同的概念

不同的打包文件适用不同场景:打包文件有几种,分别适用浏览器、node等环境

Vue3的设计思路

什么是声明式描述: 对于网页结构、属性绑定、事件绑定,等各类操作,不需要开发者自行编写代码指令,只需要声明”做什么“即可。

Vue当中也并不是必须使用声明式,render方法其实是一种“虚拟DOM描述型UI”,h()函数的返回值是个对象。

虚拟DOM到真实DOM的渲染过程,就是遍历对象的key,创建元素,设置属性和绑定方法的过程,最后塞到页面容器中去。

创建DOM并渲染的过程看起来并不复杂,真正复杂的是更新节点,会有多种不同情况,需要分别处理。

组件的本质

组件的本质就是一组DOM元素的封装

虚拟DOM的tag属性,此时变为“组件函数”。

使用 mountElement 和 mountComponent 来区分是原生元素还是组件。

然后执行组件函数,返回的是组件内的虚拟DOM,此虚拟DOM和上文提到的虚拟DOM是一致的,继续调用render方法渲染即可。

既然组件函数返回的是一个虚拟DOM对象,是不是说明,组件也可以用对象来表达,是的,可以,只是这个对象中必须要有个函数来产出渲染结果。

模板的工作原理—编译器

编译器的作用,就是将模板编译为渲染函数。

模板在它的眼里就是普通的字符串,需要分析字符串,并生成与之功能相同的渲染函数,并添加到script标签块的组件对象上。

编译器需要分析哪些数据会变更,哪些不会,好消息是编译器能够识别动态和静态属性,并为其打上标签,即patchFlags。

Vue是不同模块组成的有机整体

作为一个声明式UI框架,模板编译,渲染视图,就是它的核心工作,框架是由不同模块负责完成的,这些模块相互配合、相互制约,才构成了一个有机整体。