面试官:为什么在 Vue3 中 ref 变量要用 .value?

作者:程序员成长指北

原文:mp.weixin.qq.com/s/dtzw89yIj...

这个"多余"的 .value 究竟是设计缺陷,还是深思熟虑?一次讲透 Vue3 响应式的底层原理。

一场关于 Vue3 的面试

最近给一个朋友做了一场前端开发工程师模拟面试,我们姑且叫他 小B 吧。小B 有三年左右的的 Vue3 开发经验。

面试过程中,我(为了方便描述对话,以下简称 老A)问了这样一个问题:

老A :你知道为什么 Vue3 使用 Ref 创建的响应式变量,需要通过 .value 来访问和修改吗?

他愣了一下,脑袋快速思考,好像没有检索到更好的答案

小B: 这个......就是 Vue3 的语法吧,我平时都是这么用的。

我点点头

老A:这是个非常好的开始,既然你用过,我们不妨一起把这个问题拆开,一步步搞清楚它背后的原理。

从 Vue3 响应式系统说起

我问继续问道:

老A :你知道 Vue3 为什么要从 Vue2 的 Object.defineProperty 切换到 Proxy 吗?

小B: 因为 Proxy 可以监听到更多类型的变化,比如新增属性、数组索引等等。

我点头:

老A : 没错,而且 Proxy 是直接对对象做代理,那你觉得 Vue3 能不能用 Proxy 来代理一个数字、字符串、布尔值这样的基本类型?"

他想了想

小B: Proxy 只能代理对象吧?

老A :对了。所以 Vue3 面临一个问题:基本类型(primitive)没法直接变成响应式。

ref 的设计动机

我继续输出:

老A :这时候 ref 这个 API 就诞生了。你可以理解为,ref(0) 实际上返回了一个带有.value的对象,真实的值存储在这个 .value 里。

我简单在草纸上写了三行代码:

ini 复制代码
const count = ref(0);
console.log(count.value); // 读取
count.value = 1;          // 修改

他点了点头:"对,这个我用过。"

老A : 而 Vue3 的响应式追踪,依赖收集,和视图更新,全部基于对这个 .valuegettersetter 进行拦截实现。

我停顿了一下,看着小B

老A : 所以为什么需要 .value 呢?

他笑了:

小B:因为值必须藏在对象里,Proxy 才能监听!

我竖起大拇指:"完全正确!"

reactive 和 ref 的区别

为了让他理解得更透彻,我又问了个问题:

老A : 那 reactiveref 有什么区别?"

小B : reactive 是用来处理对象的,直接可以改属性;ref 是处理基本类型的,要用 .value

我想他这次真的理解了,我补充说:

老A : 对。 因为 reactive 返回的就是 Proxy 过的对象,不需要额外 .value。但是基本类型不行,必须包装成对象------这就是 ref

然后我给他看了两段代码对比:

ini 复制代码
const state = reactive({ count: 0 });
state.count++;

const num = ref(0);
num.value++;

这两套写法,Vue3 都是通过 Proxy 实现响应式,但基本类型必须额外包一层。

为什么不直接统一语法?

小B老A 讲这么详细,也放开了, 追问:

小B : 那为啥 Vue3 不统一一下呢?比如都能直接用变量名,不用 .value。"

老A :这个问题问得好。Vue 团队也想过,甚至 Vue3.3 已经引入了 ref sugar,可以用 ref: 语法省略 .value,但这种语法是可选的,不是强制的。 最根本的原因在于:

  1. 明确语义,有利于代码提示和类型推导。
  2. 不同的响应式对象有不同的行为, .value 是一种安全的区分。
  3. 保持性能和一致性。

继续补充:

老A : 其实很多 Vue 高手一开始也觉得 .value 繁琐,但当你理解了它的设计哲学,就会觉得这是个合理的权衡。

他点点头:"原来如此。"

总结与延伸

所以我们回到最初的问题,Vue3 为什么 ref 变量需要 .value

  1. Proxy 无法直接代理基本类型,必须包装成对象。
  2. Vue3 需要通过.value 才能做依赖追踪和视图更新。
  3. .value提供了明确语义,便于类型提示和维护。

未来如果用 <script setup>ref sugar,可以省略 .value,但你要清楚省略的背后依然有这个机制在支撑。

技术的提升往往就藏在对"为什么"的好奇心里。

相关推荐
你的人类朋友31 分钟前
🤔什么时候用BFF架构?
前端·javascript·后端
知识分享小能手1 小时前
Bootstrap 5学习教程,从入门到精通,Bootstrap 5 表单验证语法知识点及案例代码(34)
前端·javascript·学习·typescript·bootstrap·html·css3
一只小灿灿1 小时前
前端计算机视觉:使用 OpenCV.js 在浏览器中实现图像处理
前端·opencv·计算机视觉
前端小趴菜051 小时前
react状态管理库 - zustand
前端·react.js·前端框架
Jerry Lau2 小时前
go go go 出发咯 - go web开发入门系列(二) Gin 框架实战指南
前端·golang·gin
我命由我123452 小时前
前端开发问题:SyntaxError: “undefined“ is not valid JSON
开发语言·前端·javascript·vue.js·json·ecmascript·js
0wioiw02 小时前
Flutter基础(前端教程③-跳转)
前端·flutter
Jokerator2 小时前
深入解析JavaScript获取元素宽度的多种方式
javascript·css
落笔画忧愁e2 小时前
扣子Coze纯前端部署多Agents
前端