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