vue3.x 响应式数据-ref()方式-基本数据类型 作者：马育民 • 2025-06-08 09:09 • 阅读：10014 # 用法 ### 需要导入 ``` import {ref} from 'vue' ``` ### 定义语法 如果某个变量 **需要 定义为响应式**，就用下面写法 ``` let xxx = ref(值) ``` **返回值：**`RefImpl`的 **响应对象**，简称`ref对象`，`ref`对象的 `value`**属性是响应式的** ### 插值表达式 还是像之前的写法，没变化 ``` {{xxx}} ``` ### 修改值 通过 `ref` 对象的 `value` 改变 ``` xxx.value = '新值' ``` # 例子 ``` <template> 姓名：{{name}}<br> 年龄：{{age}}<br> 性别：{{sex}}<br> 身高：{{height}}<br> <button @click="addAge">年龄加1</button> <button @click="addHeight">身高加0.01</button> </template> <script lang="ts" setup name='Student'> import {ref} from 'vue' let name = '李雷' let sex = '男' let age = ref(20) let height = ref(1.82) console.log("age:",age) function addAge(){ age.value++ } function addHeight(){ height.value += 0.01 } </script> <style> </style> ``` ### ref响应对象 访问页面，显示如下： [](https://www.malaoshi.top/upload/0/0/1GW1GuINrtD4.png) `age` 原本是基本数据类型，显示是 `RefImpl` 响应对象，能够看到有 `value` 属性，值是 `20` （其实还有其他属性，可忽略） ### 插值表达式 插值表达式就写 `{{age}}` 即可 不能写 `{{age.value}}`，否则不显示数据 ### 修改值不能再次定义 ref() 修改值时，不能再次定义 `ref()`，如下，页面不会更新数据： ``` function addHeight(){ height = ref(1.9) } ``` 原文出处：http://malaoshi.top/show_1GW1GuDiWcWo.html