Skip to content

fix(omi-vueify): 避免复杂属性被深度代理 - #999

Open
RSS1102 wants to merge 1 commit into
Tencent:masterfrom
RSS1102:rss1102/fix-vueify-raw-props
Open

fix(omi-vueify): 避免复杂属性被深度代理#999
RSS1102 wants to merge 1 commit into
Tencent:masterfrom
RSS1102:rss1102/fix-vueify-raw-props

Conversation

@RSS1102

@RSS1102 RSS1102 commented Aug 6, 2026

Copy link
Copy Markdown

背景

omi-vueify 当前使用深层 ref 保存格式化后的 attrs。Vue 会继续深度代理这个结果对象,导致原本准备传给 Web Component 的普通复杂属性再次变成 Proxy;下游冻结数组后读取元素时,可能触发 ECMAScript Proxy invariant,因此业务侧此前需要额外使用 markRaw 规避。

说明:TDesignOteam/tdesign-web-components#381 讨论的是 TDesign Web Components 在旧版 Chrome/内嵌浏览器中的兼容诉求,并非由本问题直接引起;这里用于说明下游 Web Component 的实际兼容场景。

修复

将 attrs 汇总容器由 ref 改为 shallowRef

  • 只追踪格式化结果对象的整体替换;
  • 不再深度代理传给 Web Component 的复杂属性;
  • 保留现有 deep watch,因此 Vue 响应式对象的嵌套更新仍会生成并传递新的结果对象。

markRaw 兼容性

现有使用 markRaw 的代码仍然兼容,不需要迁移;本次修复只是让普通复杂对象也不会被汇总容器二次代理,因此业务侧不再必须使用 markRaw

测试

  • 增加普通复杂对象不被转换为 Proxy,并可在数组冻结后正常读取的回归测试;
  • 增加响应式对象嵌套更新仍能传递,同时输出值保持非 Proxy 的回归测试;
  • complex data types 针对性测试通过;
  • npm run build 通过。

完整测试套件当前存在一个与本次改动无关的既有单词事件断言失败,本 PR 为保持范围最小未修改该行为或测试。

attrs 汇总容器改用 shallowRef,只追踪结果对象替换,避免传给 Web Component 的复杂属性被再次转换为 Vue Proxy。

增加 Proxy invariant 与响应式嵌套更新回归测试。

Vue 3.5.41 复现:https://stackblitz.com/edit/hxxsvh94?file=README.md
@tencent-adm

Copy link
Copy Markdown
Member

CLA assistant check
Thank you for your submission, we really appreciate it. Like many open source projects, we ask that you sign our Contributor License Agreement before we can accept your contribution.
You have signed the CLA already but the status is still pending? Let us recheck it.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants