＜VUE设计与实现＞第一章到第三章

第一章：权衡的艺术

心得：通过性能和维护性，引出命令式，声明式，虚拟DOM。和代码运行机制（运行型，编译型，运行+编译型）

1.1、命令式和声明式

• 命令式：关注过程！类似煮饭案例，拿米，洗米，放下去煮饭
• 声明式：关注结果！还是煮饭案例，你给我煮好。具体怎么煮，交给别人。封装过程，暴露出接口。

1.2、性能与可维护性的权衡

• 性能对比： 声明式 < 命令式
• 可维护性： 命令式 < 声明式
• 声明式性能 = 找出差异性能 + 直接修改性能

1.3、虚拟DOM的性能到底如何

• 虚拟DOM：就是把找出差异性能做到极致。
• 心智负担：虚拟DOM < innerHTML(模板) < 原生javascript
• 可维护性：原生javascript < innerHTML(模板) < 虚拟DOM
• 性能对比：innerHTML(模板) < 虚拟DOM < 原生javascript

1.4、运行时和编译时

• 运行时：利用render函数，直接把虚拟DOM转化为真实DOM。

        缺点：没有编译过程，无法分析用户提供的内容。构建虚拟DOM数据对象麻烦，不够直观。

        优点：性能好

• 编译时：直接把template模板中的内容，转化为真实DOM。

        缺点：性能弱

        优点：可分析用户提供的内容，无需构建虚拟DOM数据对象麻烦，比较直观

• 编译+运行时：

        缺点：性能中，操作复杂，需构建虚拟DOM数据对象麻烦

        优点：可分析用户提供的内容，比较直观，灵活性高

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

心得：通过用户开发体验：引出错误定位和错误处理，灵活配置，代码体积，多兼容版本

2.1、提升用户的开发体验

• 心智负担低：友好错误定位提示
• 便于调试：

2.2、控制框架代码的体积

• __DEV__:来消除dead code(死代码)

2.3、框架要做到良好的Tree-Shaking

• /*__PURE__*/ 告知rollup.js或weabpack.js，可以去死代码
• 副作用概念：调用函数，会影响全局变量的状态。为啥读取值也会呢？有可能其对象用的代理机 制。在get夹子中改变其状态

2.4、框架应该输出怎么样的构建产物：

• 浏览器支持esm
• 浏览器不支持，用IIFE
• 服务端渲染，ssr。nodejs之cjs

2.5、特性开关

• __VUE_OPTIONS_API__:是否使用选项式API

2.6、错误处理

• callWithErrorHandling:做捕获错误机制，try{}catch{}
• app.config.errorHandler :注册捕获机制

第三章：Vue.js 3的设计思路

3.1、声明式地描述UI

• 了解dom内容，虚拟DOM和模板的灵活性说明

3.2、初始渲染器

• 虚拟DOM->渲染器->真实DOM
• 渲染器步骤：

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

3.3、组件的本质

• 就是一个函数，封装内容是一组DOM元素（虚拟DOM）

• • 交给渲染器来处理

3.4、模板的工作原理

• 通过编译器，把<template>的内容编译成渲染函数（返回虚拟DOM）并添加到<script>，然后交割渲染器，渲染成真实DOM

3.5、VUE.js是各个模块组成的有机整体

• 组件的实现依赖于渲染器，模板的编译依赖于编译器
• 例子：DOM的属性动态更新

• • 编译器通过分析更新点，并做个标记
  • 渲染器通过标记点，直接监听，无需做重新遍历。提升性能