可组合的 Vue Composable Vue, 编写可组合可复⽤的 Vue 函数的最佳实践与技巧 ANTHONY FU Hangzhou, China 2021 Anthony Fu antfu antfu7 Anthony Fu antfu.me Vue 核⼼成员 / Vite 团队成员 VueUse, Slidev, Type Challenges 等项⽬创作者 全职开源 有限的类型⽀持 按 API 类型组织 极易复⽤ (原⽣ JS 函数) 可灵活组合 (⽣命周期钩⼦可多次使⽤) 提供更好的上下⽂⽀持 更好的 TypeScript 类型⽀持 按功能/逻辑组织 可独⽴于 Vue 组件使⽤ 对象式 API 存在的问题 组合式 API 提供的能⼒ 什么是可组合的函数 Dark 可复⽤逻辑的集合，专注点分离 export function useDark(options: = v === preferredDark.value ? 'auto' : v ? 'dark' : 'light' }, }) } 在 VueUse 中可⽤: usePreferredDark useLocalStorage useDark 组合关系 其中每⼀个函数都可以独⽴使⽤ 专注点分离 useDark usePreferredDark

基础篇：webpack 与构建发展简史 目 录 CONTENTS 01 基础篇：webpack 基础用法 02 进阶篇：编写可维护的 webpack 构建配置 04 进阶篇：webpack 构建速度和体积优化策略 05 原理篇：通过源码掌握 webpack 打包原理 06 原理篇：编写 Loader 和插件 07 实战篇：React 全家桶 和 webpack 开发商城项目 08 2.0 - > 16.3.0 -> 16.3.1 软件的版本通常由三位组成，形如： X.Y.Z 在发布重要版本时，可以发布alpha, rc 等先行版本 alpha和rc等修饰版本的关键字后面可 以带上次数和meta信息 遵守 semver 规范的优势 优势： ·避免出现循环依赖 ·依赖冲突减少 语义化版本（Semantic Versioning）规范格式 次版本号：当你做了向下兼容的功能性新增，

...103 6.4.1 使用类型注解...................103 6.4.2 使用元组 .........................109 6.4.3 使用可索引类型 ...............109 6.4.4 使用访问修饰符 ...............110 6.5 本章小结............................. 为内置状态创建迁移.....697 28.4.2 控制动画过渡...............699 28.5 理解动画样式分组................704 28.5.1 在可重用分组中定义 公共样式......................704 28.5.2 使用元素变形...............705 28.5.3 应用 CSS 框架样式.... 建，该模式的重点在于创建具有如下特点 的应用程序： ● 可扩展：一旦理解 Angular 的基本原理，即便是复杂的 Angular 应用程序，也很容 易弄明白其运行方式，而这意味着可以轻易地改进应用程序，为用户创建新的有 用功能。 ● 可维护：Angular 应用程序易于调试和修复，这意味着长期维护工作得以简化。 ● 可测试：Angular 对单元测试和端到端测试的支持都非常好，这意味着可以先于用

Surface，将它通过 JNI 传递给 原生侧； 前端 < 7 ● 在原生侧获取 Surface 关联的本地窗口对象，并交给 Flutter 的平台容器； ● 将本地窗口对象转换为 OpenGL ES 可识别的绘图表面（EGLSurface），用 于 Flutter 引擎的渲染上屏。 接下来我们用鸿蒙提供的平台能力实现这三点。 a. 可用于直接绘制的视图对象 鸿蒙系统的 UI 框架提供了很多常 FML_DISALLOW_COPY_AND_ASSIGN(HAPAssetMapping); }; 对 于 事 件 循 环， 引 擎 提 供 了 MessageLoopImpl 抽 象 类， 我 们 可 以 使 用 鸿 蒙 Native_EventHandler API 实现： 前端 < 11 // runner_ 为鸿蒙 EventRunnerNativeImplement 的实例 void package:js 包调用 Javascript，从而实现与 Javascript 的交互。 其次，Web Plugin 不是通过注册 MethodChannel 传递消息的，Flutter 内部可直 接调用通过官方指定形式 (Federated Plugin) 编写的 Flutter Web Plugin 类。 下图完整的展示了一个 Plugin 的整体架构： Flutter Plugin

闲⻥鱼 - 让你的闲置游起来 ⼀一体化开发的好处 开发灵活，扩展性好，降低沟通成本 协议三端⼀一致性，提⾼高性能和效率 ⼀一体化的开发环境，全链接⽇日志和调试 服务端更更专注领域服务的通⽤用性和性能 闲⻥鱼 - 让你的闲置游起来 总结 • Flutter统⼀一移动端开发 • 分析Dart实现服务端“胶⽔水层”可⾏行行性 • 简化“胶⽔水层”开发流程，上⼿手更更容易易

35 1.6.1.36 1.6.1.37 1.6.1.38 1.6.2 1.6.2.1 1.6.3 1.6.4 1.7 1.7.1 1.7.2 1.7.3 1.7.4 学习可访问性相关知识 学习 web／浏览器 API 学习 JSON (JavaScript 对象表示法) 学习 JS 模板 学习静态网页生成器 通过JS学习计算机科学 学习前端应用架构 学习数据（例如，JSON）API 学习用户界面／交互设计 学习 HTML 和 CSS 学习搜索引擎优化 学习 JavaScript 学习 Web 动画 学习 DOM、BOM 和 jQuery 学习网页字体 & 图标 学习可访问性相关知识 学习 web／浏览器 API 学习 JSON (JavaScript 对象表示法) 学习 JS 模板 学习静态网页生成器 通过JS学习计算机科学 学习前端应用架构 学习数据（例如，JSON）API APIs) 9. 网络内容可达性指南 (WCAG) & 可访问的富互联网应用 (ARIA) 下面的介绍涵盖了以上技术的定义，相关文档以及具体规范。至于更加详尽的网络开发规范 请参看 platform.html5.org。 超文本标记语言 (HTML) 超文本标记语言，通常被称为 HTML，被用作创建网页的标准标记语言。网络浏览器可 以读取 HTML 文件并且把它们渲染成可见或可听的网页。HTML

Attribute 自定义事件 插槽 提供 / 注入 动态组件 & 异步组件 模板引用 处理边界情况 过渡&动画 过渡 & 动画概述 进入过渡 & 离开过渡 列表过渡 状态过渡 可复用性&组合 混入 自定义指令 传入 渲染函数 插件 高阶指南 - 2 - 本文档使用 书栈网 · BookStack.CN 构建 响应性 深入响应性原理 响应式原理 响应式计算和侦听 构建 此在文档中经常会使用 vm (ViewModel 的缩写) 这个变量名表示组件实例。 尽管本页面上的所有示例都只需要一个单一的组件就可以，但是大多数的真实应用都是被组织成一个嵌 套的、可重用的组件树。举个例子，一个 todo 应用组件树可能是这样的： 1. Root Component 2. └─ TodoList 3. ├─ TodoItem 4. │ ├─ DeleteTodoButton HTML——会忽略解析 property 值中的数据绑定。注意，你不能使用 v-html 来复合局部模板，因为 Vue 不是基于 字符串的模板引擎。反之，对于用户界面 (UI)，组件更适合作为可重用和可组合的基本单位。 TIP 模板语法 插值 文本 原始 HTML 模板语法 - 24 - 本文档使用 书栈网 · BookStack.CN 构建 在你的站点上动态渲染任意的 HTML

的。 但在这个例子里 我们不需要考虑状态 - 事实上，在 React.Component 我们把状 态指定为了 object ，因此使用SFC更简洁。 当在创建可重用的通用UI组件的时 候，在表现层使用组件局部状态比较适合。 针对我们应用的生命周期，我们会审视 应用是如何通过Redux轻松地管理普通状态的。 现在我们已经写好了组件，让我们仔细看看 index import { connect, Dispatch } from 'react-redux'; 两个关键点是初始的 Hello 组件和react-redux的 connect 函数。 connect 可 以将我们的 Hello 组件转换成一个容器，通过以下两个函数： mapStateToProps 将当前store里的数据以我们的组件需要的形式传递到组 件。 mapDispatchToProps "target": "es5" }, "include": [ "./src/**/*" ] } 这里我们为TypeScript设置了一些东西: 1. 读取所有可识别的 src 目录下的文件（通过 include ）。 2. 接受JavaScript做为输入（通过 allowJs ）。 3. 生成的所有文件放在 built 目录下（通过 outDir

。 但在这个例子里我们不需要考虑状 态 - 事实上，在 React.Component 我们把状态指定为了 object ，因此使用函 数组件更简洁。 当在创建可重用的通用UI组件的时候，在表现层使用组件局部状态比较适合。 针对我 们应用的生命周期，我们会审视应用是如何通过Redux轻松地管理普通状态的。 现在我们已经写好了组件，让我们仔细看看 index }, 7. "include": [ 8. "./src/**/*" 9. ] 10. } 这里我们为TypeScript设置了一些东西: 1. 读取所有可识别的 src 目录下的文件（通过 include ）。 2. 接受JavaScript做为输入（通过 allowJs ）。 3. 生成的所有文件放在 built 目录下（通过 outDir 那么你可以这样写： 1. export function feedPets(pets) { 2. // ... 3. } 有时你会完全重写导出对象。 这是一个常见模式，这会将模块变为可立即调用的模块： 1. var express = require("express"); 2. var app = express(); 之前你可以是这样写的： 1. function foo()

來完成本書的創作。 本人自知學疏才淺，書中內容雖然已經過一段時間的打磨，但一定仍有許多錯誤，懇請各位老師與同學批評 指正。 本書中的程式碼附有可一鍵執行的原始檔，託管於 github.com/krahets/hello‑algo 倉庫。 動畫在 PDF 內的展示效果有限，可訪問 www.hello‑algo.com 網頁版以獲得更佳的閱讀體驗。 推薦語 “一本通俗易懂的資料結構與演算法入門書，引導讀者 ——鄧俊輝，清華大學計算機系教授 “如果我當年學資料結構與演算法時有《Hello 演算法》，學起來應該會簡單 10 倍！” ——李沐，亞馬遜資深首席科學家 電腦的出現為世界帶來了巨大的變革，它憑藉高速的運算能力與卓越的可程式化特性，成為執行演算法 與處理資料的理想媒介。無論是電玩遊戲的逼真畫面、自動駕駛的智慧決策，還是 AlphaGo 的精彩棋局、 ChatGPT 的自然互動，這些應用都是演算法在電腦上的精妙演繹。 到一個家庭，社會的主要組織形式呈現出“樹”的特徵；冬天的衣服就像“堆疊”，最先穿上的最後才能脫下； 羽毛球筒則如同“佇列”，一端放入、一端取出；字典就像一個“雜湊表”，能夠快速查找目標詞條。 本書旨在透過清晰易懂的動畫圖解與可執行的程式碼範例，使讀者理解演算法和資料結構的核心概念，並能 夠透過程式設計來實現它們。在此基礎上，本書致力於揭示演算法在複雜世界中的生動體現，展現演算法之 美。希望本書能夠幫助到你！ i 目