Firefly Pixiv - KiraraShss
欢迎来到我的博客！这是一则示例公告。
544 字
3 分钟
Vue 依赖收集与重新渲染机制
欢迎来到我的博客！
使用 Markdown 格式编写。
今天学到了什么
问题：当点击按钮，触发changeCar这个函数的时候，vue模板中的数据不会重新更新
Vue 依赖收集与重新渲染机制
核心问题分析
重新渲染的触发条件 。
依赖收集的完整流程
-
初始渲染 ：
- Vue 解析模板，找到 person 变量
- 访问 person.name 属性，建立依赖关系
- 渲染到页面
-
变量重新赋值 ：
- 执行 person = reactive({name: ‘新名字’})
- 此时， person 变量指向了新的响应式对象
- 但这个操作 不会触发 Vue 的响应式更新 ，因为1：
- 普通变量的重新赋值不是响应式操作
- Vue 只监听响应式对象的属性变化
-
重新渲染的触发 ：
- 只有当 响应式数据发生变化 时，Vue 才会触发重新渲染
- 例如：修改 person.name 、修改 ref 变量的值等
- 如果没有这些触发条件，即使 person 变量已经指向新对象，Vue 也不会重新渲染
-
重新渲染时的依赖收集 ：
- 当其他响应式数据变化导致重新渲染时
- Vue 会重新执行模板解析
- 此时会从当前作用域中找到 person 变量（指向新对象）
- 访问 person.name 属性，建立新的依赖关系
- 渲染新的数据
测试案例
<script setup>import { ref, onMounted, reactive } from 'vue'let person = reactive({ name: '张三', age: 18, place: '北京'})const relative = reactive({ father: '李四', mother: '王五'})function changePerson() { person = { name: 'MIek', age: 20, place: '上海' }}function changeFather() { relative.father = 'Ross'}
</script>
<template> <div class="app"> <h1>{{ person.name }}</h1> <p>年龄：{{ person.age }}</p> <p>籍贯：{{ person.place }}</p> <p>父亲：{{ relative.father }}</p> <p>母亲：{{ relative.mother }}</p> <button @click="changePerson">改变person</button> <button @click="changeFather">改变父亲</button> <p>改变后：{{ person.name }}</p> <p>改变后：{{ person.age }}</p> <p>改变后：{{ person.place }}</p> </div></template>先点击“改变person”这个按钮，再点击“改变父亲”这个按钮，就可以触发更新了
Footnotes
-
reactive() 只对 对象本身 的属性变化进行响应式处理，而不会对 变量本身的重新赋值 进行监听 ↩
赞助支持
如果这篇文章对你有帮助，欢迎赞助支持！
最后更新于 2026-04-26，距今已过 128 天
部分内容可能已过时