：ref 和 computed 本质上是在做同一件事吗？)
承接这两篇博客的分析【Vue代码分析】Vue响应式数据驱动视图(一)为什么直接赋值在 Vue 中会失效https://blog.csdn.net/weixin_52047874/article/details/162634506?sharetypeblogdetailsharerId162634506sharereferPCsharesourceweixin_52047874spm1011.2480.3001.8118【Vue代码分析】Vue响应式数据驱动视图(二)为什么一个布尔值也要用 refhttps://blog.csdn.net/weixin_52047874/article/details/162635089?sharetypeblogdetailsharerId162635089sharereferPCsharesourceweixin_52047874spm1011.2480.3001.8118在前两篇文章中我们分别讨论了两个经典场景为什么列表数据要用computed派生为什么加载状态要用ref定义这时候敏锐的开发者往往会把这两个问题放在一起思考“这俩东西看起来用法完全不同computed是自动算的ref是手动改的。它们背后的核心原因是一样的吗”这是一个直击 Vue 设计灵魂的问题。答案是宏观上是的微观上不是。它们就像一枚硬币的两面虽然为了解决不同的技术痛点而存在但归根结底都在服务于同一个终极目标。一、 宏观视角殊途同归的“破壁者”如果我们把镜头拉远站在架构的高度看ref和computed确实在做同一件事打破 JavaScript 静态逻辑与 Vue 动态视图之间的壁垒。在原生 JavaScript 中变量只是内存里的一个代号DOM 只是浏览器里的一个元素树。这两者本来是老死不相往来的。当你写let isLoading true时JS 变了但 DOM 不会变。当你写const list data.children时源头变了但list不会变。Vue 的响应式系统本质上就是一个“连接器”。ref的作用把一个原始值如 boolean变成一个可观察对象强行插入到 Vue 的管理系统中。computed的作用把一个计算逻辑变成一个可观察对象也强行插入到 Vue 的管理系统中。核心原因的一致性只要你的数据需要“驱动视图”你就不能使用普通的 JS 变量。你必须使用ref或computed把数据“注册”进 Vue 的响应式世界里。如果没有它们Vue 就成了一个瞎子看不见数据的流动也就无法更新页面。二、 微观视角解决相反的两个“痛点”虽然目标一致建立连接但它们解决的问题却刚好是相反的。1.ref解决的是“我变了怎么通知别人”在isLoading的场景中痛点在于通知的缺失。// 场景异步加载 isLoading.value true // 我变了但我怎么告诉 van-loading 组件普通的变量赋值是“静默”的。ref利用 ES6 的Proxy或者getter/setter劫持了.value的赋值操作。核心原理拦截修改。作用当你修改数据时ref会自动触发trigger函数大喊一声“数据变了”从而触发视图更新。一句话ref是为了解决【手动变更后的通知问题】。2.computed解决的是“源头变了我怎么知道”在subCategoryList的场景中痛点在于自动更新的缺失。// 场景二级列表 const subCategoryList computed(() categoryList[activeIndex].children) // activeIndex 变了subCategoryList 怎么知道要重新计算普通的变量赋值是“一次性”的。computed内部建立了一个精密的依赖收集系统。核心原理依赖追踪。作用它会记录自己依赖于谁activeIndex。一旦依赖项变了Vue 会反过来通知computed“你的源头变了快重新执行函数计算”计算出新值后再触发视图更新。一句话computed是为了解决【源头变更后的自动推导问题】。三、 深层联系computed其实就是“高级版”的ref如果你去翻看 Vue 的源码你会发现一个有趣的秘密computed返回的对象本质上也是一个ref。更准确地说computed是一个“只读的、带有自动更新功能的ref”。我们可以这样理解它们的关系普通ref值是谁是你手动塞进去的。什么时候变你调用.value xxx时才变。*类比一个存钱罐你自己往里扔钱扔完它就响了。*计算ref(computed)值是谁是函数运行出来的。什么时候变是依赖的数据变了Vue帮你往里扔新值然后它响了。类比一个带有传感器的显示屏传感器检测到温度依赖变了显示屏自动刷新数字。所以当你使用computed时Vue 实际上是在背后帮你创建了一个隐藏的ref并帮你写好了一个watchEffect来自动更新它。四、 总结响应式系统的“双保险”回到最初的问题“ref和computed核心原因一样吗”一样是因为它们都是 Vue 响应式系统的入口。没有它们数据流就是断的视图就不会动。不一样是因为它们守卫着数据流的不同阶段。ref守卫着写入端确保你的修改能被看见。computed守卫着读取/计算端确保数据的派生逻辑能被自动执行。在 Vue 开发中我们其实就是在不断地做两件事用ref定义状态State。用computed定义衍生Derived State。这就是数据驱动视图的完整闭环。
【Vue代码分析】Vue响应式数据驱动视图(三)：ref 和 computed 本质上是在做同一件事吗？
发布时间：2026/7/7 6:20:03
承接这两篇博客的分析【Vue代码分析】Vue响应式数据驱动视图(一)为什么直接赋值在 Vue 中会失效https://blog.csdn.net/weixin_52047874/article/details/162634506?sharetypeblogdetailsharerId162634506sharereferPCsharesourceweixin_52047874spm1011.2480.3001.8118【Vue代码分析】Vue响应式数据驱动视图(二)为什么一个布尔值也要用 refhttps://blog.csdn.net/weixin_52047874/article/details/162635089?sharetypeblogdetailsharerId162635089sharereferPCsharesourceweixin_52047874spm1011.2480.3001.8118在前两篇文章中我们分别讨论了两个经典场景为什么列表数据要用computed派生为什么加载状态要用ref定义这时候敏锐的开发者往往会把这两个问题放在一起思考“这俩东西看起来用法完全不同computed是自动算的ref是手动改的。它们背后的核心原因是一样的吗”这是一个直击 Vue 设计灵魂的问题。答案是宏观上是的微观上不是。它们就像一枚硬币的两面虽然为了解决不同的技术痛点而存在但归根结底都在服务于同一个终极目标。一、 宏观视角殊途同归的“破壁者”如果我们把镜头拉远站在架构的高度看ref和computed确实在做同一件事打破 JavaScript 静态逻辑与 Vue 动态视图之间的壁垒。在原生 JavaScript 中变量只是内存里的一个代号DOM 只是浏览器里的一个元素树。这两者本来是老死不相往来的。当你写let isLoading true时JS 变了但 DOM 不会变。当你写const list data.children时源头变了但list不会变。Vue 的响应式系统本质上就是一个“连接器”。ref的作用把一个原始值如 boolean变成一个可观察对象强行插入到 Vue 的管理系统中。computed的作用把一个计算逻辑变成一个可观察对象也强行插入到 Vue 的管理系统中。核心原因的一致性只要你的数据需要“驱动视图”你就不能使用普通的 JS 变量。你必须使用ref或computed把数据“注册”进 Vue 的响应式世界里。如果没有它们Vue 就成了一个瞎子看不见数据的流动也就无法更新页面。二、 微观视角解决相反的两个“痛点”虽然目标一致建立连接但它们解决的问题却刚好是相反的。1.ref解决的是“我变了怎么通知别人”在isLoading的场景中痛点在于通知的缺失。// 场景异步加载 isLoading.value true // 我变了但我怎么告诉 van-loading 组件普通的变量赋值是“静默”的。ref利用 ES6 的Proxy或者getter/setter劫持了.value的赋值操作。核心原理拦截修改。作用当你修改数据时ref会自动触发trigger函数大喊一声“数据变了”从而触发视图更新。一句话ref是为了解决【手动变更后的通知问题】。2.computed解决的是“源头变了我怎么知道”在subCategoryList的场景中痛点在于自动更新的缺失。// 场景二级列表 const subCategoryList computed(() categoryList[activeIndex].children) // activeIndex 变了subCategoryList 怎么知道要重新计算普通的变量赋值是“一次性”的。computed内部建立了一个精密的依赖收集系统。核心原理依赖追踪。作用它会记录自己依赖于谁activeIndex。一旦依赖项变了Vue 会反过来通知computed“你的源头变了快重新执行函数计算”计算出新值后再触发视图更新。一句话computed是为了解决【源头变更后的自动推导问题】。三、 深层联系computed其实就是“高级版”的ref如果你去翻看 Vue 的源码你会发现一个有趣的秘密computed返回的对象本质上也是一个ref。更准确地说computed是一个“只读的、带有自动更新功能的ref”。我们可以这样理解它们的关系普通ref值是谁是你手动塞进去的。什么时候变你调用.value xxx时才变。*类比一个存钱罐你自己往里扔钱扔完它就响了。*计算ref(computed)值是谁是函数运行出来的。什么时候变是依赖的数据变了Vue帮你往里扔新值然后它响了。类比一个带有传感器的显示屏传感器检测到温度依赖变了显示屏自动刷新数字。所以当你使用computed时Vue 实际上是在背后帮你创建了一个隐藏的ref并帮你写好了一个watchEffect来自动更新它。四、 总结响应式系统的“双保险”回到最初的问题“ref和computed核心原因一样吗”一样是因为它们都是 Vue 响应式系统的入口。没有它们数据流就是断的视图就不会动。不一样是因为它们守卫着数据流的不同阶段。ref守卫着写入端确保你的修改能被看见。computed守卫着读取/计算端确保数据的派生逻辑能被自动执行。在 Vue 开发中我们其实就是在不断地做两件事用ref定义状态State。用computed定义衍生Derived State。这就是数据驱动视图的完整闭环。
 获取与实战)
