元素
元素
工具
博客
问答

Vue中用ref定义的变量为啥在模板里没更新？

♫艳兵 阅读 9
框架

我在setup里用const count = ref(0)定义了一个响应式变量，然后在模板里直接用了{{ count }}，但点击按钮修改count.value后页面没变化，这是为啥？

代码大概是这样的：

import { ref } from 'vue'

export default {
  setup() {
    const count = ref(0)
    const increment = () => {
      count.value++
    }
    return { count, increment }
  }
}

模板里就是<button @click="increment">{{ count }}</button>，控制台打印count.value是对的，但视图就是不刷新……是不是哪里漏了？

Ref响应式
我来解答 赞 1 收藏
二维码
手机扫码查看
反馈
2 条解答
闲人瑞娜
闲人瑞娜 Lv1
兄弟，你这代码本身没问题，我本地跑了一下是正常更新的。

你说控制台打印 count.value 是对的，但视图不更新，我猜有几种可能：

第一种，检查一下你的模板是不是真的绑定到这个组件上了。有时候复制粘贴多了，template 写在别的地方，或者组件没正确注册，数据根本没关联上。

第二种，看看有没有其他地方对 count 做了什么奇怪的操作，比如解构赋值。如果你写了类似 let { value } = count 这种，那响应式就丢了。

第三种，也是最常见的情况——你实际代码里模板写的是 {{ count.value }} 而不是 {{ count }}。在模板里 ref 会自动解包，直接写 {{ count }} 就行，多写了 .value 反而拿到的是原始值。

你可以试试在模板里加个调试输出：
<div>{{ JSON.stringify(count) }}</div>


看看输出的是 {"value":1} 这种对象还是单纯的数字。

如果上面都不是，把完整的组件代码贴出来看看，包括 template 那块，问题八成出在别的地方。
点赞 2
2026-03-02 08:04
上官博硕
上官博硕 Lv1
这个问题我之前也踩过坑，你这段代码本身逻辑是对的，但视图不更新通常有几种常见情况，我帮你排查一下。

第一种可能是你模板里写的是 {{ count }} 还是 {{ count.value }}。在模板里ref会自动解包，直接写 {{ count }} 就行，如果你手滑写成了 {{ count.value }} 反而会出问题。不过看你描述应该是写对了。

第二种情况比较隐蔽，检查一下你的 Vue 版本。如果你用的是 Vue 2.7 的 composition API，ref 的行为和 Vue 3 略有差异，需要确保项目依赖是对的。在 package.json 里确认下 vue 的版本号。

第三种最常见，你的组件是不是用了
相关推荐
元素
元素
工具
博客
问答
登录/注册