Vue.js设计与实现
[!abstract] Vue.js设计与实现
- 书名： Vue.js设计与实现
- 作者： 霍春阳 著
- 简介： 本书基于Vue.js 3，从规范出发，以源码为基础，并结合大量直观的配图，循序渐进地讲解Vue.js中各个功能模块的实现，细致剖析框架设计原理。全书共18章，分为六篇，主要内容包括：框架设计概览、响应系统、渲染器、组件化、编译器和服务端渲染等。通过阅读本书，对Vue.js 2/3具有上手经验的开发人员能够进一步理解Vue.js框架的实现细节，没有Vue.js使用经验但对框架设计感兴趣的前端开发人员，能够快速掌握Vue.js的设计原理。
- 出版时间 2022-01-01 00:00:00
- ISBN： 9787115583864
- 分类： 计算机-软件学习
- 出版社： 人民邮电出版社
高亮划线
第2章 框架设计的核心要素
📌 在 Vue.js 3 的源码中，你可以搜索到名为 initCustomFormatter 的函数，该函数就是用来在开发环境下初始化自定义 formatter 的。以 Chrome 为例，我们可以打开 DevTools 的设置，然后勾选“Console”→“Enable custom formatters”选项，如图 2-3 所示。 ^3300028078-7-2769-2935
- ⏱ 2023-06-03 08:03:16
📌 Vue.js 构建用于开发环境的资源时，会把 DEV 常量设置为 true ^3300028078-7-4411-4452
- ⏱ 2023-06-03 08:06:33
📌 Tree-Shaking 指的就是消除那些永远不会被执行的代码，也就是排除 dead code，现在无论是 rollup.js 还是 webpack，都支持 Tree-Shaking。 ^3300028078-7-5668-5760
- ⏱ 2023-06-03 08:08:03
📌 想要实现 Tree-Shaking，必须满足一个条件，即模块必须是 ESM（ES Module），因为 Tree-Shaking 依赖 ESM 的静态结构。 ^3300028078-7-5789-5867
- ⏱ 2023-06-03 08:08:22
📌 注意注释代码 /#PURE/，其作用就是告诉 rollup.js，对于 foo 函数的调用不会产生副作用，你可以放心地对其进行 Tree-Shaking， ^3300028078-7-7701-7784
- ⏱ 2023-06-03 08:09:51
📌 因为通常产生副作用的代码都是模块内函数的顶级调用 ^3300028078-7-8088-8112
- ⏱ 2023-06-03 08:10:57
📌 IIFE 的全称是 Immediately Invoked Function Expression，即“立即调用的函数表达式” ^3300028078-7-9094-9157
- ⏱ 2023-06-03 08:12:10
📌 不过随着技术的发展和浏览器的支持，现在主流浏览器对原生 ESM 的支持都不错，所以用户除了能够使用
<script>标签引用 IIFE 格式的资源外，还可以直接引入 ESM 格式的资源，例如 Vue.js 3 还会输出 vue.esm-browser.js 文件，用户可以直接用<script type="module">标签引入： ^3300028078-7-9873-10042- ⏱ 2023-06-03 08:13:13
📌 无论是 rollup.js 还是 webpack，在寻找资源时，如果 package.json 中存在 module 字段，那么会优先使用 module 字段指向的资源来代替 main 字段指向的资源。 ^3300028078-7-10399-10500
- ⏱ 2023-06-03 08:17:12
第3章 Vue.js 3 的设计思路
📌 而使用 JavaScript 对象来描述 UI 的方式，其实就是所谓的虚拟 DOM。 ^3300028078-8-3010-3052
- ⏱ 2023-06-04 21:52:23
📌 其实 h 函数的返回值就是一个对象，其作用是让我们编写虚拟 DOM 变得更加轻松。 ^3300028078-8-3412-3453
- ⏱ 2023-06-04 21:55:02