读书笔记-------Vue第一篇:框架设计概览

目录

Vue3比Vue2的优点

第一章

1、视图层框架

2、更新页面的方式:原生JavaScript、innerHTML,虚拟DOM

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

2.2、innerHTML创建页面的过程

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

2.4、innerHTML更新页面的过程

3、运行时、编译时、运行时+编译时

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

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

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

2.1、环境变量__DEV__

2.2、Tree-Shaking

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

3.1、实现直接HTML页面中使用

3.2、直接引入ESM格式的资源

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

3.4、特性开关

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

5、良好的TypeScript类型支持 

第三章  Vue3的设计思路

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

2、组件的渲染函数

3、渲染器

4、组件的本质

5、编译器

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

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



Vue3比Vue2的优点

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

第一章

1、视图层框架

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

性能:命令式 > 声明式    命令式直接修改的性能消耗<声明式找出差异+直接修改

可维护性:声明式 > 命令式

2、更新页面的方式:原生JavaScript、innerHTML,虚拟DOM

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

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

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

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

2.2、innerHTML创建页面的过程

第一步:构造HTML字符串

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

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

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

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

2.4、innerHTML更新页面的过程

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

3、运行时、编译时、运行时+编译时

运行时:利用render函数直接将虚拟DOM转化为真实DOM

编译时:直接将template模板中的内容转化为真实DOM

运行时+编译时:①先将template模板转化为render函数,再利用render函数把虚拟DOM转化为真实DOM

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

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

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

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

2.1、环境变量__DEV__

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

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

什么是dead code?

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

2.2、Tree-Shaking

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

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

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

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

3.1、实现直接HTML页面中使用

你可能感兴趣的:(vue.js,javascript,前端)