前言

最近学习cloud项目，前端使用到 vue3 + ts 等技术，在写需求过程中遇到响应式数据问题，经百度查找相关笔记，在此记录一下，在实战中成长吧。

问题

出现的问题：定义一个默认数组并且 for 循环展示，后端返回数据并且赋值到数组中，但是展示的值并不会修改

<template><el-card class="layout-home"><div style="display: flex; margin-top: 20px; height: 100px;"><div v-for="(item,index) in array" :key="index" :index="item.name" ><transition name="el-fade-in-linear"><div class="transition-box"><h3>{{item.name}}</h3><p>{{item.num}}</p></div></transition></div></div></el-card>
</template>
<script lang="ts" setup>
import {initialization} from '@/api/sys/home'
let array = [{name: '卡密登录次数',num: 0},{name: '卡密使用个数',num: 0},{name: '短连接生成次数',num: 0},{name: '系统登录次数',num: 0}
]
initialization().then(res => {if (res != null && res.data) {const obj = res.dataarray[0].num = obj.secretKeyLoginNumarray[1].num = obj.secretKeyNumarray[2].num = obj.shortLinkNumarray[3].num = obj.sysLoginNumconsole.log('1111',array);}
})
</script>

原因

原因：在 js 中定义的 array 数组只是普通常量，并不是 响应式数组，它不会自动更新视图。

解决方案

方案：使用 vue3 提供的 reactive 和 ref 方法，来定义响应式数据。

import { reactive, ref } from 'vue'

<script lang="ts" setup>
import { reactive, ref } from 'vue'
import {initialization} from '@/api/sys/home'
const array = reactive([{name: '卡密登录次数',num: 0},{name: '卡密使用个数',num: 0},{name: '短连接生成次数',num: 0},{name: '系统登录次数',num: 0}
])
initialization().then(res => {if (res != null && res.data) {const obj = res.dataarray[0].num = obj.secretKeyLoginNumarray[1].num = obj.secretKeyNumarray[2].num = obj.shortLinkNumarray[3].num = obj.sysLoginNumconsole.log('1111',array);}
})
</script>

ref

• ref允许创建一个任意类型的响应式的ref对象，在使用时需要带上 .value
• 在模板中使用 ref 对象时，若 ref 位于顶层，不需要使用value，它会自动解包，但 ref 对象是作为一个属性声明于对象之中，在模板中进行运算时依然要使用 .value

reactive

• 通常使用 reactive() 来创建一个响应式的对象或数组，这样的对象或数组状态都是默认深层响应式
• reactive() 只会对象类型有效，对基本数据类型无效，并且假如用一个新对象替换了原来的旧对象，那么原来的旧对象会失去响应性

ref 和 reactive 区别

ref 和 reactive 都是用来定义响应式数据的。

• ref 多用来定义基本数据类型（也可以定义对象，内部会自动通过reactive转为代理对象），而 reactive 只能用来定义对象数组类型
• ref 操作数据需要 .value ，reactive 操作数据不需要 .value