目录

Vue3比Vue2的优点

第一章

2、虚拟DOM创建页面的过程

4、虚拟DOM更新页面的过程

第二章  框架设计的核心要素

2、如何控制框架代码的体积

4、Tree-Shaking

5、框架输出的构建构建产物

6、特性开关

7、用户提供的回调函数在执行的时候出错了解决办法

第三章  Vue3的设计思路

1、前端页面的内容及Vue3的解决方案

2、组件的渲染函数

3、渲染器

4、组件的本质

5、编译器

6、模板的工作原理Vue渲染页面过程

7、组件的实现依赖渲染器模板的编译依赖编译器

---

Vue3比Vue2的优点

• 模块的拆分和设计上更合理模块间耦合度低很多模块可以独立安装使用不需要依赖完整的Vue
• 配合构建工具和Tree-Shaking实现内建能力的按需引入实现用户bundle体积最小化
• 扩展能力强可编写自定义的渲染器可编写编译器插件来自定义模板语法
• 更好的支持TypeScript

第一章

1、视图层框架

分为命令式关注过程和声明式关注结果

 2、虚拟DOM创建页面的过程

第一步创建JavaScript对象即真实DOM的描述

第二步递归地遍历虚拟DOM树创建真实DOM

用一个公式表达虚拟DOM创建页面=创建JavaScript对象的计算量+创建真实DOM的计算量

3、innerHTML创建页面的过程

第一步构造HTML字符串

第二步将该字符串赋值给DOM元素的innerHTML属性

用一个公式表达innerHTML创建页面=HTML字符串拼接的计算量+innerHTML的DOM的计算量

4、虚拟DOM更新页面的过程

重新创新JavaScript对象即虚拟DOM树比较新旧虚拟DOM找到变化的元素并更新。

5、innerHTML更新页面的过程

重新构建HTML字符串再重新设置DOM元素的innerHTML属性。也就是一旦改变就要销毁所有旧的DOM元素再全量创建新的DOM元素

第二章  框架设计的核心要素

1、控制台输出结果如何更直观

打开DevTools的设置勾选comsole的enable custom formatters选项

2、如何控制框架代码的体积

Vue.js用rollup.js对项目进行构建每个警告信息warn函数都会配合__DEV__常量的检查打印警告信息的前提是__DEV__为true。__DEV__在开发环境下为true在生产环境下为false。

在开发环境中为用户提供友好地警告信息同时不会增加生产环境代码的体积

3、什么是dead code

__DEV__为false这段代码就永远不会执行也不会出现在最终产物在构建资源时就被移出

4、Tree-Shaking

1指的是消除那些永远不会被执行的代码也就是排除dead code

2前提模块必须是ES Module。因为Tree-Shaking依赖ESM的静态结构

3如果一个函数调用有副作用就不可以将其移出

5、框架输出的构建构建产物

1实现直接HTML页面中使用<script>标签引入框架并使用

输出IIFE立即调用的函数表达式格式的资源如vue.global.js文件。在rollup.js配置format: 'iiffe'来输出这种形式的资源

2直接引入ESM格式的资源

rollup.js输出格式配置为format: 'esm'

3在Node.js通过require语句引用资源

当进行服务端渲染时Vue.js代码是在Node.js环境中运行的在Node.js环境中资源的模块格式是CommonJScjs。rollup.js输出格式配置为format: 'cjs'

6、特性开关

通过设置__VUE__OPTIONS_API__的预定义常量控制是否要包含这段代码。利用webpack.DefinePlugin插件实现。Vue2编写组件用组件选项APIVue3用Composition API如果确定不会用Vue2的方式写代码就可关掉该特性开关打包的时候这部分代码就不会包含在最终的资源中减小资源体积。

7、用户提供的回调函数在执行的时候出错了解决办法

办法一用户自行处理自行执行try...catch。      缺点增加用户负担

办法二框架代替用户统一处理在每个函数内都增加try...catch代码块或进一步将错误处理程序封装成一个函数callWithErrorHandling。用户注册错误处理程序就可以在函数内部捕获错误把错误传递给用户注册的错误处理函数。

注册统一的错误处理函数

8、良好的TypeScript类型支持 

第三章  Vue3的设计思路

1、前端页面的内容及Vue3的解决方案

• DOM元素
• 属性
• 事件
• 元素的层级结构

Vue3的解决方案

• 使用与HTML标签一致的方式描述DOM元素
• 使用与HTML标签一致的方式描述属性
• 使用或v-bind描述动态绑定的属性
• 使用@或v-on描述事件
• 使用与HTML标签一致的方式描述层级结构

2、组件的渲染函数

一个组件要渲染的内容是通过渲染函数render描述的Vue会根据render函数的返回值拿到虚拟DOM然后把组件内容渲染出来

3、渲染器

1渲染器的作用把虚拟DOM渲染为真实DOM

2工作原理递归地遍历虚拟DOM对象并调用原生DOOM API来完成真实DOM的创建它会通过Diff算法找出变更点并只更新需要更新的内容

3渲染器renderer实现思路

• 创建元素
• 伪元素添加属性事件
• 处理children

4、组件的本质

一组DOM元素的封装这组DOM元素就是组件需要渲染的内容可以是一个返回虚拟DOM的函数也可以是一个拥有产出组件所需要渲染的虚拟DOM的函数的对象

5、编译器

作用将模板编译为渲染函数。对于编译器模板就是字符串分析字符串并生成一个功能与之相同的渲染函数

6、模板的工作原理Vue渲染页面过程

对于组件要渲染的内容都是通过渲染函数产生的渲染器再把渲染函数返回的虚拟DOM渲染为真实DOM

7、组件的实现依赖渲染器模板的编译依赖编译器