一、导言

在所有 Vue 应用的性能问题里"不必要的子组件渲染"几乎是最常见、也最容易被忽视的一类。它不会在控制台抛错，不会让功能坏掉，却会悄无声息地吃掉 CPU、拖长交互响应时间、增加 GC 压力。最终表现为：列表滚动卡顿、输入延迟、低端机型电耗飙升。

为什么它如此关键？因为 Vue 的更新粒度是"组件级"——只要某个组件被判定需要重新渲染。它的整个虚拟 DOM 子树都会进入 diff 流程，而不管子组件接收的 props 是否真的发生了变化。这代表着，一个父组件的局部状态变化。可能引发整棵子树的"无意义 patch"。

不必要渲染的代价具体包括：

二、Vue 渲染机制基础回顾

响应式程序

Vue 的响应式是"渲染调整"能成立的基础。

• Vue 1/2：基于 Object.defineProperty 对对象属性做 getter/setter 劫持。缺点是无法监听属性的新增/删除。
• Vue 3：基于 Proxy 代理整个对象。可以监听属性新增/删除、数组下标、Map/Set,等等。性能上初始化代理更轻量，且支持"惰性响应式"。

虚拟 DOM 与 diff 算法

Vue 将 vnode 映射到真实 DOM。diff 采用**同层比较 + 双端队列或最长递增子序列**策略，复杂度近似 O。关键点这方面，differ 是按组件为单位触发的。

组件更新流程

一次状态变更到 DOM 更新的完整链路：

1. 数据被修改，触发 setter 或 proxy handler；
2. 依赖收集阶段建立 watcher/effect 被调度入队；
3. 在 nextTick 中，队列按 id 排序后依次执行；
4. 组件 render 函数重新执行生成新 vnode；
5. patch 新旧 vnode，递归处理子组件；
6. 子组件决定是否跳过更新；
7. 真正发生变化的 DOM 节点被提交到浏览器。

"siteTitle" 是稳定字符串。但如果 Banner 内部使用插槽或父包装器导致浅比较失效，就会被 patch。

"{ me:'dark'... }"" 每次都是新的引用导致浅比较失败，被判定需要更新。

selected=item">

• - 箭头函数每次父 render 都创建新的函数引用，所以即使 items 未变也会导致重绘。话说回来，
• - 用顶层函数或 methods 提前定义回调。
.

tag='template' v-for=' in items' :key='index'>
tag='Row'> :data='item'/>

当列表头部插入一个元素时 index 后移，引起 key 重复导致复用错误。使原本仅添加一行变成整列表重新 patch.

tag='Chart' :option='chartOption'/>
const chartOption = shallowReactive({
xAxis的观点是，{data:}
})
chartOption.xAxis.data.push // 未触发响应式
// 若要更新，需要替换整个 chartOption 引用。


tag='Dialog'>
tag='div heavy'>…大段静态内容，按理说，
默认插槽内容会随父 render 重建。即使 Dialog 本身 Props 没变，也会因为 slots 引用不同而
patch 插槽内容。
import { useUserStore } from './stores/user'
const userStore = useUserStore
// 任意字段改变都会导致此 component 重绘
const greeting = `Hello。${userStore.profile.name}`




A. 避免不必要重渲 


稳 定 Prop 引用 

 


提取 Inline 对象/数组至 常量 或 computed,防止每一次 render 创建新的引用，从而保证 shallow 比较成功。

至于例如，


const config = {me:"dark"。showAvatar:true}


const dynamicConfig = computed=>)
 

const cardTags= // 静态常量可直接放模块顶层
 

在模板中仅使用 cardConfig/cardTags 即可。”
<\/LI>









稳 定 事件 回调  



**不要** 在模板内写 arrow function 如 @click="=>doX". 每一次 re-render 会产生新函数引用。至于**改为**，


const handleClick ==>{ doX }
”
<\/LI>







computed 缓存派生状态  ​​​​​​​​​​​​​​​​​​​​​ ​




computed 是 Vue 的主要缓存机制。只在其依赖的数据真正改变时才 recompute。






v‑once &        ⬇️ ⎯⎯⎯⎯⎯⎯ ⬇️




v‑once 指令把目标节点及其后代只首次生成，接下来永远不会
patch。





插槽 调整 🏁🛡️ ️🩟🕒🛞📌⚕️🤝💜☝️🚀🔍🪀✨🤞🏴‍☠️💾💘💤🎚️🙅‍♂‍✈️🥥🍔🍉🥕🌱🌊⚔️🔥❗🍋🚐🎈🏨❏󱔚󰡦󰡧󰬢󱖾󱛇〜⒚⒘〨✹㆏𐍊𐤊𐤊ᑌ䙤㇒㉓㉟♭♪∂⇑∈∉∅∅⅞ℼℝKℙℬ⚓⚔❈✬✪➜✝➕➖➗↔↕〹⅝⌚⌛⌨⌥⌦⌫⏳◀▶❖ⓁⓂⓃⓄⓅⓆⓇⓈⓉ⑴⑵⑶⑷⑸⑹①②③④⑤⑥⑦⑧】"。"type":"text/plain","style":"color:black;font-weight:bold"}