数组的元素是基本数据类型
导入
`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响应对象
访问页面，显示如下：
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 响应对象
访问页面，显示如下：
hobby 是 Proxy 响应对象
修改值不能再次定义 reactive()
修改值时，不能再次定义 reactive()，如下，页面不会更新数据：
function modify() {
// hobby[0].name = '下棋'
hobby = reactive([
{
id:'4',
name:'吃饭',
},
{
id:'5',
name:'睡觉',
},
{
id:'6',
name:'打豆豆',
}])
}