vue3使用ref和reactive定义数据详解

import {reactive, ref } from "vue";

let state = reactive({    //使用reactive定义数据，需要写成对象的格式
  global: [],
});
let arr = reactive([])      //用reactive只定义一个空数组
let test = ref([]);       //使用ref定义数据，直接定义即可
let testObj = ref({});

// 获取所有商品
  productAll().then(res => {

    state.global=res.product     //用reactive定义的直接赋值即可

    arr.push(...[1,2,3])         //用reactive单个定义的数组，通过扩展运算符，和push赋值  
    
    test.value = res.product;    //使用ref定义的，需要在定义的变量后边加.value

    testObj.value = res.product[0];
     
  });

<template v-for="(item, index) in state.global" :key="index">
   <div>购买数量{{ item.buyCount }}</div>
</template>

<template v-for="(item, index) in test" :key="index">
    <div class="test" @click="numClick(index)">
      {{ item.uid }}-{{ item.proDescription }}
    </div>
</template>

// 用reactive定义的
function getCount(event, index) {
  state.global[index].buyCount = event;
}

// 用ref定义的，需要用.value
function numClick(index) {
  test.value[index].uid++;
}