vue3使用ref和reactive定义数据
首先需要先从vue解构import {reactive, ref } from "vue";定义数据let state = reactive({//使用reactive定义数据,需要写成对象的格式global: [],});let test = ref([]);//使用ref定义数据,直接定义即可let testObj = ref({});数据赋值// 获取所有商品productAll().the
首先推荐基本数据类型使用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
更多推荐
所有评论(0)