vue3使用ref和reactive定义数据详解
作者：m0_63466615
文章主要介绍了在Vue 3中使用`ref`和`reactive`来定义和操作数据的区别,`ref`适用于基本数据类型和部分引用数据类型,操作时需要通过`.value`访问和修改,`reactive`主要用于对象类型的引用数据,操作时可以直接访问和修改属性,但在模板中使用时需要通过定义时的变量来访问
vue3使用ref和reactive定义数据
现在官网推荐使用ref定义所有变量
但是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
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。