Vue响应式更新本质是数据变更→依赖通知→组件重渲染→虚拟DOM比对→局部DOM更新：通过setter捕获变更、getter收集依赖，nextTick批量处理，虚拟DOM精准更新。
Vue 响应式数据触发模板重绘，本质不是“直接重绘”，而是通过一套自动联动机制完成视图更新：数据变 → 依赖通知 → 组件重新渲染 → 虚拟 DOM 差异比对 → 局部 DOM 更新。整个过程由响应式系统和虚拟 DOM 协同驱动，无需手动干预。
响应式数据变更会自动通知依赖
当你修改 ref 或 reactive 定义的数据时（比如 count.value++ 或 state.name = 'new'），Vue 的响应式系统会在 setter 中捕获这次变更。此时它不会立刻更新 DOM，而是标记所有依赖该数据的 Watcher（例如模板中用了 {{ count }} 的组件）为“待更新”。
这个依赖关系在组件首次渲染时就已建立：模板里访问的每个响应式字段，都会在 getter 中被自动收集为依赖。
- 修改
ref时需通过.value赋值（如msg.value = 'hello'），否则不触发响应 -
reactive对象的属性可直接赋值（如user.age = 25），但新增属性默认不响应（需用Vue.set或reactive({...obj, newKey: val})） - 数组索引直接赋值（如
list[0] = newItem）或修改.length不触发更新，推荐用splice、push等变异方法
组件重新渲染发生在 nextTick 队列中
Vue 把所有待更新的 Watcher 收集完后，并不会同步执行 render，而是把更新任务推入 nextTick 微任务队列，等当前同步代码执行完、DOM 处于空闲时再批量执行。这样能避免重复渲染，提升性能。
- 模板中每次使用响应式变量（如
v-if="loading"、:class="{ active: isActive }"），都会形成一个依赖 - 计算属性（
computed）和侦听器（watch）也属于响应式依赖链的一环，它们的变化同样会触发关联组件更新 - 如果多个响应式字段在同一事件循环中连续修改，Vue 会合并为一次 re-render，而不是逐次刷新
虚拟 DOM 决定怎么更新，而非是否更新
组件 render 函数执行后生成新的 VNode 树，Vue 将其与旧 VNode 进行 patch 比对，只更新真实 DOM 中发生变化的部分（比如仅替换文本节点、切换 class、增删元素），而不是整页重绘。
Ainative Vue Sdk
下载
使用 `@ainative/vue-sdk` 为 Vue 3 应用添加 AI 聊天功能。适用于以下场景：(1) 安装 `@ainative/vue-sdk`，(2) 在 Vue 组件中使用 `useChat` 组合式函数，(3) 提供……
- 直接修改原始对象（如
JSON.parse(JSON.stringify(obj))后赋值）能触发更新，但不推荐——破坏响应式引用关系 - 使用
Object.assign({}, oldObj, updates)或展开运算符{...oldObj, ...updates}创建新对象，更利于依赖追踪 - 若数据深层嵌套且变化频繁，建议用
shallowRef+ 手动triggerRef控制更新粒度，避免过度响应
不复杂但容易忽略
立即学习“前端免费学习笔记（深入）”；
