数组的元素是基本数据类型

需要导入

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对象

访问页面，显示如下：

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对象

访问页面，显示如下：

hobby 是 RefImpl对象，其 value 是 Proxy 对象

插值表达式

插值表达式就写 {{item.key1}} 即可
不能写 {{item.value.key1}}，否则不显示数据

修改值不能再次定义 ref()

修改值时，不能再次定义 ref()，如下，页面不会更新数据：

function modify() {
    // hobby.value[0].name = '下棋'
    hobby = [{
        id:'1',
        name:'下棋',
    }]
}

原文出处：/show_1GW1GvBWyFoi.html