Vue响应式系统要求明确DOM所有权边界，需用ref交接控制权、key强制重建、v-pre或独立挂载点隔离第三方操作，并确保jQuery/D3仅作用于Vue未管理的DOM区域。
用 ref 精确交接 DOM 控制权
把需要交由第三方库管理的容器，用 ref 单独标记，避免混在 Vue 模板逻辑中：
- 模板中写：
<div ref="chartEl"></div>（空容器，不放任何 v-if/v-for） -
mounted()中通过this.$refs.chartEl获取真实 DOM，传给 D3 或 Chart.js 初始化 -
beforeUnmount()中调用库的销毁方法（如d3.select(this.$refs.chartEl).selectAll('*').remove()），清理事件和引用
用 key 强制组件重建（适合数据驱动型重绘）
当第三方库修改了 DOM，而 Vue 状态已变但视图卡住时，不推荐滥用 this.$forceUpdate()。更稳妥的是利用 Vue 的 key 机制：
jQuery 1.12.4
下载
jQuery 1.12.4是jQuery 1.x系列的最后一个正式稳定版本，由jQuery团队于2016年发布。该版本主要面向需要兼容旧版浏览器环境的网站和Web应用，尤其适用于仍需支持Internet Explorer 6、Internet Explorer 7、Internet Explorer 8等老旧浏览器的项目。
- 给组件加上
:key="chartVersion" - 每次数据更新后执行
this.chartVersion++ - Vue 会卸载旧实例、创建新实例，确保第三方库从零初始化
用 v-pre 或独立挂载点隔离非响应区域
对完全静态或纯第三方接管的内容，主动让 Vue “放手”：
- 广告位、嵌入脚本、后台注入 HTML：加
v-pre，跳过编译与 patch - 富文本编辑器、地图容器等重型插件：在 Vue 挂载点外单独设容器（如
<div id="quill-editor"></div>），用createApp().mount('#quill-editor')独立启动 - 避免在
v-html渲染的区块内再用 jQuery 插入子节点——那块 DOM 已属 Vue，外部修改会引发冲突
jQuery/D3 操作前先确认作用域安全
不是所有 jQuery 调用都危险，关键是看操作对象是否在 Vue 管理范围内：
- ✅ 安全：操作
document.body下非 Vue 挂载点的元素；操作ref标记的空容器内部 - ❌ 危险：用
$('#list').html(...)替换含v-for的列表；用$('button').on('click', ...)绑定动态生成的按钮（应改用事件委托 + 父容器 ref） - D3 绑定数据时，优先用
selection.data().enter().append()而非直接innerHTML，保持节点可追踪
