"use strict"; const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; const {useMDXComponents: _provideComponents} = arguments[0]; function _createMdxContent(props) { const _components = { a: "a", code: "code", div: "div", em: "em", h2: "h2", h3: "h3", h4: "h4", hr: "hr", li: "li", ol: "ol", p: "p", pre: "pre", span: "span", strong: "strong", table: "table", tbody: "tbody", td: "td", th: "th", thead: "thead", tr: "tr", ul: "ul", ..._provideComponents(), ...props.components }; return _jsxs(_Fragment, { children: [_jsxs(_components.p, { children: ["抓个时间复习一下vue2和JavaScript，已经很久没有用过vue2和js了，大部分时间在写vue3和", _jsx(_components.strong, { children: "TS" }), "，故回顾一下，并对比一下", _jsx(_components.strong, { children: "vue2" }), "和", _jsx(_components.strong, { children: "vue3" }), "，但是基本以Vue2来呈现。"] }), "\n", _jsxs(_components.h2, { id: "vue篇", children: ["Vue篇", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#vue篇", children: _jsx(_components.span, { className: "icon icon-link" }) })] }), "\n", _jsxs(_components.p, { children: [_jsx(_components.a, { href: "https://v2.cn.vuejs.org", rel: "nofollow", target: "_blank", children: "Vue2" }), "已经终止维护了，回顾的原因是发现很多公司有些老项目还是在用", _jsx(_components.strong, { children: "vue2" }), "和", _jsx(_components.strong, { children: "Option API" }), "，这里务实一点从基础开始再到应用篇，时不时对比一下", _jsx(_components.a, { href: "https://cn.vuejs.org", rel: "nofollow", target: "_blank", children: "Vue3" }), "。"] }), "\n", _jsxs(_components.h3, { id: "响应式原理", children: ["响应式原理", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#响应式原理", children: _jsx(_components.span, { className: "icon icon-link" }) })] }), "\n", _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "响应式的本质" }), "，是指数据变化能够", _jsx(_components.strong, { children: "自动且高效地驱动视图更新" }), "。在原生 JavaScript 中，这种映射关系需要开发者通过", _jsx(_components.strong, { children: "直接操作 DOM" }), " 来实现，例如 ", _jsx(_components.code, { children: "getElementById" }), "、", _jsx(_components.code, { children: "setAttribute" }), " 等，代码耦合度高且难以维护。而现代前端框架（如 Vue、React）则将这一过程封装为", _jsx(_components.strong, { children: "声明式的响应式系统" }), "：底层通过", _jsx(_components.strong, { children: "虚拟 DOM" }), " 抽象真实 DOM 结构，并结合", _jsx(_components.strong, { children: "高效的 diff 算法" }), "（Vue 的双端 diff、React 的 Fiber 架构 + 可中断的 diff）来计算出新旧树之间的最小变更集，最终只对需要更新的真实 DOM 节点进行补丁（patch）操作。这种设计在保证视图与数据自动同步的同时，也极大提升了大规模动态页面下的渲染性能。"] }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: ["从浅层来讲，", _jsx(_components.strong, { children: "Vue2" }), "使用", _jsx(_components.code, { children: "Object.defineProperty" }), "来实现响应式，而", _jsx(_components.strong, { children: "Vue3" }), "使用", _jsx(_components.code, { children: "Proxy" }), "来实现响应式，前者劫持对象单个属性，且只能监听单个属性，而后者可以劫持整个对象，包括对象的增删改查的劫持。"] }), "\n", _jsx(_components.li, { children: _jsx(_components.strong, { children: "然而其本质在于：" }) }), "\n", _jsxs(_components.li, { children: ["数组是一个动态对象，亦或者说是特殊对象，下标和长度在动态变化，", _jsx(_components.code, { children: "Object.defineProperty" }), "的局限性在于", _jsx(_components.code, { children: "getter/setter" }), "无法劫持所有下标，也无法监听长度，而", _jsx(_components.code, { children: "Proxy" }), "是直接代理整个对象，使用", _jsx(_components.code, { children: "get/set" }), "方法实现基础监听，", _jsx(_components.strong, { children: "deleteProperty" }), "监听删除、", _jsx(_components.strong, { children: "ownKeys" }), "监听对象遍历、has监听in运算符。"] }), "\n", _jsxs(_components.li, { children: ["补充", _jsx(_components.code, { children: "Proxy" }), "可以实现懒代理，而", _jsx(_components.code, { children: "defineProperty" }), "做不到这一点，在首屏性能上会逊色。"] }), "\n"] }), "\n", _jsx(_components.p, { children: _jsx(_components.strong, { children: "源码层面" }) }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "Object.defineProperty" }), "本质是在监听对象obj的arr属性，所以arr[0]没被监听，相当于小弟的小弟不是你的小弟的概念。"] }), "\n"] }), "\n", _jsxs(_components.div, { className: "code-window", children: [_jsxs(_components.div, { className: "code-header", children: [_jsxs(_components.div, { className: "window-controls", children: [_jsx(_components.span, { className: "control close" }), _jsx(_components.span, { className: "control minimize" }), _jsx(_components.span, { className: "control maximize" })] }), _jsx(_components.span, { className: "code-lang", children: "ts" })] }), _jsx(_components.div, { className: "code-content", children: _jsx(_components.pre, { className: "language-ts", children: _jsxs(_components.code, { className: "language-ts code-highlight", children: [_jsxs(_components.span, { className: "code-line", children: ["Object", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token function", children: "defineProperty" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "obj", _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token string", children: "'arr'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token function", children: "get" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), " ", _jsx(_components.span, { className: "token keyword", children: "return" }), " arr", _jsx(_components.span, { className: "token punctuation", children: ";" }), " ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token function", children: "set" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "newArr", _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), " arr ", _jsx(_components.span, { className: "token operator", children: "=" }), " newArr", _jsx(_components.span, { className: "token punctuation", children: ";" }), " ", _jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: ["obj", _jsx(_components.span, { className: "token punctuation", children: "." }), "arr", _jsx(_components.span, { className: "token punctuation", children: "[" }), _jsx(_components.span, { className: "token number", children: "0" }), _jsx(_components.span, { className: "token punctuation", children: "]" }), " ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token number", children: "1" }), " ", _jsx(_components.span, { className: "token comment", children: "// 无法监听" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: ["obj", _jsx(_components.span, { className: "token punctuation", children: "." }), "arr", _jsx(_components.span, { className: "token punctuation", children: "." }), "length ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token number", children: "0" }), " ", _jsx(_components.span, { className: "token comment", children: "// 无法监听" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: ["data", _jsx(_components.span, { className: "token punctuation", children: "." }), "arr", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token function", children: "push" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token number", children: "4" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " ", _jsx(_components.span, { className: "token comment", children: "// 能触发更新" }), "\n"] })] }) }) })] }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "Proxy" }), "相当于代理，全面", _jsx(_components.strong, { children: "贯彻落实" }), "，全面听指挥。"] }), "\n"] }), "\n", _jsxs(_components.div, { className: "code-window", children: [_jsxs(_components.div, { className: "code-header", children: [_jsxs(_components.div, { className: "window-controls", children: [_jsx(_components.span, { className: "control close" }), _jsx(_components.span, { className: "control minimize" }), _jsx(_components.span, { className: "control maximize" })] }), _jsx(_components.span, { className: "code-lang", children: "ts" })] }), _jsx(_components.div, { className: "code-content", children: _jsx(_components.pre, { className: "language-ts", children: _jsxs(_components.code, { className: "language-ts code-highlight", children: [_jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token keyword", children: "const" }), " proxy ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token keyword", children: "new" }), " ", _jsx(_components.span, { className: "token class-name", children: "Proxy" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "data", _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token function", children: "set" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "target", _jsx(_components.span, { className: "token punctuation", children: "," }), " key", _jsx(_components.span, { className: "token punctuation", children: "," }), " value", _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token builtin", children: "console" }), _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token function", children: "log" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsxs(_components.span, { className: "token template-string", children: [_jsx(_components.span, { className: "token template-punctuation string", children: "`" }), _jsx(_components.span, { className: "token string", children: "属性 " }), _jsxs(_components.span, { className: "token interpolation", children: [_jsx(_components.span, { className: "token interpolation-punctuation punctuation", children: "${" }), "key", _jsx(_components.span, { className: "token interpolation-punctuation punctuation", children: "}" })] }), _jsx(_components.span, { className: "token string", children: " 被修改为 " }), _jsxs(_components.span, { className: "token interpolation", children: [_jsx(_components.span, { className: "token interpolation-punctuation punctuation", children: "${" }), "value", _jsx(_components.span, { className: "token interpolation-punctuation punctuation", children: "}" })] }), _jsx(_components.span, { className: "token template-punctuation string", children: "`" })] }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" target", _jsx(_components.span, { className: "token punctuation", children: "[" }), "key", _jsx(_components.span, { className: "token punctuation", children: "]" }), " ", _jsx(_components.span, { className: "token operator", children: "=" }), " value", _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token keyword", children: "return" }), " ", _jsx(_components.span, { className: "token boolean", children: "true" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: ["proxy", _jsx(_components.span, { className: "token punctuation", children: "." }), "arr", _jsx(_components.span, { className: "token punctuation", children: "[" }), _jsx(_components.span, { className: "token number", children: "0" }), _jsx(_components.span, { className: "token punctuation", children: "]" }), " ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token number", children: "100" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " ", _jsx(_components.span, { className: "token comment", children: "// 输出：属性 0 被修改为 100" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: ["proxy", _jsx(_components.span, { className: "token punctuation", children: "." }), "arr", _jsx(_components.span, { className: "token punctuation", children: "." }), "length ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token number", children: "1" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " ", _jsx(_components.span, { className: "token comment", children: "// 输出：属性 length 被修改为 1" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: ["proxy", _jsx(_components.span, { className: "token punctuation", children: "." }), "arr", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token function", children: "push" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token number", children: "5" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " ", _jsx(_components.span, { className: "token comment", children: "// 会依次触发 length 和索引的 set" }), "\n"] })] }) }) })] }), "\n", _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "发布订阅模式" }), "\n在", _jsx(_components.strong, { children: "Vue2" }), "和", _jsx(_components.strong, { children: "Vue3" }), "都是基于收集副作用依赖和分发副作用依赖的这种发布订阅模式去做的。然而其底层代码不一样，载体也不同，Vue2 叫 ", _jsx(_components.code, { children: "Watcher" }), "，Vue3 叫 ", _jsx(_components.code, { children: "effect" }), "。"] }), "\n", _jsxs(_components.table, { children: [_jsx(_components.thead, { children: _jsxs(_components.tr, { children: [_jsx(_components.th, { children: "特性" }), _jsx(_components.th, { children: "Vue2" }), _jsx(_components.th, { children: "Vue3" })] }) }), _jsxs(_components.tbody, { children: [_jsxs(_components.tr, { children: [_jsx(_components.td, { children: "数据劫持" }), _jsx(_components.td, { children: "Object.defineProperty" }), _jsx(_components.td, { children: "Proxy" })] }), _jsxs(_components.tr, { children: [_jsx(_components.td, { children: "依赖存储" }), _jsx(_components.td, { children: "每个属性一个 Dep 实例" }), _jsx(_components.td, { children: "全局 targetMap (WeakMap)" })] }), _jsxs(_components.tr, { children: [_jsx(_components.td, { children: "依赖粒度" }), _jsx(_components.td, { children: "属性级别" }), _jsx(_components.td, { children: "属性级别 + 更精确的嵌套结构" })] }), _jsxs(_components.tr, { children: [_jsx(_components.td, { children: "数组处理" }), _jsx(_components.td, { children: "重写 7 个变异方法" }), _jsx(_components.td, { children: "Proxy 原生拦截" })] }), _jsxs(_components.tr, { children: [_jsx(_components.td, { children: "新增/删除属性" }), _jsx(_components.td, { children: "需要 $set / $delete" }), _jsx(_components.td, { children: "直接赋值即可" })] }), _jsxs(_components.tr, { children: [_jsx(_components.td, { children: "性能优化" }), _jsx(_components.td, { children: "初始化递归遍历所有属性" }), _jsx(_components.td, { children: "懒代理，访问时才代理深层" })] })] })] }), "\n", _jsxs(_components.h3, { id: "diff算法", children: ["diff算法", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#diff算法", children: _jsx(_components.span, { className: "icon icon-link" }) })] }), "\n", _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "diff 的本质" }), "，是在数据变化后，用最小的代价将旧虚拟 DOM 树转换为新虚拟 DOM 树。直接操作真实 DOM 成本高昂，而虚拟 DOM 提供了 JS 层面的“草稿”，diff 算法则负责找出两棵树的", _jsx(_components.strong, { children: "差异（patch）" }), "，再将差异一次性应用到真实 DOM 上。"] }), "\n", _jsx(_components.p, { children: _jsx(_components.strong, { children: "核心思想：同层比较 + key 优化" }) }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "同层比较" }), "：只对比同一层级的节点，时间复杂度从 O(n³) 降到 O(n)。"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "key 优化" }), "：通过唯一 ", _jsx(_components.code, { children: "key" }), " 标识节点，复用尽可能多的 DOM 元素，避免就地复用带来的副作用。"] }), "\n"] }), "\n", _jsx(_components.p, { children: _jsx(_components.strong, { children: "Vue2 的 diff（双端比较）" }) }), "\n", _jsxs(_components.p, { children: ["Vue2 的 ", _jsx(_components.code, { children: "updateChildren" }), " 方法采用", _jsx(_components.strong, { children: "双端比较" }), "策略：使用四个指针（oldStartIdx、oldEndIdx、newStartIdx、newEndIdx），每次比较四对可能的相同节点："] }), "\n", _jsxs(_components.ol, { children: ["\n", _jsx(_components.li, { children: "oldStart vs newStart" }), "\n", _jsx(_components.li, { children: "oldEnd vs newEnd" }), "\n", _jsx(_components.li, { children: "oldStart vs newEnd" }), "\n", _jsx(_components.li, { children: "oldEnd vs newStart" }), "\n"] }), "\n", _jsx(_components.p, { children: "若能匹配，则 patch 并移动指针；否则根据 key 映射查找。这种算法在列表顺序反转、头部插入等场景下性能较好。" }), "\n", _jsxs(_components.p, { children: ["*", _jsx(_components.strong, { children: "Vue3 的 diff（最长递增子序列优化）" })] }), "\n", _jsx(_components.p, { children: "Vue3 在双端比较的基础上，引入了**最长递增子序列（LIS）**优化。对于乱序且无法简单复用的节点，Vue3 会计算出新序列中稳定递增的那部分索引，只移动非递增的节点，从而减少 DOM 移动次数。" }), "\n", _jsxs(_components.ol, { children: ["\n", _jsx(_components.li, { children: "先做头尾相同节点的预处理（类似双端比较的前置快速路径）。" }), "\n", _jsx(_components.li, { children: "对于剩余乱序部分，构建新节点在旧节点中的位置数组。" }), "\n", _jsxs(_components.li, { children: ["计算该位置数组的", _jsx(_components.strong, { children: "最长递增子序列" }), "，序列中的节点不需要移动。"] }), "\n", _jsx(_components.li, { children: "从后向前遍历，补全新节点或移动非 LIS 节点。" }), "\n"] }), "\n", _jsxs(_components.h3, { id: "常用工具库", children: ["常用工具库", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#常用工具库", children: _jsx(_components.span, { className: "icon icon-link" }) })] }), "\n", _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "动画库" }), "\n", _jsx(_components.a, { href: "https://animate.style", rel: "nofollow", target: "_blank", children: "animate.css" }), " , ", _jsx(_components.a, { href: "https://gsap.com", rel: "nofollow", target: "_blank", children: "gsap" }), " 一般配合transition和transition-group一起使用"] }), "\n", _jsx(_components.hr, {}), "\n", _jsxs(_components.p, { children: [_jsxs(_components.strong, { children: [_jsx(_components.em, { children: "工具库" }), "vue-use"] }), "\n", _jsx(_components.a, { href: "https://vueuse.org", rel: "nofollow", target: "_blank", children: "vue-use" })] }), "\n", _jsx(_components.p, { children: _jsx(_components.strong, { children: "状态管理类" }) }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: [_jsxs(_components.strong, { children: [_jsx(_components.code, { children: "useStorage" }), " / ", _jsx(_components.code, { children: "useLocalStorage" })] }), "：响应式地操作 localStorage/sessionStorage，数据变化自动持久化且页面刷新后恢复", _jsx(_components.a, { href: "https://blog.csdn.net/leijmdas/article/details/149748522", rel: "nofollow", target: "_blank" }), "。"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: _jsx(_components.code, { children: "useToggle" }) }), "：优雅地管理布尔值切换，", _jsx(_components.code, { children: "const [show, toggle] = useToggle(false)" }), " 比手动取反更语义化。"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: _jsx(_components.code, { children: "createGlobalState" }) }), "：跨组件共享全局共享状态，无需复杂 Store 配置", _jsx(_components.a, { href: "https://blog.csdn.net/leijmdas/article/details/149748522", rel: "nofollow", target: "_blank" }), "。"] }), "\n"] }), "\n", _jsx(_components.p, { children: _jsx(_components.strong, { children: "用户交互类" }) }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: _jsx(_components.code, { children: "useEventListener" }) }), "：优雅绑定 DOM/Window 事件，组件销毁时自动解绑，无需手动 ", _jsx(_components.code, { children: "add/removeEventListener" }), "。"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: _jsx(_components.code, { children: "useClipboard" }) }), "：读写剪贴板，提供 ", _jsx(_components.code, { children: "copied" }), " 状态和错误处理，轻松实现“点击复制”功能。"] }), "\n", _jsxs(_components.li, { children: [_jsxs(_components.strong, { children: [_jsx(_components.code, { children: "useDebounceFn" }), " / ", _jsx(_components.code, { children: "useThrottleFn" })] }), "：对高频操作（输入框搜索、窗口滚动）进行防抖/节流，优化性能。"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: _jsx(_components.code, { children: "useDark" }) }), "：一键检测/切换深色模式，自动维护 ", _jsx(_components.code, { children: ".dark" }), " 类名和 CSS ", _jsx(_components.code, { children: "prefers-color-scheme" }), "。"] }), "\n"] }), "\n", _jsx(_components.p, { children: _jsx(_components.strong, { children: "元素监听类" }) }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: _jsx(_components.code, { children: "useMouse" }) }), "：实时获取鼠标位置，用于拖拽、自定义光标等场景", _jsx(_components.a, { href: "https://blog.csdn.net/leijmdas/article/details/149748522", rel: "nofollow", target: "_blank" }), "。"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: _jsx(_components.code, { children: "useIntersectionObserver" }) }), "：监听元素是否进入视口，实现图片懒加载、无限滚动等", _jsx(_components.a, { href: "https://blog.csdn.net/leijmdas/article/details/149748522", rel: "nofollow", target: "_blank" }), "。"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: _jsx(_components.code, { children: "useResizeObserver" }) }), "：实时监听元素尺寸变化", _jsx(_components.a, { href: "https://blog.csdn.net/leijmdas/article/details/149748522", rel: "nofollow", target: "_blank" }), "。"] }), "\n"] }), "\n", _jsx(_components.p, { children: _jsx(_components.strong, { children: "网络请求类" }) }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: _jsx(_components.code, { children: "useFetch" }) }), "：集成了请求状态（", _jsx(_components.code, { children: "isFetching" }), "、", _jsx(_components.code, { children: "error" }), "、", _jsx(_components.code, { children: "data" }), "）的声明式 HTTP 客户端", _jsx(_components.a, { href: "https://blog.csdn.net/leijmdas/article/details/149748522", rel: "nofollow", target: "_blank" }), "。"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: _jsx(_components.code, { children: "useWebSocket" }) }), "：轻松管理 WebSocket 连接，自动处理重连和响应式数据同步", _jsx(_components.a, { href: "https://blog.csdn.net/leijmdas/article/details/149748522", rel: "nofollow", target: "_blank" }), "。"] }), "\n"] }), "\n", _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "表单验证库VeeValidate" }), "\n", _jsx(_components.a, { href: "https://vee-validate.logaretm.com/v4", rel: "nofollow", target: "_blank", children: "VeeValidate" }), " 安装 ", _jsx(_components.code, { children: "pnpm add vee-validate" }), ",有点类似于tanstack form，react hooks form"] }), "\n", _jsx(_components.p, { children: "简单使用：" }), "\n", _jsxs(_components.div, { className: "code-window", children: [_jsxs(_components.div, { className: "code-header", children: [_jsxs(_components.div, { className: "window-controls", children: [_jsx(_components.span, { className: "control close" }), _jsx(_components.span, { className: "control minimize" }), _jsx(_components.span, { className: "control maximize" })] }), _jsx(_components.span, { className: "code-lang", children: "ts" })] }), _jsx(_components.div, { className: "code-content", children: _jsx(_components.pre, { className: "language-ts", children: _jsxs(_components.code, { className: "language-ts code-highlight", children: [_jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token operator", children: "<" }), "script setup", _jsx(_components.span, { className: "token operator", children: ">" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token keyword", children: "import" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), " useForm", _jsx(_components.span, { className: "token punctuation", children: "," }), " useField ", _jsx(_components.span, { className: "token punctuation", children: "}" }), " ", _jsx(_components.span, { className: "token keyword", children: "from" }), " ", _jsx(_components.span, { className: "token string", children: "'vee-validate'" }), "\n"] }), _jsx(_components.span, { className: "code-line", children: "\n" }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token comment", children: "// 定义表单验证规则" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token keyword", children: "const" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), " handleSubmit", _jsx(_components.span, { className: "token punctuation", children: "," }), " isSubmitting ", _jsx(_components.span, { className: "token punctuation", children: "}" }), " ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token function", children: "useForm" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" validationSchema", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" email", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "'required|email'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" password", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "'required|min:6'" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), "\n"] }), _jsx(_components.span, { className: "code-line", children: "\n" }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token comment", children: "// 绑定字段" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token keyword", children: "const" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), " value", _jsx(_components.span, { className: "token operator", children: ":" }), " email", _jsx(_components.span, { className: "token punctuation", children: "," }), " errorMessage", _jsx(_components.span, { className: "token operator", children: ":" }), " emailError ", _jsx(_components.span, { className: "token punctuation", children: "}" }), " ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token function", children: "useField" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token string", children: "'email'" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token keyword", children: "const" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), " value", _jsx(_components.span, { className: "token operator", children: ":" }), " password", _jsx(_components.span, { className: "token punctuation", children: "," }), " errorMessage", _jsx(_components.span, { className: "token operator", children: ":" }), " passwordError ", _jsx(_components.span, { className: "token punctuation", children: "}" }), " ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token function", children: "useField" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token string", children: "'password'" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), "\n"] }), _jsx(_components.span, { className: "code-line", children: "\n" }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token comment", children: "// 提交处理" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token keyword", children: "const" }), " onSubmit ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token function", children: "handleSubmit" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "values ", _jsx(_components.span, { className: "token operator", children: "=>" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token builtin", children: "console" }), _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token function", children: "log" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token string", children: "'表单数据：'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " values", _jsx(_components.span, { className: "token punctuation", children: ")" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token operator", children: "/" }), "script", _jsx(_components.span, { className: "token operator", children: ">" }), "\n"] }), _jsx(_components.span, { className: "code-line", children: "\n" }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token operator", children: "<" }), "template", _jsx(_components.span, { className: "token operator", children: ">" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token operator", children: "<" }), "form ", _jsxs(_components.span, { className: "token decorator", children: [_jsx(_components.span, { className: "token at operator", children: "@" }), _jsx(_components.span, { className: "token function", children: "submit" })] }), _jsx(_components.span, { className: "token operator", children: "=" }), _jsx(_components.span, { className: "token string", children: "\"onSubmit\"" }), _jsx(_components.span, { className: "token operator", children: ">" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token operator", children: "<" }), "div", _jsx(_components.span, { className: "token operator", children: ">" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token operator", children: "<" }), "input v", _jsx(_components.span, { className: "token operator", children: "-" }), "model", _jsx(_components.span, { className: "token operator", children: "=" }), _jsx(_components.span, { className: "token string", children: "\"email\"" }), " type", _jsx(_components.span, { className: "token operator", children: "=" }), _jsx(_components.span, { className: "token string", children: "\"email\"" }), " placeholder", _jsx(_components.span, { className: "token operator", children: "=" }), _jsx(_components.span, { className: "token string", children: "\"邮箱\"" }), " ", _jsx(_components.span, { className: "token operator", children: "/" }), _jsx(_components.span, { className: "token operator", children: ">" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token operator", children: "<" }), "span", _jsx(_components.span, { className: "token operator", children: ">" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), " emailError ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token operator", children: "/" }), "span", _jsx(_components.span, { className: "token operator", children: ">" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token operator", children: "/" }), "div", _jsx(_components.span, { className: "token operator", children: ">" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token operator", children: "<" }), "div", _jsx(_components.span, { className: "token operator", children: ">" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token operator", children: "<" }), "input v", _jsx(_components.span, { className: "token operator", children: "-" }), "model", _jsx(_components.span, { className: "token operator", children: "=" }), _jsx(_components.span, { className: "token string", children: "\"password\"" }), " type", _jsx(_components.span, { className: "token operator", children: "=" }), _jsx(_components.span, { className: "token string", children: "\"password\"" }), " placeholder", _jsx(_components.span, { className: "token operator", children: "=" }), _jsx(_components.span, { className: "token string", children: "\"密码\"" }), " ", _jsx(_components.span, { className: "token operator", children: "/" }), _jsx(_components.span, { className: "token operator", children: ">" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token operator", children: "<" }), "span", _jsx(_components.span, { className: "token operator", children: ">" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), " passwordError ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token operator", children: "/" }), "span", _jsx(_components.span, { className: "token operator", children: ">" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token operator", children: "/" }), "div", _jsx(_components.span, { className: "token operator", children: ">" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token operator", children: "<" }), "button ", _jsx(_components.span, { className: "token operator", children: ":" }), "disabled", _jsx(_components.span, { className: "token operator", children: "=" }), _jsx(_components.span, { className: "token string", children: "\"isSubmitting\"" }), _jsx(_components.span, { className: "token operator", children: ">" }), "提交", _jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token operator", children: "/" }), "button", _jsx(_components.span, { className: "token operator", children: ">" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token operator", children: "/" }), "form", _jsx(_components.span, { className: "token operator", children: ">" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token operator", children: "/" }), "template", _jsx(_components.span, { className: "token operator", children: ">" }), "\n"] })] }) }) })] }), "\n", _jsxs(_components.h3, { id: "vuex持久化", children: ["vuex持久化", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#vuex持久化", children: _jsx(_components.span, { className: "icon icon-link" }) })] }), "\n", _jsxs(_components.p, { children: ["在玩到vue的状态库", _jsx(_components.code, { children: "vuex" }), "或者", _jsx(_components.code, { children: "pinia" }), "的时候，发现官方没有类似于", _jsx(_components.strong, { children: "React" }), "的", _jsx(_components.code, { children: "zustand" }), "那样的持久化功能，需要开发者自己去发挥，那么这样的话可玩性就很多了。"] }), "\n", _jsxs(_components.h4, { id: "单store持久化", children: ["单store持久化", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#单store持久化", children: _jsx(_components.span, { className: "icon icon-link" }) })] }), "\n", _jsxs(_components.p, { children: ["以", _jsx(_components.code, { children: "vuex" }), "为例，先写一个", _jsx(_components.code, { children: "count-store.js" })] }), "\n", _jsxs(_components.div, { className: "code-window", children: [_jsxs(_components.div, { className: "code-header", children: [_jsxs(_components.div, { className: "window-controls", children: [_jsx(_components.span, { className: "control close" }), _jsx(_components.span, { className: "control minimize" }), _jsx(_components.span, { className: "control maximize" })] }), _jsx(_components.span, { className: "code-lang", children: "js" })] }), _jsx(_components.div, { className: "code-content", children: _jsx(_components.pre, { className: "language-js", children: _jsxs(_components.code, { className: "language-js code-highlight", children: [_jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token keyword module", children: "export" }), " ", _jsx(_components.span, { className: "token keyword", children: "const" }), " countStore ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token literal-property property", children: "namespaced" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token boolean", children: "true" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token literal-property property", children: "state" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token literal-property property", children: "count" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "0" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token literal-property property", children: "mutations" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token function", children: "increment" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsxs(_components.span, { className: "token parameter", children: ["state", _jsx(_components.span, { className: "token punctuation", children: "," }), " num"] }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" state", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "count" }), " ", _jsx(_components.span, { className: "token operator", children: "+=" }), " num", _jsx(_components.span, { className: "token punctuation", children: ";" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token dom variable", children: "window" }), _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "localStorage" }), _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "count" }), " ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token known-class-name class-name", children: "JSON" }), _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token method function property-access", children: "stringify" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "state", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "count" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token function", children: "setCount" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsxs(_components.span, { className: "token parameter", children: ["state", _jsx(_components.span, { className: "token punctuation", children: "," }), " value"] }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" state", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "count" }), " ", _jsx(_components.span, { className: "token operator", children: "=" }), " value", _jsx(_components.span, { className: "token punctuation", children: ";" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token literal-property property", children: "actions" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token function", children: "asyncLoaderCount" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token parameter", children: "context" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token keyword", children: "const" }), " value ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token known-class-name class-name", children: "JSON" }), _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token method function property-access", children: "parse" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token dom variable", children: "window" }), _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "localStorage" }), _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "count" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token operator", children: "||" }), " ", _jsx(_components.span, { className: "token number", children: "0" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" value ", _jsx(_components.span, { className: "token operator", children: "&&" }), " context", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token method function property-access", children: "commit" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token string", children: "'setCount'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " value", _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] })] }) }) })] }), "\n", _jsxs(_components.p, { children: ["并导出到 ", _jsx(_components.code, { children: "index.js" })] }), "\n", _jsxs(_components.div, { className: "code-window", children: [_jsxs(_components.div, { className: "code-header", children: [_jsxs(_components.div, { className: "window-controls", children: [_jsx(_components.span, { className: "control close" }), _jsx(_components.span, { className: "control minimize" }), _jsx(_components.span, { className: "control maximize" })] }), _jsx(_components.span, { className: "code-lang", children: "js" })] }), _jsx(_components.div, { className: "code-content", children: _jsx(_components.pre, { className: "language-js", children: _jsxs(_components.code, { className: "language-js code-highlight", children: [_jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token keyword module", children: "import" }), " ", _jsx(_components.span, { className: "token imports", children: _jsx(_components.span, { className: "token maybe-class-name", children: "Vue" }) }), " ", _jsx(_components.span, { className: "token keyword module", children: "from" }), " ", _jsx(_components.span, { className: "token string", children: "'vue'" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token keyword module", children: "import" }), " ", _jsx(_components.span, { className: "token imports", children: _jsx(_components.span, { className: "token maybe-class-name", children: "VueX" }) }), " ", _jsx(_components.span, { className: "token keyword module", children: "from" }), " ", _jsx(_components.span, { className: "token string", children: "'vuex'" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token keyword module", children: "import" }), " ", _jsxs(_components.span, { className: "token imports", children: [_jsx(_components.span, { className: "token punctuation", children: "{" }), " countStore ", _jsx(_components.span, { className: "token punctuation", children: "}" })] }), " ", _jsx(_components.span, { className: "token keyword module", children: "from" }), " ", _jsx(_components.span, { className: "token string", children: "'./count-store'" }), " \n"] }), _jsx(_components.span, { className: "code-line", children: " \n" }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token maybe-class-name", children: "Vue" }), _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token method function property-access", children: "use" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token maybe-class-name", children: "VueX" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " \n"] }), _jsx(_components.span, { className: "code-line", children: " \n" }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token keyword", children: "const" }), " store ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token keyword", children: "new" }), " ", _jsxs(_components.span, { className: "token class-name", children: ["VueX", _jsx(_components.span, { className: "token punctuation", children: "." }), "Store"] }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token literal-property property", children: "modules" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), " \n"] }), _jsx(_components.span, { className: "code-line", children: " countStore \n" }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " \n"] }), _jsx(_components.span, { className: "code-line", children: " \n" }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token keyword module", children: "export" }), " ", _jsx(_components.span, { className: "token keyword module", children: "default" }), " store", _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] })] }) }) })] }), "\n", _jsx(_components.p, { children: "然后在vue组件中使用：" }), "\n", _jsxs(_components.div, { className: "code-window", children: [_jsxs(_components.div, { className: "code-header", children: [_jsxs(_components.div, { className: "window-controls", children: [_jsx(_components.span, { className: "control close" }), _jsx(_components.span, { className: "control minimize" }), _jsx(_components.span, { className: "control maximize" })] }), _jsx(_components.span, { className: "code-lang", children: "js" })] }), _jsx(_components.div, { className: "code-content", children: _jsx(_components.pre, { className: "language-js", children: _jsxs(_components.code, { className: "language-js code-highlight", children: [_jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token operator", children: "<" }), "template", _jsx(_components.span, { className: "token operator", children: ">" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token operator", children: "<" }), "div", _jsx(_components.span, { className: "token operator", children: ">" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token operator", children: "<" }), "p", _jsx(_components.span, { className: "token operator", children: ">" }), "count", _jsx(_components.span, { className: "token operator", children: ":" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), " count ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token operator", children: "/" }), "p", _jsx(_components.span, { className: "token operator", children: ">" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token operator", children: "<" }), "el", _jsx(_components.span, { className: "token operator", children: "-" }), "button @click", _jsx(_components.span, { className: "token operator", children: "=" }), _jsx(_components.span, { className: "token string", children: "\"increment(3)\"" }), _jsx(_components.span, { className: "token operator", children: ">" }), "increment", _jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token operator", children: "/" }), "el", _jsx(_components.span, { className: "token operator", children: "-" }), "button", _jsx(_components.span, { className: "token operator", children: ">" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token operator", children: "/" }), "div", _jsx(_components.span, { className: "token operator", children: ">" }), _jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token operator", children: "/" }), "template", _jsx(_components.span, { className: "token operator", children: ">" }), " \n"] }), _jsx(_components.span, { className: "code-line", children: " \n" }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token operator", children: "<" }), "script", _jsx(_components.span, { className: "token operator", children: ">" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token keyword module", children: "import" }), " ", _jsxs(_components.span, { className: "token imports", children: [_jsx(_components.span, { className: "token punctuation", children: "{" }), " mapState", _jsx(_components.span, { className: "token punctuation", children: "," }), " mapMutations", _jsx(_components.span, { className: "token punctuation", children: "," }), " mapActions ", _jsx(_components.span, { className: "token punctuation", children: "}" })] }), " ", _jsx(_components.span, { className: "token keyword module", children: "from" }), " ", _jsx(_components.span, { className: "token string", children: "'vuex'" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token keyword module", children: "export" }), " ", _jsx(_components.span, { className: "token keyword module", children: "default" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token literal-property property", children: "name" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "'HelloWorld'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token literal-property property", children: "computed" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token spread operator", children: "..." }), _jsx(_components.span, { className: "token method function property-access", children: "mapState" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token string", children: "'countStore'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token punctuation", children: "[" }), _jsx(_components.span, { className: "token string", children: "'count'" }), _jsx(_components.span, { className: "token punctuation", children: "]" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token literal-property property", children: "methods" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token spread operator", children: "..." }), _jsx(_components.span, { className: "token method function property-access", children: "mapMutations" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token string", children: "'countStore'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token punctuation", children: "[" }), _jsx(_components.span, { className: "token string", children: "'increment'" }), _jsx(_components.span, { className: "token punctuation", children: "]" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token spread operator", children: "..." }), _jsx(_components.span, { className: "token method function property-access", children: "mapActions" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token string", children: "'countStore'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token punctuation", children: "[" }), _jsx(_components.span, { className: "token string", children: "'asyncLoaderCount'" }), _jsx(_components.span, { className: "token punctuation", children: "]" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token function", children: "created" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token keyword", children: "this" }), _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token method function property-access", children: "asyncLoaderCount" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token comment", children: "// 开局加载" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token punctuation", children: "}" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token operator", children: "/" }), "script", _jsx(_components.span, { className: "token operator", children: ">" }), "\n"] })] }) }) })] }), "\n", _jsx(_components.p, { children: "当点击按钮的时候，可以发现f12开发者工具里面的应用，可以看到count值已经被持久化" }), "\n", _jsx(_components.hr, {}), "\n", _jsxs(_components.h4, { id: "subscribe完成持久化", children: ["subscribe完成持久化", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#subscribe完成持久化", children: _jsx(_components.span, { className: "icon icon-link" }) })] }), "\n", _jsx(_components.p, { children: "但是这只是单个值的持久化，正常情况下需要多值持久化操作，如果一个一个设置会非常繁琐。此时可以使用,而正常情况下可以使用vuex的subscribe来做订阅，完成持久化。" }), "\n", _jsxs(_components.div, { className: "code-window", children: [_jsxs(_components.div, { className: "code-header", children: [_jsxs(_components.div, { className: "window-controls", children: [_jsx(_components.span, { className: "control close" }), _jsx(_components.span, { className: "control minimize" }), _jsx(_components.span, { className: "control maximize" })] }), _jsx(_components.span, { className: "code-lang", children: "js" })] }), _jsx(_components.div, { className: "code-content", children: _jsx(_components.pre, { className: "language-js", children: _jsxs(_components.code, { className: "language-js code-highlight", children: [_jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token keyword", children: "const" }), " ", _jsx(_components.span, { className: "token constant", children: "KEY_PREFIX" }), " ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token string", children: "'VUEX_STATE'" }), " \n"] }), _jsx(_components.span, { className: "code-line", children: " \n" }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token keyword module", children: "export" }), " ", _jsx(_components.span, { className: "token keyword", children: "function" }), " ", _jsx(_components.span, { className: "token function", children: "persistPlugin" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token parameter", children: "store" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token comment", children: "// 存入数据 " }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" store", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token method function property-access", children: "subscribe" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token parameter", children: "state" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token arrow operator", children: "=>" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token dom variable", children: "window" }), _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "localStorage" }), _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token method function property-access", children: "setItem" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token constant", children: "KEY_PREFIX" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token known-class-name class-name", children: "JSON" }), _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token method function property-access", children: "stringify" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "state", _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token comment", children: "// 读取数据 " }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token keyword control-flow", children: "try" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token keyword", children: "const" }), " state ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token known-class-name class-name", children: "JSON" }), _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token method function property-access", children: "parse" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token dom variable", children: "window" }), _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "localStorage" }), _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token method function property-access", children: "getItem" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token constant", children: "KEY_PREFIX" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" state ", _jsx(_components.span, { className: "token operator", children: "&&" }), " store", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token method function property-access", children: "replaceState" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "state", _jsx(_components.span, { className: "token punctuation", children: ")" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), " ", _jsx(_components.span, { className: "token keyword control-flow", children: "catch" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), "e", _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token console class-name", children: "console" }), _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token method function property-access", children: "log" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "e", _jsx(_components.span, { className: "token punctuation", children: ")" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] })] }) }) })] }), "\n", _jsxs(_components.h4, { id: "监听beforeunload完成持久化", children: ["监听beforeunload完成持久化", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#监听beforeunload完成持久化", children: _jsx(_components.span, { className: "icon icon-link" }) })] }), "\n", _jsx(_components.p, { children: "有时候状态管理内容太多，存入太多了，导致页面卡顿，可以选择在页面注销的时候再进行持久化，如下：" }), "\n", _jsxs(_components.div, { className: "code-window", children: [_jsxs(_components.div, { className: "code-header", children: [_jsxs(_components.div, { className: "window-controls", children: [_jsx(_components.span, { className: "control close" }), _jsx(_components.span, { className: "control minimize" }), _jsx(_components.span, { className: "control maximize" })] }), _jsx(_components.span, { className: "code-lang", children: "js" })] }), _jsx(_components.div, { className: "code-content", children: _jsx(_components.pre, { className: "language-js", children: _jsxs(_components.code, { className: "language-js code-highlight", children: [_jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token keyword", children: "const" }), " ", _jsx(_components.span, { className: "token constant", children: "KEY_PREFIX" }), " ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token string", children: "'VUEX_STATE'" }), " \n"] }), _jsx(_components.span, { className: "code-line", children: " \n" }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token keyword module", children: "export" }), " ", _jsx(_components.span, { className: "token keyword", children: "function" }), " ", _jsx(_components.span, { className: "token function", children: "persistPlugin" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token parameter", children: "store" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token comment", children: "// 存入数据 " }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token dom variable", children: "window" }), _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token method function property-access", children: "addEventListener" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token string", children: "'beforeunload'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token arrow operator", children: "=>" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token dom variable", children: "window" }), _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "localStorage" }), _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token method function property-access", children: "setItem" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token constant", children: "KEY_PREFIX" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token known-class-name class-name", children: "JSON" }), _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token method function property-access", children: "stringify" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "store", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "state" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token comment", children: "// 读取数据 " }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token keyword control-flow", children: "try" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token keyword", children: "const" }), " state ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token known-class-name class-name", children: "JSON" }), _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token method function property-access", children: "parse" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token dom variable", children: "window" }), _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "localStorage" }), _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token method function property-access", children: "getItem" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token constant", children: "KEY_PREFIX" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" state ", _jsx(_components.span, { className: "token operator", children: "&&" }), " store", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token method function property-access", children: "replaceState" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "state", _jsx(_components.span, { className: "token punctuation", children: ")" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), " ", _jsx(_components.span, { className: "token keyword control-flow", children: "catch" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), "e", _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token console class-name", children: "console" }), _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token method function property-access", children: "log" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "e", _jsx(_components.span, { className: "token punctuation", children: ")" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] })] }) }) })] }), "\n", _jsxs(_components.h2, { id: "webpack篇", children: ["webpack篇", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#webpack篇", children: _jsx(_components.span, { className: "icon icon-link" }) })] }), "\n", _jsxs(_components.p, { children: ["Webpack 是一个", _jsx(_components.strong, { children: "静态模块打包工具" }), "。它把项目中的一切资源（JS、CSS、图片、字体等）都视为模块，通过分析模块间的依赖关系，最终打包成浏览器可以运行的静态文件。"] }), "\n", _jsx(_components.p, { children: "虽然现在 Vite 等新工具很火，但 Webpack 依然是前端工程化领域绕不开的经典。理解 Webpack，有助于理解构建工具的核心设计思路。" }), "\n", _jsxs(_components.h3, { id: "loader和plugin", children: ["Loader和Plugin", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#loader和plugin", children: _jsx(_components.span, { className: "icon icon-link" }) })] }), "\n", _jsx(_components.p, { children: "Loader，顾名思义就是加载的意思，是一种转换器，将webpack不认识的类型转换为可以识别的js，它可以是css，字体，图片，以及es6往es5的转换等等。" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "其本质为一个函数，接收webpack不认识的东西进行转化，这是由于webpack只认识js。" }), "\n", _jsx(_components.li, { children: "其执行为链式的，从左到右，再从上到下，最后一个loader把js传递给webpack。" }), "\n", _jsx(_components.li, { children: "同理loader分为同步loader和异步loader" }), "\n", _jsx(_components.li, { children: "作用范围是单个文件。" }), "\n"] }), "\n", _jsx(_components.p, { children: "Plugin，是插件，也是对webpack的一种增强，不直接改变模块内容，而是在构件中执行额外操作" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "plugin本质是一个带有apply方法的类，通过监听webpack的compiler对象和钩子来接入构建流程。" }), "\n", _jsx(_components.li, { children: "主要用于增强方面，比如资源优化，环境变量注入等" }), "\n", _jsx(_components.li, { children: "作用范围是整个构建流程" }), "\n"] }), "\n", _jsxs(_components.h3, { id: "tree-shaking摇树优化", children: ["Tree Shaking（摇树优化）", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#tree-shaking摇树优化", children: _jsx(_components.span, { className: "icon icon-link" }) })] }), "\n", _jsxs(_components.p, { children: ["Tree Shaking 的本质是", _jsx(_components.strong, { children: "消除未引用的代码（dead code elimination）" }), "。它通过分析代码的静态导入/导出关系，确定哪些模块和函数被真正使用，然后从最终 bundle 中剔除未被使用的部分。"] }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "webpack只有在基于ESM的模式下才能启动tree shaking" }), "\n", _jsx(_components.li, { children: "ESM的导入和导出是静态的，在代码的编译过程就可以进行确定、无需执行代码" }), "\n", _jsxs(_components.li, { children: ["CommonJS的", _jsx(_components.code, { children: "require/module.exports" }), "是动态的，", _jsx(_components.code, { children: "require" }), " 可以写在条件语句中、变量路径等，只有在运行时才知道导入了什么，Webpack 无法静态分析"] }), "\n", _jsxs(_components.li, { children: ["生产模式下默认开启", _jsx(_components.code, { children: "tree shaking" }), "，通过", _jsx(_components.code, { children: "sideEffects" }), "生命模块副作用"] }), "\n"] }), "\n", _jsxs(_components.h3, { id: "vueconfigjs常用配置", children: ["vue.config.js常用配置", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#vueconfigjs常用配置", children: _jsx(_components.span, { className: "icon icon-link" }) })] }), "\n", _jsxs(_components.p, { children: ["一般会使用vue-cli来启用一个vue项目，它会默认集成webpack和一些常用的loader和plugin，所以很多情况下直接针对", _jsx(_components.code, { children: "vue.config.js" }), "来进行配置即可，直接绕过繁琐的webpack配置"] }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: ["公共路径配置：", _jsx(_components.code, { children: "publicPath: process.env.NODE_ENV === 'production' ? '/public/' : '/'," })] }), "\n", _jsxs(_components.li, { children: ["打包输出目录配置：", _jsx(_components.code, { children: "outputDir: 'dist'," })] }), "\n", _jsxs(_components.li, { children: ["静态资源目录配置: ", _jsx(_components.code, { children: "assetsDir: 'static'," })] }), "\n", _jsx(_components.li, { children: "开发服务器代理和跨域配置:" }), "\n"] }), "\n", _jsxs(_components.div, { className: "code-window", children: [_jsxs(_components.div, { className: "code-header", children: [_jsxs(_components.div, { className: "window-controls", children: [_jsx(_components.span, { className: "control close" }), _jsx(_components.span, { className: "control minimize" }), _jsx(_components.span, { className: "control maximize" })] }), _jsx(_components.span, { className: "code-lang", children: "js" })] }), _jsx(_components.div, { className: "code-content", children: _jsx(_components.pre, { className: "language-js", children: _jsxs(_components.code, { className: "language-js code-highlight", children: [_jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token literal-property property", children: "devServer" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token literal-property property", children: "port" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "8080" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token literal-property property", children: "proxy" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token string-property property", children: "'/api'" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token literal-property property", children: "target" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "'http://localhost:3000'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token literal-property property", children: "changeOrigin" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token boolean", children: "true" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token literal-property property", children: "pathRewrite" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), " ", _jsx(_components.span, { className: "token string-property property", children: "'^/api'" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "''" }), " ", _jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] })] }) }) })] }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "chainWebpack配置" }), "\n"] }), "\n", _jsxs(_components.div, { className: "code-window", children: [_jsxs(_components.div, { className: "code-header", children: [_jsxs(_components.div, { className: "window-controls", children: [_jsx(_components.span, { className: "control close" }), _jsx(_components.span, { className: "control minimize" }), _jsx(_components.span, { className: "control maximize" })] }), _jsx(_components.span, { className: "code-lang", children: "js" })] }), _jsx(_components.div, { className: "code-content", children: _jsx(_components.pre, { className: "language-js", children: _jsxs(_components.code, { className: "language-js code-highlight", children: [_jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token function-variable function", children: "chainWebpack" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token parameter", children: "config" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token arrow operator", children: "=>" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" config", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "resolve" }), _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "alias" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token method function property-access", children: "set" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token string", children: "'@'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " path", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token method function property-access", children: "resolve" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "__dirname", _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token string", children: "'src'" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token method function property-access", children: "set" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token string", children: "'@c'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " path", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token method function property-access", children: "resolve" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "__dirname", _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token string", children: "'src/components'" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] })] }) }) })] }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "css配置" }), "\n"] }), "\n", _jsxs(_components.div, { className: "code-window", children: [_jsxs(_components.div, { className: "code-header", children: [_jsxs(_components.div, { className: "window-controls", children: [_jsx(_components.span, { className: "control close" }), _jsx(_components.span, { className: "control minimize" }), _jsx(_components.span, { className: "control maximize" })] }), _jsx(_components.span, { className: "code-lang", children: "js" })] }), _jsx(_components.div, { className: "code-content", children: _jsx(_components.pre, { className: "language-js", children: _jsxs(_components.code, { className: "language-js code-highlight", children: [_jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token literal-property property", children: "css" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token comment", children: "// 是否提取 CSS 为单独文件（生产默认 true）" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token literal-property property", children: "extract" }), _jsx(_components.span, { className: "token operator", children: ":" }), " process", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "env" }), _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token constant", children: "NODE_ENV" }), " ", _jsx(_components.span, { className: "token operator", children: "===" }), " ", _jsx(_components.span, { className: "token string", children: "'production'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token comment", children: "// 是否启用 CSS source map" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token literal-property property", children: "sourceMap" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token boolean", children: "false" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token comment", children: "// CSS 预处理器传递额外选项" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token literal-property property", children: "loaderOptions" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token literal-property property", children: "sass" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token literal-property property", children: "additionalData" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsxs(_components.span, { className: "token template-string", children: [_jsx(_components.span, { className: "token template-punctuation string", children: "`" }), _jsx(_components.span, { className: "token string", children: "@import \"@/styles/variables.scss\";" }), _jsx(_components.span, { className: "token template-punctuation string", children: "`" })] }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] })] }) }) })] }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "代码分割配置" }), "\n"] }), "\n", _jsxs(_components.div, { className: "code-window", children: [_jsxs(_components.div, { className: "code-header", children: [_jsxs(_components.div, { className: "window-controls", children: [_jsx(_components.span, { className: "control close" }), _jsx(_components.span, { className: "control minimize" }), _jsx(_components.span, { className: "control maximize" })] }), _jsx(_components.span, { className: "code-lang", children: "js" })] }), _jsx(_components.div, { className: "code-content", children: _jsx(_components.pre, { className: "language-js", children: _jsxs(_components.code, { className: "language-js code-highlight", children: [_jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token literal-property property", children: "splitChunks" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token literal-property property", children: "chunks" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "'all'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token literal-property property", children: "cacheGroups" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token literal-property property", children: "vendors" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token literal-property property", children: "test" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsxs(_components.span, { className: "token regex", children: [_jsx(_components.span, { className: "token regex-delimiter", children: "/" }), _jsxs(_components.span, { className: "token regex-source language-regex", children: [_jsxs(_components.span, { className: "token char-class", children: [_jsx(_components.span, { className: "token char-class-punctuation punctuation", children: "[" }), _jsx(_components.span, { className: "token special-escape escape", children: "\\\\" }), "/", _jsx(_components.span, { className: "token char-class-punctuation punctuation", children: "]" })] }), "node_modules", _jsxs(_components.span, { className: "token char-class", children: [_jsx(_components.span, { className: "token char-class-punctuation punctuation", children: "[" }), _jsx(_components.span, { className: "token special-escape escape", children: "\\\\" }), "/", _jsx(_components.span, { className: "token char-class-punctuation punctuation", children: "]" })] })] }), _jsx(_components.span, { className: "token regex-delimiter", children: "/" })] }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token literal-property property", children: "name" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "'vendors'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token literal-property property", children: "priority" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "10" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token literal-property property", children: "reuseExistingChunk" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token boolean", children: "true" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token literal-property property", children: "common" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token literal-property property", children: "name" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "'common'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token literal-property property", children: "minChunks" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "2" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token comment", children: "// 至少被2个模块引用才提取" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token literal-property property", children: "priority" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "5" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token literal-property property", children: "reuseExistingChunk" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token boolean", children: "true" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] })] }) }) })] }), "\n", _jsxs(_components.h3, { id: "gzip压缩", children: ["gzip压缩", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#gzip压缩", children: _jsx(_components.span, { className: "icon icon-link" }) })] }), "\n", _jsxs(_components.p, { children: ["一般可以使用", _jsx(_components.code, { children: " pnpm install compression-webpack-plugin@6.1.1 -D" }), "这个插件完成webpack的gzip压缩。"] }), "\n", _jsxs(_components.div, { className: "code-window", children: [_jsxs(_components.div, { className: "code-header", children: [_jsxs(_components.div, { className: "window-controls", children: [_jsx(_components.span, { className: "control close" }), _jsx(_components.span, { className: "control minimize" }), _jsx(_components.span, { className: "control maximize" })] }), _jsx(_components.span, { className: "code-lang", children: "js" })] }), _jsx(_components.div, { className: "code-content", children: _jsx(_components.pre, { className: "language-js", children: _jsxs(_components.code, { className: "language-js code-highlight", children: [_jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token keyword", children: "const" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), " defineConfig ", _jsx(_components.span, { className: "token punctuation", children: "}" }), " ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token function", children: "require" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token string", children: "'@vue/cli-service'" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token keyword", children: "const" }), " ", _jsx(_components.span, { className: "token maybe-class-name", children: "CompressionPlugin" }), " ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token function", children: "require" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token string", children: "'compression-webpack-plugin'" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: ["module", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "exports" }), " ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token function", children: "defineConfig" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token literal-property property", children: "transpileDependencies" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token boolean", children: "true" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token function-variable function", children: "configureWebpack" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token arrow operator", children: "=>" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token comment", children: "// 只在生产环境构建时启用 " }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token keyword control-flow", children: "if" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), "process", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "env" }), _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token constant", children: "NODE_ENV" }), " ", _jsx(_components.span, { className: "token operator", children: "===" }), " ", _jsx(_components.span, { className: "token string", children: "'production'" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token keyword control-flow", children: "return" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token literal-property property", children: "plugins" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token punctuation", children: "[" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token keyword", children: "new" }), " ", _jsx(_components.span, { className: "token class-name", children: "CompressionPlugin" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token literal-property property", children: "algorithm" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "'gzip'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token comment", children: "// 压缩算法 " }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token literal-property property", children: "test" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsxs(_components.span, { className: "token regex", children: [_jsx(_components.span, { className: "token regex-delimiter", children: "/" }), _jsxs(_components.span, { className: "token regex-source language-regex", children: [_jsx(_components.span, { className: "token special-escape escape", children: "\\." }), _jsx(_components.span, { className: "token group punctuation", children: "(" }), "js", _jsx(_components.span, { className: "token alternation keyword", children: "|" }), "css", _jsx(_components.span, { className: "token alternation keyword", children: "|" }), "html", _jsx(_components.span, { className: "token alternation keyword", children: "|" }), "svg", _jsx(_components.span, { className: "token group punctuation", children: ")" }), _jsx(_components.span, { className: "token anchor function", children: "$" })] }), _jsx(_components.span, { className: "token regex-delimiter", children: "/" })] }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token comment", children: "// 匹配需要压缩的文件类型 " }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token literal-property property", children: "threshold" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "10240" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token comment", children: "// 对超过 10kb 的文件进行压缩 " }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token literal-property property", children: "minRatio" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "0.8" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token comment", children: "// 压缩比大于 0.8 的文件才进行压缩 " }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token literal-property property", children: "deleteOriginalAssets" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token boolean", children: "false" }), " ", _jsx(_components.span, { className: "token comment", children: "// 不删除源文件，保证兼容性 " }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "]" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token keyword control-flow", children: "return" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), " \n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " \n"] }), _jsx(_components.span, { className: "code-line", children: " \n" }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), "\n"] })] }) }) })] }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: ["同理在vite里面，是使用", _jsx(_components.code, { children: "pnpm add vite-plugin-compression -D" }), ","] }), "\n"] }), "\n", _jsxs(_components.div, { className: "code-window", children: [_jsxs(_components.div, { className: "code-header", children: [_jsxs(_components.div, { className: "window-controls", children: [_jsx(_components.span, { className: "control close" }), _jsx(_components.span, { className: "control minimize" }), _jsx(_components.span, { className: "control maximize" })] }), _jsx(_components.span, { className: "code-lang", children: "js" })] }), _jsx(_components.div, { className: "code-content", children: _jsx(_components.pre, { className: "language-js", children: _jsxs(_components.code, { className: "language-js code-highlight", children: [_jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token keyword module", children: "import" }), " ", _jsxs(_components.span, { className: "token imports", children: [_jsx(_components.span, { className: "token punctuation", children: "{" }), " defineConfig ", _jsx(_components.span, { className: "token punctuation", children: "}" })] }), " ", _jsx(_components.span, { className: "token keyword module", children: "from" }), " ", _jsx(_components.span, { className: "token string", children: "'vite'" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token keyword module", children: "import" }), " ", _jsx(_components.span, { className: "token imports", children: "viteCompression" }), " ", _jsx(_components.span, { className: "token keyword module", children: "from" }), " ", _jsx(_components.span, { className: "token string", children: "'vite-plugin-compression'" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsx(_components.span, { className: "code-line", children: "\n" }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token keyword module", children: "export" }), " ", _jsx(_components.span, { className: "token keyword module", children: "default" }), " ", _jsx(_components.span, { className: "token function", children: "defineConfig" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token literal-property property", children: "plugins" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token punctuation", children: "[" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token comment", children: "// Gzip 压缩配置" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token function", children: "viteCompression" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token literal-property property", children: "verbose" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token boolean", children: "true" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token comment", children: "// 是否在控制台输出压缩结果" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token literal-property property", children: "disable" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token boolean", children: "false" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token comment", children: "// 是否禁用压缩" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token literal-property property", children: "threshold" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "10240" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token comment", children: "// 对大于 10KB 的文件进行压缩" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token literal-property property", children: "algorithm" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "'gzip'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token comment", children: "// 压缩算法，默认 'gzip'" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token literal-property property", children: "ext" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "'.gz'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token comment", children: "// 生成的压缩文件后缀名" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token literal-property property", children: "deleteOriginFile" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token boolean", children: "false" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token comment", children: "// 是否删除原始文件，建议保留" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "]" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] })] }) }) })] }), "\n", _jsx(_components.p, { children: "当然这种配置需要在nginx里面配置达到最大化效果。" })] }); } function MDXContent(props = {}) { const {wrapper: MDXLayout} = { ..._provideComponents(), ...props.components }; return MDXLayout ? _jsx(MDXLayout, { ...props, children: _jsx(_createMdxContent, { ...props }) }) : _createMdxContent(props); } return { default: MDXContent };