vue3 ref 和 reactive 区别-Toy模板网

这篇具有很好参考价值的文章主要介绍了vue3 ref 和 reactive 区别。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

前言

最近学习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.data
		array[0].num = obj.secretKeyLoginNum
		array[1].num = obj.secretKeyNum
		array[2].num = obj.shortLinkNum
		array[3].num = obj.sysLoginNum
		console.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.data
		array[0].num = obj.secretKeyLoginNum
		array[1].num = obj.secretKeyNum
		array[2].num = obj.shortLinkNum
		array[3].num = obj.sysLoginNum
		console.log('1111',array);
	}
})
</script>