vue3.x 响应式数据-ref()方式-数组类型 作者：马育民 • 2025-06-08 10:02 • 阅读：10012 # 数组的元素是基本数据类型 ### 需要导入 ``` import {ref} from 'vue' ``` ### 定义语法 如果某个对象 **需要 定义为响应式**，就用下面写法 ``` let xxx = ref([值1,值2,值3]) ``` **返回值：**`RefImpl`的实例对象，简称`ref对象`，`ref`对象的 `value`**属性是响应式的** ### 插值表达式 使用 `v-for`，插值表达式为：`{{item}}` ### 修改值 通过 `ref` 对象的 `value[索引]` 改变 ``` xxx.value[索引] = '新值' ``` ### 例子 ``` <template> 爱好： <ul> <li v-for="item in hobby" :key='item'>{{item}}</li> </ul> <button @click="modify">修改第一个爱好为下棋</button> </template> <script lang="ts" setup name='Student'> import { ref } from 'vue' let hobby = ref(['王者荣耀','吃鸡','抖音']) console.log("hobby:", hobby) function modify(){ hobby.value[0] = '下棋' } </script> <style> </style> ``` ### ref对象 访问页面，显示如下： [](https://www.malaoshi.top/upload/0/0/1GW1Gw4f6yxc.png) `hobby` 是 `RefImpl`对象，其 `value` 是 `Proxy` 对象 ### 插值表达式 插值表达式就写 `{{item}}` 即可 不能写 `{{item.value}}`，否则不显示数据 ### 修改值不能再次定义 ref() 修改值时，不能再次定义 `ref()`，如下，页面不会更新数据： ``` function modify() { hobby = ref(['吃饭', '睡觉', '打豆豆']) } ``` # 数组的元素是对象类型 ### 需要导入 ``` import {ref} from 'vue' ``` ### 定义语法 如果某个对象 **需要 定义为响应式**，就用下面写法 ``` let xxx = ref([ { key1:value1, key2:value2, }, { key3:value3, key4:value4, } ]) ``` **返回值：**`RefImpl`的实例对象，简称`ref对象`，`ref`对象的 `value`**属性是响应式的** ### 插值表达式 使用 `v-for`，插值表达式为：`{{item.key1}}` ### 修改值 通过 `ref` 对象的 `value[索引].key` 改变 ``` xxx.value[索引].key1 = '新值' ``` ### 例子 ``` <template> 爱好： <ul> <li v-for="item in hobby" :key='item.id'>{{item.name}}</li> </ul> <button @click="modify">修改第一个爱好为下棋</button> </template> <script lang="ts" setup name='Student'> import { ref } from 'vue' let hobby = ref([ { id:'1', name:'王者荣耀', }, { id:'2', name:'吃鸡', }, { id:'3', name:'抖音', }]) console.log("hobby:", hobby) function modify() { hobby.value[0].name = '下棋' } </script> <style> </style> ``` ### ref对象 访问页面，显示如下： [](https://www.malaoshi.top/upload/0/0/1GW1Gw6f3Hml.png) `hobby` 是 `RefImpl`对象，其 `value` 是 `Proxy` 对象 ### 插值表达式 插值表达式就写 `{{item.key1}}` 即可 不能写 `{{item.value.key1}}`，否则不显示数据 ### 修改值不能再次定义 ref() 修改值时，不能再次定义 `ref()`，如下，页面不会更新数据： ``` function modify() { // hobby.value[0].name = '下棋' hobby = [{ id:'1', name:'下棋', }] } ``` 原文出处：https://malaoshi.top/show_1GW1GvBWyFoi.html