首先推荐基本数据类型使用ref定义，引用数据类型使用reactive定义
但是ref也可以定义引用数据类型，如果使用ref定义引用数据类型
首先需要先从vue解构
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];
});在模板区使用，reactive需要用定义的数据区，去找到需要用到的数据
<template v-for="(item, index) in state.global" :key="index">
<div>购买数量{{ item.buyCount }}</div>
</template>在模板区使用,ref，直接使用定义的变量即可，不需要.value
<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++;
}总结：JS区操作
? ? ? ? ? ? ? ? 定义数据
? ? ? ? ? ? ? ? ????????reactive定义时，需要写成对象的格式，(定义的单个数据不需要)
? ? ? ? ? ? ? ? ????????ref定义时，直接定义即可
? ? ? ? ? ? ? ? 操作数据
????????????????????????用reactive定义的数据，直接操作即可，
? ? ? ? ? ? ? ? ? ? ? ? 用reactive定义的单个数据，需要使用扩展运算符和push或pop给数据赋值
? ? ? ? ????????????????用ref定义是数据，需要在定义的变量后边加.value
? ? ? ? ??模板区
? ? ? ? ? ? ? ? 用reactive定义的数据，需要用定义时的变量到所需的变量
? ? ? ? ? ? ? ? 用ref定义的变量，直接使用变量即可，不需要使用.value
