reactive會把 refs 展平，所以可以這麼寫：

function useClient() { const name = ref('Alice') const greeting = computed(() => `Hello ${name.value}`) function updateName(newName: string) { name.value = newName } return reactive({ name, greeting, updateName }) } 

在 component 裏：

const client = useClient() client.greeting // => 'Hello Alice' client.updateName('Bob') client.greeting // => 'Hello Bob' 

現在client管理它自己的狀態，其暴露的接口可以直接用在模板裏。

我們也可以組合這些對象和保留嚮應性：

function useOrder(client: ReturnType<typeof useClient>) { const createdBy = computed(() => `Created by ${client.name}`) // 你也可以在這裏調用 client.updateName return reactive({ createdBy }) } const client = useClient() const order = useOrder(client) order.createdBy // => 'Created by Alice' client.updateName('Bob') order.createdBy // => 'Created by Bob' 

我覺得這是 vue 相對於其他庫特別的屬性，我只需要傳遞一個對象，而它擁有自己的狀態和方法。

在現實中，這些對象一般會基於後端數據，我們可以在後端數據的基礎上擴展狀態和方法。

async function useOrder(client: ReturnType<typeof useClient>) { const orderData = reactive(await fetchOrderData()) const paid = ref(false) async function pay() { const res = await paymentAPI() paid.value = res.success } return reactive({ ...toRefs(orderData), // 所有 orderData 的屬性會被暴露 // 我們需要 toRefs 來保持嚮應性 paid, pay }) } 

現在給定一個 order ，我們可以直接在模板裏綁定order.paid 和order.pay。

本帖在 reddit 上的版本： https://www.reddit.com/r/vuejs/comments/1owezu4/reactive_as_an_object_encapsulation/

排查一番发现这样的代码就能 cpu 干一半，里面再嵌套一个 v-for ，cpu 就占八九十了：

<li v-for="menu in menus" :key="menu.key"> </li> 

之前一直以为是 ai 插件的锅，屏蔽掉所有 ai 插件后，情况依然如此，把 v-for 相关代码注释掉以后就好了 这是个啥情况啊

With this release, we are unifying Nuxt UI and Nuxt UI Pro into a single, powerful, and completely free open-source library

Blog: https://nuxt.com/blog/nuxt-ui-v4

Nuxt UI: https://ui.nuxt.com/

上面这种写法 @vue/compiler-sfc 会报 Unsupported computed key in type referenced by a macro ，应该怎么写才对？谢谢。

1. 到底是怎么想的直接通过下标访问表单项，根本不考虑后期维护吗?
2. 为什么不考虑做成配置项自动适配每个表单，而不是每个表单都对应一个页面文件，每个文件冗余巨大。
3. 接口调用为什么不能做全局 api ，tm 复制几十遍。
4. 变量能不能不要 abc 123 的啊。
5. 24 年的项目，都 24 年了为什么还要用原生 wx 开发啊。

主要是针对这个项目代码评价，没有针对外包崽的意思。 总之是闹麻了，看着就头疼

附部分代码截图，很多地方都很离谱

https://play.vuejs.org/#eNp9U8Fu00AQ/ZXRXmJEsIVAHCInElQ9wAEqijj54tqTdMt6d2Wv3UCUOzeEOMAHIHFC8AP8De13MDubpNu09GLtzrx582b9ZiWeWpsOPYqJyLuqldZBh663s0LLxprWwQpanI/pU1ZODghrmLemgREVjXagA9PYTTzN/MVzUrrQWQaV0R3RuvcKD4yeywVMPWey4izMjXbH8gNO4OETjqzvFfr2miDBF+6X+Zo8CxOQdro4bKwqHdINILcwYbJpIVZRadQg3UbhPozscrQuxOzy4+fLb78ufn79++dLnvlHISqedXjQmBoV0UUUhYCMMHkW9RZj4Tqaxnc464ymh2b5haiIRypsX1knadpCTIAzPlcqZc5fcMy1PY638eoUq3e3xM+6pY8V4qjFDtsBC7HLubJdoAvpw+OXuKTzLklT9IrQdyRfY2dU7zUG2LNe1yQ7wrHa5+wEqRdvusOlQ91th/JCPXLN+EKQM/wT/m/0K7mP0sdcR3+XXnHrqn2ngir1gv6DI5rrrg1uGcN56arTPd8SUDts52WFcBy5bM9aum9OaFRNGuKKo9bYLmDZBm9L1RM6IuKSYGLL4CnUOJcauTTn7ywh08a0h410G9qE6Ea9rclEk6sWozEMN1rdm8BgZB11ROLZNWTSnL+bhgGkTFWqG7uVR8SzZAVpmrL+9EoE72eh+VWTiGUMicbzjSaYzsIgXkty6yRMvqtg1rWP1og2uIZjd211LQc+0FGVJ6hmYVUvvv+4+P0pz0JsA5Da9i7a20j5bvU3C0zoLFBfX+X1P0Ky0Q8=

直接展示代码：

App.vue

<script setup> import { ref, reactive } from 'vue' import Comp from './Comp.vue' // const styleCOnfig= ref({ // fontSize: 16 // }) const styleCOnfig= reactive({ fontSize: 16 }) </script> <template> <p :style="{ fontSize: styleConfig.fontSize + 'px'}">我是字体</p> <Comp v-model="styleConfig" /> </template> 

Comp.vue

<script setup lang="ts"> import { reactive, watch } from 'vue' interface StyleConfig { fontSize: number } interface Props { modelValue: StyleConfig } const props = defineProps<Props>() interface Emits { (e: 'update:modelValue', value: StyleConfig): void } const emit = defineEmits<Emits>() const localCOnfig= reactive<StyleConfig>({ ...props.modelValue }) watch(localConfig, (newConfig) => { emit('update:modelValue', { ...newConfig }) }, { deep: true }) </script> <template> <div> <label>字体大小</label> <input v-model="localConfig.fontSize" /> </div> </template> 

大会网站： https://vueconf.cn

Vue.js & Vite 作者将给大家带来主题演讲。

Vue & Nuxt & Vite 核心团队成员 Anthony Fu 将出席本次大会，他将给大家分享 Vite DevTools 设计哲学的最新进展，以及未来展望。

Vite 核心团队成员 Matias Capeletto （ patak ） 将通过远程的方式给大家带来主题为《 The first 5 years of Vite 》的演讲。

Vue.js 核心团队成员，Vue Router 、Pinia 、VueFire 等库的作者 Eduardo (posva) 将出席本次会议，给大家带来主题为《流畅的 UI 与异步状态管理》的演讲。

Vue & Vue Macros & Vue Language Tools 团队成员、TS Macro & Vue JSX Vapor 作者高飞将出席本次会议，给大家带来主题为《 Vue JSX Vapor 的进化史》的演讲。

Vue & VueUse 核心团队成员 Doctor Wu 将出席本次会议，给大家带来主题为《 Alien Signals：Vue 响应式演进与最速 Signals 实践》的演讲。

Vue.js 核心团队成员，Volar.js & Vue Language Tools & alien-signals 作者 Johnson 将出席本次会议，并带来主题为《 TSSLint 如何消除 linter 在 IDE 中最大的隐性开销》的演讲。本次分享将会介绍 TSSLint 如何通过重新设计，解决了上述性能问题。

腾讯高级前端工程师吕洋将出席本次会议，给大家带来主题为《浏览器里构建 Vue：渐进式 AI+低代码开发体验》的演讲。

Vue.js 核心团队成员，tsdown / Vue Macros 作者三咲智子将出席本次会议，给大家带来主题为《 tsdown：库库包一切》的演讲。

Vue Vine 作者沈青川将给大家带来主题为《 Vue Vine 1.0 升级报告》的分享。

Vue.js 团队成员、Vue Language Tools 核心贡献者山吹色御守将出席本次会议，给大家带来主题《 Vue Language Tools 的增量更新机制解析》的分享。

开篇

写业务的时候发现，因为想偷懒嘛，直接就在想在外部去定义一个变量，然后写个弹窗里（ tsx ）的 el-input ，而不是又去写个 vue 页面，但发现就输入不了了，而且跟着文档写 textarea 没有字数统计。就两个问题嘛

1.el-input 无法输入

TSX 的写法嘛，最开始我是这么写的

const auditText = ref(''); // 忽略代码<ElInputmodel-value={auditText.value}autosize={{ minRows: 5, maxRows: 10 }} max-length={50}placeholder="请填写审核不通过原因（最少五个字）"show-word-limittype="textarea" /> 

然后发现真是一点反应没有啊，然后看了下文档上面的这句话

const auditText = ref<string>(''); function test(value) { console.log(value); auditText.value = value; } //忽略代码 <ElInput model-value={auditText.value} OnInput={test} autosize={{ minRows: 5, maxRows: 10 }} max-length={50} placeholder="请填写审核不通过原因（最少五个字）" show-word-limit type="textarea" /> 

但是那其实也不用这么麻烦人文档里也写得很清楚了v-model就行

<ElInput v-model={auditText.value} autosize={{ minRows: 5, maxRows: 10 }} max-length={50} placeholder="请填写审核不通过原因（最少五个字）" show-word-limit type="textarea" /> 

2.字数统计不见了

先看看官网的写法，定义个 maxlength 再定义个 show-word-limit 就有字数统计了

可是如果我在 tsx 里按官网这么写会发生什么那

果然吗,不是 props 的属性就不用写了,原生事件是直接绑定在 attrs 上给 input 标签的，所以写在 tsx 里会报错，写在模版里不会。暂时就忽略这一行检查把~~~。

总结

平时会记录一些简单但好玩的问题，水一篇 vue ，每天一篇 vue 一篇 react 。

关于我的一些介绍

需求是二次封装，用在多个项目里，设计器/Builder 是必要的。

如果自己开发工作量又有点大，对于我来说能做集成就绝不自己开发。

1. @electron/osx-sign

   • 作用: 用于在 macOS 系统上对 Electron 应用程序进行代码签名的工具。

2. electron-winstaller

   • 作用: 用于为 Electron 应用程序创建 Windows 安装程序 (Squirrel.Windows installer)。

3. dayjs

   • 作用: 一个轻量级的 Javascript 日期时间库，用于解析、校验、操作和显示日期和时间。

4. immer

   • 作用: 一个 Javascript 库，通过在“草稿状态”（ draft state ）上进行修改来创建下一个不可变的状态，简化了不可变数据的处理。

5. minimist

   • 作用: 一个用于 Node.js 的命令行参数解析器。

6. nanoid

   • 作用: 一个小巧、安全、URL 友好的唯一字符串 ID 生成器。

7. web-vitals

   • 作用: Google 推出的一个库，用于测量和上报网页核心性能指标 (Core Web Vitals)，如 LCP, FID, CLS 。

8. axios

   • 作用: 一个基于 Promise 的 HTTP 客户端，可用于浏览器和 Node.js 环境中发送网络请求。

9. chalk

   • 作用: 一个用于在终端（命令行）中为文本添加颜色和样式的库。

10. electron-squirrel-startup

    • 作用: 用于处理 Electron 应用程序通过 Squirrel.Windows 安装和启动时的相关事件。

11. multistream

    • 作用: 将多个可读流（ readable streams ）合并成一个单一的流。

12. inquirer

    • 作用: 一个常用的交互式命令行用户界面集合，用于创建复杂的命令行交互提示。

13. sanitize-html

    • 作用: 用于清理 HTML 代码，移除不需要的标签和属性，防止 XSS 攻击等。

14. qrcode

    • 作用: 用于生成二维码图像的库。

15. vue

    • 作用: 一款流行的渐进式 Javascript 框架，用于构建用户界面。

16. @byted-sdk/account-api

    • 作用: 根据名称推测，这可能是字节跳动内部用于账户相关 API 的 SDK 。

17. vue-router

    • 作用: Vue.js 官方的路由管理器，用于构建单页面应用 (SPA)。

18. @vueuse/core

    • 作用: 一个包含 Vue 组合式 API (Composition API) 实用工具的集合库。

19. file-uri-to-path

    • 作用: 将 file: 协议的 URI 转换为本地文件系统路径。

20. follow-redirects

    • 作用: 一个支持自动跟随 HTTP/HTTPS 重定向的 HTTP/HTTPS 客户端。

21. proxy-from-env

    • 作用: 从环境变量 (如 HTTP_PROXY, HTTPS_PROXY, NO_PROXY) 中获取代理设置。

22. form-data

    • 作用: 一个用于创建 multipart/form-data 类型数据流的库，常用于文件上传。

23. asynckit

    • 作用: 一个用于异步操作的极简抽象层，为流、Promise 和回调提供一致的 API 。

24. combined-stream

    • 作用: 一个可以按顺序从一系列可读流中发出数据的流。

25. mime-types

    • 作用: 一个工具库，用于根据文件扩展名查找 MIME 类型，反之亦然。

26. delayed-stream

    • 作用: 一个可以延迟流事件（特别是 data 事件）直到调用 resume() 方法的流。

27. mime-db

    • 作用: 一个全面的 MIME 类型数据库。

28. supports-color

    • 作用: 检测终端（命令行环境）是否支持颜色以及支持的级别。

29. ansi-styles

    • 作用: 提供 ANSI 转义码，用于在终端中设置文本样式（如颜色、背景色、加粗等）。

30. has-flag

    • 作用: 检查命令行参数中是否存在某个标志（ flag ）。

31. color-convert

    • 作用: 提供颜色值转换功能，例如在 RGB, HSL, HEX 等不同颜色模型之间转换。

32. color-name

    • 作用: 一个包含颜色名称及其对应十六进制值的列表。

33. debug

    • 作用: 一个小型的 Javascript 调试工具，可以通过环境变量控制调试信息的输出。

34. once

    • 作用: 确保一个函数只被调用一次。

35. readable-stream

    • 作用: Node.js 核心 stream 模块中可读流接口的实现，可用于旧版 Node.js 或浏览器环境。

36. wrappy

    • 作用: 一个用于包装函数的工具。

37. inherits

    • 作用: Node.js util.inherits 方法的独立版本，用于实现对象间的原型继承。

38. util-deprecate

    • 作用: Node.js util.deprecate 方法的独立版本，用于标记函数或方法为已废弃。

39. string_decoder

    • 作用: Node.js string_decoder 模块的独立版本，用于将 Buffer 对象解码为字符串。

40. safe-buffer

    • 作用: 提供一个更安全的 Buffer 构造函数，以避免一些潜在的安全问题。

41. cli-width

    • 作用: 获取终端（命令行界面）的可是宽度。

42. lodash

    • 作用: 一个现代 Javascript 工具库，提供了许多实用的函数，简化常见的编程任务。

43. mute-stream

    • 作用: 一个可以被“静音”的直通流（ passthrough stream ），静音时数据会丢失。

44. run-async

    • 作用: 允许异步函数串行或并行执行。

45. ansi-escapes

    • 作用: 提供用于操作终端的 ANSI 转义码，如移动光标、清屏等。

46. figures

    • 作用: 提供各种 Unicode 符号，并为 Windows CMD 环境提供了回退方案。

47. strip-ansi

    • 作用: 从字符串中移除 ANSI 转义码。

48. external-editor

    • 作用: 允许用户使用其偏好的文本编辑器来编辑字符串。

49. string-width

    • 作用: 获取字符串在终端中实际显示的宽度（所占列数）。

50. cli-cursor

    • 作用: 用于控制命令行界面中光标的显示和隐藏。

51. wrap-ansi

    • 作用: 对包含 ANSI 转义码的字符串进行自动换行。

52. ora

    • 作用: 在终端中显示优雅的加载动画（ spinners ）。

53. escape-string-regexp

    • 作用: 转义字符串中的正则表达式特殊字符。

54. is-unicode-supported

    • 作用: 检测终端是否支持 Unicode 字符。

55. ansi-regex

    • 作用: 用于匹配 ANSI 转义码的正则表达式。

56. chardet

    • 作用: Javascript 的字符编码检测器。

57. iconv-lite

    • 作用: 纯 Javascript 实现的字符编码转换库。

58. tmp

    • 作用: Node.js 的临时文件和目录创建工具。

59. safer-buffer

    • 作用: 与 safe-buffer 类似，提供更安全的 Buffer API ，可能是其替代或增强版本。

60. os-tmpdir

    • 作用: Node.js os.tmpdir() 方法的 ponyfill （腻子脚本），提供获取操作系统临时目录路径的功能。

61. restore-cursor

    • 作用: 在程序退出时优雅地恢复命令行光标的显示状态。

62. onetime

    • 作用: 确保一个函数只执行一次（与 once 功能类似，但可能来自不同作者或有细微差别）。

63. mimic-fn

    • 作用: 使一个函数模仿另一个函数的某些属性（如名称、长度）。

64. cli-spinners

    • 作用: 提供多种命令行加载动画（ spinners ）样式。

65. is-interactive

    • 作用: 检查当前进程是否在交互式终端中运行。

66. log-symbols

    • 作用: 为日志信息提供各种状态符号（如 ✔, ℹ, ⚠, ✖）。

67. wcwidth

    • 作用: Javascript 实现的 wcwidth() 函数，用于计算宽字符（如中日韩字符）在终端中占据的列数。

68. defaults

    • 作用: 将默认选项对象合并到用户提供的选项对象中。

69. clone

    • 作用: 对 Javascript 对象进行深拷贝。

70. buffer

    • 作用: 为浏览器环境提供 Node.js Buffer API 的实现。

71. base64-js

    • 作用: 提供 Base64 编码和解码功能。

72. ieee754

    • 作用: 用于处理 IEEE754 浮点数的读取和写入。

73. is-plain-object

    • 作用: 判断一个值是否为纯粹的 Javascript 对象（即通过 {} 或 new Object() 创建的对象）。

74. parse-srcset

    • 作用: 解析 HTML <img> 标签的 srcset 属性。

75. postcss

    • 作用: 一个用 Javascript 转换 CSS 的工具，通过插件体系可以实现各种 CSS 处理功能。

76. htmlparser2

    • 作用: 一个宽容的、快速的 HTML 和 XML 解析器。

77. picocolors

    • 作用: 一个非常小且快速的 Node.js 库，用于通过 ANSI 颜色代码格式化终端文本。

78. source-map-js

    • 作用: 一个用于生成和使用 source map 格式的库，帮助调试压缩或转换后的代码。

79. domelementtype

    • 作用: 为 htmlparser2 定义 DOM 元素的类型。

80. entities

    • 作用: 用于 HTML/XML 实体的编码和解码。

81. domhandler

    • 作用: htmlparser2 的一个处理器，用于将解析的 HTML/XML 构建成 DOM 树结构。

82. domutils

    • 作用: 提供操作由 domhandler 创建的 DOM 结构的工具函数。

83. dom-serializer

    • 作用: 将 domhandler 创建的 DOM 树渲染回 HTML/XML 字符串。

84. pngjs

    • 作用: 一个简单的 PNG 图片编解码库，用于 Node.js 。

85. yargs

    • 作用: 一个强大的库，用于构建交互式的命令行工具，能解析参数、生成帮助信息等。

86. decamelize

    • 作用: 将驼峰命名（ camelCase ）的字符串转换为使用指定分隔符的小写字符串（例如 fooBar -> foo_bar）。

87. require-directory

    • 作用: 递归地遍历指定目录，require() 每个文件，并返回一个嵌套的哈希结构。

88. which-module

    • 作用: 根据给定的文件路径找到其所属的模块对象。

89. y18n

    • 作用: yargs 使用的轻量级国际化 (i18n) 库。

90. find-up

    • 作用: 通过向上遍历父目录来查找文件或目录。

91. camelcase

    • 作用: 将使用短横线、点、下划线或空格分隔的字符串转换为驼峰命名（ camelCase ）。

92. is-fullwidth-code-point

    • 作用: 检查一个数字是否为全角字符的 Unicode 码点。

93. path-exists

    • 作用: 检查指定的路径是否存在。

94. locate-path

    • 作用: 从多个路径中找出第一个实际存在的路径。

95. p-locate

    • 作用: 异步地查找并返回第一个满足测试函数的 Promise 。

96. p-limit

    • 作用: 以有限的并发数运行多个返回 Promise 的异步函数。

97. p-try

    • 作用: Promise.try() 的 ponyfill ，用于启动一个 Promise 链。

98. core-js-pure

    • 作用: Javascript 的模块化标准库，包含 ECMAScript 最新草案的 polyfills （纯净版，不污染全局作用域）。

99. js-cookie

    • 作用: 一个简单、轻量级的 Javascript API ，用于处理浏览器 cookie 。

100. fast-glob * 作用: 一个快速的 glob 模式匹配库（用于文件路径匹配）。

101. @nodelib/fs.stat * 作用: 提供具有扩展 API 的 fs.stat 和 fs.lstat 方法。

102. merge2 * 作用: 将多个流（ streams ）按顺序或并行合并为一个流。

103. glob-parent * 作用: 从 glob 字符串中提取出非通配符部分的父路径。

104. @nodelib/fs.walk * 作用: 提供遍历目录的方法。

105. micromatch * 作用: 高度优化的通配符和 glob 模式匹配库。

106. is-glob * 作用: 判断一个字符串是否看起来像一个 glob 模式或扩展 glob 模式。

107. is-extglob * 作用: 判断一个字符串是否为扩展 glob (extglob) 模式。

108. fastq * 作用: 一个快速、简单、基于 Promise 的异步队列。

109. @nodelib/fs.scandir * 作用: 提供 fs.scandir 方法，用于扫描目录内容。

110. reusify * 作用: 高效地重用对象，减少垃圾回收。

111. run-parallel * 作用: 并行运行一组函数。

112. queue-microtask * 作用: 一个用于将函数排队到微任务（ microtask ）中执行的微型库。

113. picomatch * 作用: 一个非常快速且准确的 Javascript glob 模式匹配器。

114. braces * 作用: Javascript 实现的类似 Bash 的花括号扩展功能（例如 a{b,c}d -> abd, acd）。

115. fill-range * 作用: 填充一个数字或字母范围，可以指定步长，或创建一个与正则表达式兼容的范围。

116. to-regex-range * 作用: 从两个数字或字母创建一个与正则表达式兼容的范围。

117. is-number * 作用: 判断一个值是否为数字类型。

118. node-machine-id * 作用: 获取一个唯一的机器 ID 。

119. @vue/shared * 作用: Vue.js 内部包共享的工具函数。

120. @vue/runtime-dom * 作用: Vue.js 针对 DOM 环境的运行时。

121. @vue/compiler-dom * 作用: Vue.js 针对 DOM 环境的编译器。

122. @vue/compiler-sfc * 作用: Vue.js 单文件组件 (SFC, .vue 文件) 的编译器。

123. @vue/server-renderer * 作用: Vue.js 用于服务器端渲染 (SSR) 的包。

124. csstype * 作用: 为 TypeScript 提供严格类型的 CSS 属性和值定义。

125. @vue/runtime-core * 作用: Vue.js 的运行时核心，平台无关。

126. @vue/reactivity * 作用: Vue.js 的响应式系统核心。

127. @vue/compiler-core * 作用: Vue.js 的编译器核心，平台无关。

128. estree-walker * 作用: 用于遍历符合 ESTree 规范的抽象语法树 (AST)。

129. @babel/parser * 作用: Babel 使用的 Javascript 解析器，可以将 Javascript 代码转换为 AST 。

130. @babel/types * 作用: Babel 用于处理 AST 节点的工具函数和类型定义。

131. @babel/helper-string-parser * 作用: Babel 内部用于解析字符串的辅助函数。

132. @babel/helper-validator-identifier * 作用: Babel 内部用于验证标识符（变量名等）的辅助函数。

133. to-fast-properties * 作用: 强制 V8 引擎对一个对象使用“快速属性”模式，以优化性能。

134. magic-string * 作用: 一个用于操作字符串并能生成对应 source map 的库。

135. @vue/reactivity-transform * 作用: Vue.js 实验性的响应式语法糖转换。

136. @vue/compiler-ssr * 作用: Vue.js 针对服务器端渲染 (SSR) 的编译器。

137. @jridgewell/sourcemap-codec * 作用: 用于编码和解码 sourcemap VLQ (Variable Length Quantity) 段。

138. crypto-js * 作用: 一个 Javascript 的加密标准库，支持多种加密算法和哈希函数。

139. isuri * 作用: 检查一个字符串是否为有效的 URI 。

140. rfc-3986 * 作用: 验证 URI 是否符合 RFC 3986 标准。

141. @vueuse/metadata * 作用: VueUse 内部使用的元数据。

142. vue-demi * 作用: 一个开发工具，允许编写通用的 Vue 库，使其同时兼容 Vue 2 和 Vue 3 。

143. @vueuse/shared * 作用: VueUse 库共享的工具函数。

144. plist * 作用: Apple 的属性列表 (Property List, .plist) 文件解析器和构建器。

145. fs-extra * 作用: 扩展了 Node.js 内置 fs 模块的功能，添加了更多文件系统操作方法，并为 fs 方法增加了 Promise 支持。

146. xmlbuilder * 作用: 一个用于 Node.js 的 XML 构建器。

147. graceful-fs * 作用: fs 模块的替代品，进行了一些改进，例如更好地处理文件系统错误和资源限制。

148. universalify * 作用: 将回调风格的函数转换为 Promise 风格的函数，反之亦然。

149. jsonfile * 作用: 方便地读取和写入 JSON 文件。

150. lodash.template * 作用: Lodash 库中的 _.template 方法，用于创建编译模板函数。

151. temp * 作用: Node.js 的临时文件和目录创建工具 (与 tmp 类似，可能由不同依赖使用)。

152. lodash.templatesettings * 作用: Lodash 库中的 _.templateSettings 方法，用于配置 _.template 的行为。

153. commander * 作用: Node.js 命令行界面解决方案，使创建命令行工具更简单。

154. minimatch * 作用: 一个轻量级的 glob 模式匹配工具。

155. glob * 作用: 为 Node.js 提供 glob 功能（文件名模式匹配）。

156. brace-expansion * 作用: 实现类似 Bash 的花括号扩展功能（已在 braces 中列出，功能相同）。

157. concat-map * 作用: 一个 map 函数，其回调可以返回一个数组或单个值，结果会被展平。

158. fs.realpath * 作用: Node.js fs.realpath 方法的实现或 ponyfill ，用于解析符号链接并返回规范化的绝对路径。

159. path-is-absolute * 作用: Node.js path.isAbsolute() 方法的 ponyfill ，判断路径是否为绝对路径。

160. inflight * 作用: 防止对同一资源发起重复的异步请求，而是将回调添加到正在进行的请求上。

161. mkdirp * 作用: 递归地创建目录，类似 Unix 命令 mkdir -p。

162. rimraf * 作用: Node.js 实现的 rm -rf 命令，用于递归地删除文件和目录。

今年，我们将再次相聚在深圳（老地方），共同迎来 VueConf 2025 ！

👨‍💻👩‍💻 本次大会将有 11 位演讲嘉宾 登场——既有大家熟悉的老朋友，也有首次亮相的新面孔。无论你是 Vue 的资深爱好者，还是刚入门的新手，这里都能找到属于你的技术干货与灵感火花！

🔥 为什么不能错过 VueConf 2025 ？

• 第一时间了解 Vue 的前沿动态
• 与社区大神面对面交流
• 收获实战经验与落地案例
• 感受浓浓的社区氛围与热情
• 🎫 门票正在热售中，数量有限，先到先得！

立即抢票 👉 https://vueconf.cn/

让我们一起在深圳，感受 Vue 的魅力！

VueConf 2025 ，不见不散！

单向数据流版简单 demo
layouts.vue AComponent.vue BComponent.vue

状态管理流版简单 demo
layouts.vue AComponent.vue BComponent.vue

WSL 版本：2.4.12.0
内核版本：5.15.167.4-1
网络模式：Mirrored

WSL2 安装的是 Ubuntu 22.04.5 LTS

目前遇到的问题是 开启系统代理（无论是 Fiddler Everywhere 或者 Clash Verge ）后，会出现一些请求特别特别慢的情况。

我是使用 Cursor +WSL2 开发的模式，启动一个 vue3 的项目，发现每次只要打开系统代理，刷新页面总会有几个请求需要加载几十秒甚至 1 分钟以上才能请求完成，而且 vue 的 hot reload 也完全没办法用，卡住的请求并不是固定的，但每次都会随机卡住几个。

目前怀疑的点，强制刷新页面后，在开发模式下，可能需要加载几十上百个文件，是不是大量文件加载导致的这个问题？

我应该如何排查和解决问题？求大佬指点。

我在 Ubuntu 20.04 和 Ubuntu 24.04 上，用 nodejs 18-23 都无法成功 build ，均报 typescript 语法错误。可见 https://github.com/am32-firmware/am32-configurator/issues/29

我并不想改他的源码，我觉得这肯定是环境问题。

有谁能帮忙解决环境问题，告诉我你的各种工具版本号，以及支付宝 / Paypal 账号，我发 88 元红包（不多，希望专业的 V 友能帮个忙）

旧的 page route 结构，经常 page 和 component 两个目录来回跳

- page - about.tsx - component # 纯组件 - componentA.tsx - componentB.tsx - container # 和业务耦合的组件 - componentC.tsx 

app route 文件结构类似这样，只在 about 页面使用的组件完全可以放在 about 下，如果出现多页面复用组件再升级到 component 或者 container 目录

- page - about - page.tsx - componentA.tsx - componentB.tsx - componentC.tsx 

这里显然没有正确解析出样式来，我试了很多方法都没能解决这个问题，各个 ai 问了个遍了，然后去网上找了好多方法，还是没搞定，下面是我这个页面的源码，有没有大佬帮我看看到底该怎么解决这个问题啊？小弟我感激不尽啊

<template> <div class="layout"> <div class="menu"> <RouterLink to="/" class="re-home">返回首页</RouterLink> <!-- Logo --> <div class="logo"> <img :src="logo" draggable="false" alt="logo" class="logo-img" /> <span class="logo-span">柑橘智能问答</span> </div> </div> <div class="chat"> <!-- 消息列表 --> <Bubble.List :items="messages" class="messages" style="flex: 1" :messageRender="renderMarkdown" :roles="{ ai: { placement: 'start', typing: { step: 5, interval: 20 }, styles: { content: { borderRadius: '16px' } } }, local: { placement: 'end', variant: 'shadow' } }" /> <!-- 输入框 --> <Sender :value="content" class="sender" @submit="onSubmit" @update:value="(val) => (cOntent= val)" /> </div> </div> </template> <script setup> import { ref, h } from 'vue' import { Conversations, Prompts, Sender, Bubble } from 'ant-design-x-vue' import { Edit, Delete } from '@element-plus/icons-vue' import reqAIChat from '@/api/chat/index' import { message } from 'ant-design-vue' import { ElMessage } from 'element-plus' import logo from '@/assets/images/logo.png' import { marked } from 'marked' import hljs from 'highlight.js' import 'highlight.js/styles/github.css' marked.setOptions({ highlight: (code) => hljs.highlightAuto(code).value, breaks: true, gfm: true }) marked.use({ renderer: { link(href, title, text) { return `<a href="${href}" target="_blank" rel="noopener">${text}</a>` } } }) const renderMarkdown = (content, item) => { if (item?.isMarkdown) { return h('Typography', { class: 'markdown-container' }, [ h('div', { innerHTML: marked.parse(content), // Vue 3 直接注入 HTML class: 'markdown-body' }) ]) } return content // 普通文本直接返回 } const cOntent= ref('') const messages = ref([ { key: '1', content: '## Markdown 测试\n[链接]( https://x.ant.design)1. **橙（ Orange ）**：包括甜橙和酸橙，甜橙中又分为脐橙、瓦伦西亚橙等。2. **柑橘（ Mandarin ）**：也称为蜜橘，包括各种小型、易剥皮的柑橘。3. **柚子（ Pomelo ）**：也称为文旦，是柑橘类中最大的一种。4. **柠檬（ Lemon ）**：以其酸味和香气闻名。5. **青柠（ Lime ）**：比柠檬小，酸味较轻。6. **葡萄柚（ Grapefruit ）**：大小和形状类似葡萄，味道可以是甜的也可以是酸的。', role: 'ai', variant: 'primary', isMarkdown: true } ]) const activeKey = ref('0') const cOnversationsItems= ref( Array.from({ length: 2 }).map((_, index) => ({ key: `item${index + 1}`, label: `未命名对话 ${index + 1}` })) ) const OnSubmit= async (nextContent) => { if (!nextContent) return messages.value.push({ key: `${messages.value.length + 1}`, content: nextContent, role: 'local', variant: 'shadow' }) content.value = '' try { const res = await reqAIChat({ message: nextContent }) if (!res) { ElMessage({ message: '请求失败', type: 'error' }) return } messages.value.push({ key: `${messages.value.length + 1}`, content: res, role: 'ai', variant: 'primary', isMarkdown: true }) } catch (error) { ElMessage({ message: '请求出错', type: 'error' }) } } const OnAddConversation= () => { conversationsItems.value.push({ key: `${conversationsItems.value.length + 1}`, label: `未命名对话${conversationsItems.value.length + 1}` }) activeKey.value = `${conversationsItems.value.length + 1}` } const menuCOnfig= (conversation) => { return { items: [ { label: '编辑', key: 'edit', icon: () => h(Edit) }, { label: '删除', key: 'delete', icon: () => h(Delete), danger: true } ], onClick: (menuInfo) => { message.info(`点击 ${conversation.key} - ${menuInfo.key}`) } } } </script> <style scoped> .markdown-body { padding: 12px 16px; line-height: 1.7; /* 必须继承字体 */ font-family: inherit; /* 代码块样式 */ pre { padding: 12px; border-radius: 8px; background: #f6f8fa !important; } code { font-family: 'SFMono-Regular', Consolas, monospace; } } .markdown-body { line-height: 1.6; color: #333; } .re-home { display: inline-block; padding: 10px 20px; margin: 12px; background: #ffa500; color: white; text-decoration: none; border-radius: 4px; font-size: 14px; font-weight: bold; text-align: center; transition: background-color 0.3s ease; } .layout { width: 100%; min-width: 1000px; height: 722px; display: flex; background: #fff; font-family: AlibabaPuHuiTi, sans-serif; } .menu { padding: 24px 0; /* background: #fff; */ width: 280px; height: 100%; display: flex; flex-direction: column; background: rgba(245, 245, 245, 0.5); } .logo { display: flex; height: 72px; align-items: center; justify-content: start; padding: 0 24px; } .logo-img { width: 24px; height: 24px; } .logo-span { margin: 0 8px; font-weight: bold; color: #333; font-size: 16px; } .add-btn { background: #1677ff0f; border: 1px solid #1677ff34; width: calc(100% - 24px); cursor: pointer; margin: 0 12px 24px 12px; font-size: 14px; height: 32px; padding: 4px 15px; border-radius: 6px; } .add-btn:hover { color: #69b1ff; } .chat { height: 100%; width: 100%; max-width: 700px; margin: 0 auto; box-sizing: border-box; display: flex; flex-direction: column; padding: 24px; gap: 16px; } </style> 

这里 content 里已经有一些写死的内容了，那是我用来测试的，就是想着如果可以解析了那么这些写死的内容是会被正确解析上去的，但是我看了好久都没搞懂该怎么解决这个问题，所以这个写死的内容也一直留着了

不吹不黑，如果说 tsx 的 typescript 支持跟 vue3 的 template 支持差距不大，也就不说了，tsc 检查 template 无法提示组件不存在的属性，官方 vscode 插件 vue official 2.2.8 版本 用起来更是让人蛋疼，组件自动识别飘忽不定，高亮也是飘忽不定，就连 script 部分提示也会出错。

也许你会说重启试试，无法自动导入，手动导入呀，template 支持不行，你也可以用 tsx 写呀

也有人说，我写代码就是一把梭，复制粘贴，什么 typescript ，直接 anyscript 和 unkonwscript 走起

我只能说对对对

最近 ai 告诉我 props 不是最佳实践，emit 是最佳实践，可我用 cursor 给我生成的代码清一色都是 props 模式，给我整不会了

其实我感觉用 Vue3 tsx 的话，什么 v-model 和 emit 这些都没必要了，和 react 一样 props 到底就好了

哪位大佬给我讲讲，这里面的原理

 <Hello :title="" :item="" /> 

这个 T 是根据第一个 Prop 参数推倒的？

根据顺序来的？还是怎样？当有多个 Prop 时，

是根据调用组件写的 Prop 顺序，还是定义 Prop 顺序，还是怎样？

完全懵逼中？

1. 第三方扩展自动引入
2. 属性自动识别 [看情况]
3. 不存在属性或方法无法提示错误，总之 typescript 不生效
4. 官方插件偶尔飘

console.log("Processing images...:", props.uploadedImage); // blob:http://localhost:5173/0c4ef255-bec5-4377-9596-45a5a4d5501e const image = await loadImage(props.uploadedImage); const smallImage: any = await resizeImage(image, 32, 32, "png"); // 调整为输出 png 格式 

const pagination = reactive({ page: 1, total: 9, page_size: 3 }) const showChart = computed(() => (i: number) => { let offset = (pagination.page-1)*pagination.page_size console.log(i, i > offset && i <= offset+pagination.page_size) return i > offset && i <= offset+pagination.page_size })

首次展示正确，点击分页按钮后不切换，这个怎么实现?