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

更新时间：2025年10月28日 10:56:31 作者：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

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

一篇文章告诉你如何实现Vue前端分页和后端分页
这篇文章主要为大家介绍了如何实现Vue前端分页和后端分页，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助
2021-12-12
keep-alive组件的作用与原理分析
这篇文章主要介绍了keep-alive组件的作用与原理,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2024-05-05
探索Vue中组合式API和选项式API的用法与比较
Vue3为我们开发提供了两种组件逻辑实现方式：选项式API和组合式API,本文将尝试为大家分析什么是选项式API和组合式API,以及两种API的优缺点,希望对大家有所帮助
2023-12-12
详解keep-alive + vuex 让缓存的页面灵活起来
这篇文章主要介绍了keep-alive + vuex 让缓存的页面灵活起来，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-04-04
浅谈vue+webpack项目调试方法步骤
本篇文章主要介绍了浅谈vue+webpack项目调试方法步骤，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-09-09
element Table表格组件多字段(多列)排序方法
最近需要做个需求，需要做到element Table表格组件多字段(多列)排序，本文就详细的介绍一下方法，感兴趣的可以了解一下
2021-09-09
vue打包静态资源后显示空白及static文件路径报错的解决
这篇文章主要介绍了vue打包静态资源后显示空白及static文件路径报错的解决，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-09-09
Vue+Three加载glb文件报错问题及解决
当使用Three.js加载GLB模型时,遇到加载错误常常是路径问题,解决方案：1. 将GLB模型文件置于public目录,避免打包时路径编码变化；2. 从node_modules的three库中复制draco解码器至public目录；3. 确认场景、摄像机和光源设置正确
2024-10-10
vue中的.sync修饰符用法及原理分析
这篇文章主要介绍了vue中的.sync修饰符用法及原理分析，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-04-04
vue动态绑定多个类名方法详解(:class动态绑定多个类名)
vue中可以通过:class=""这样来根据一定的条件来动态添加class,但是有时候需要判断的条件比较多,需要动态添加的class也比较多,下面这篇文章主要给大家介绍了关于vue动态绑定多个类名(:class动态绑定多个类名)的相关资料,需要的朋友可以参考下
2022-11-11