foreword

I recently studied the cloud project, using vue3 + ts and other technologies in the front end, encountered responsive data problems in the process of writing requirements , searched for relevant notes through Baidu , recorded them here, and grew up in actual combat.

question

Problem : Define a default array and display it in a for loop. The backend returns data and assigns it to the array, but the displayed value will not be modified

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

reason

Reason : The array array defined in js is just a common constant, not a responsive array, and it will not automatically update the view.

solution

Solution : Use the reactive and ref methods provided by vue3 to define responsive data.

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>

ref

ref allows to create a responsive ref object of any type, and it needs to be used with .value
When using a ref object in a template, if the ref is at the top level and does not need to use value, it will be automatically unwrapped, but the ref object is declared as an attribute in the object, and .value is still used when performing calculations in the template

reactive

Usually use reactive() to create a responsive object or array, such object or array state is the default deep responsive
reactive() is only valid for object types, not for basic data types, and if a new object is used to replace the original old object, the original old object will lose responsiveness

The difference between ref and reactive

Both ref and reactive are used to define reactive data.

ref is mostly used to define basic data types (you can also define objects, which will be automatically converted to proxy objects through reactive), while reactive can only be used to define object array types
ref operation data needs .value, reactive operation data does not need .value

The difference between vue3 ref and reactive