文档动机章节精读《Vue3.0 Function API》Vue3 究竟好在哪里? Vue2 的代码模式下存在的几个问题。 随着功能的增长，复杂组件的代码变得越来越难以维护。 尤其发生你去新接手别人的代码时。 根本原因是 Vue 的现有 API 通过「选项」组织代码，但是在大部分情况下，通过逻辑考虑来组织代码更有意义。 缺少一种比较「干净」的在多个组件之间...

基础：vue 是双向绑定，MVVMreact 是单项数据流 ui = f(data) 进阶：vue 早就不强调 MVVM，主要强调数据响应式（核心），也早就没有了双向绑定，全篇文档就只有 v-model 出现了这个词。react 核心的函数式，（无副作用，引用透明，纯函数，数据不可变）这些词 vue 从来不会提到，绝对不会说，hook 是怎么实现在...

123456789101112131415161718import Dialog from './Dialog.vue'import { createApp, h } from 'vue'export const openDialog = options => { const &#...

全部折叠代码以后，我们发现前两步也是获取 options，验证 options 直接看最后一行，是一个 callback，因为 css-loader 是异步的， 我们主要看 moduleCode，点击进入 基本架构和之前差不多，也是得到 code，然后 return 出去 除此之外还有很多的代码都是在做兼容和加载另外的插件

raw-loader webpack 提供 loader-utils 和 schema-utils 作为辅助工具 webpack 通过 this 来传递上下文 getOptions(this) 可以获取 options validate 可以验证 options 是否合法 JSON 的 2028 和 2029 问题 css-loader 无关代...

这个最简单的 loader 就是加载任意文件，但是不做任何处理，直接导出 所有代码就这么几行 获取选项（第 7 行） 验证选项(第 9 行，这两步像是 webpack 的固定流程) 然后开始转换代码（第 14 行）（这里之所以使用 replace 是因为 JSON 的 bug，因为使用了 JSON.stringify 来加引号造成的，他不仅能加引号，还会把...

上文我们写了一个打包器，但是只能加载 JS 文件，现在我们尝试让他可以加载 CSS 如何加载 CSS思路 我们的 bundle 只能加载 JS 我们想要加载 CSS 如果我们能把 CSS 变成 JS。那么就可以加载 CSS 了12345678// 获取文件内容，将内容放至 depRelationlet code = readFileSync(filepath...

webpack 要解决的两个问题现有代码（接上文） 很遗憾，这三个文件不能运行因为浏览器不支持直接运行带有 import 和 export 关键字的代码 怎么样才能运行 import / export 不同浏览器功能不同 现代浏览器可以通过 来支持 import export IE 8~15不支持 import export，所以不可能运行...

babel 与 AST先从Babel 说起 babel 的原理1、parse：把代码 code 变成 AST2、traverse：遍历 AST 进行修改3、generate：把 AST 变成代码 code2即：code – (1) - > ast – (2) - > ast2 – (3) - > code2 示例1234567impor...

代码优化基本原则 易读性优先 如果不是性能瓶颈，就不要为了性能而改写代码 复杂性守恒原则：无论你怎么写代码，复杂性都是不会消失的推论：如果逻辑很复杂，那么代码看起来就应该是复杂的。如果逻辑很简单，代码看起来就应该是简单的。 命名程序员三大难题 变量命名 缓存失效 循环边界 可见变量命名的重要性。 网上有很多命名规范，大家可以参考。这里只讲基本原则。 ...