vue3使用ref和reactive定義數(shù)據(jù)詳解

更新時間：2025年10月28日 10:56:31 作者：m0_63466615

文章主要介紹了在Vue 3中使用`ref`和`reactive`來定義和操作數(shù)據(jù)的區(qū)別,`ref`適用于基本數(shù)據(jù)類型和部分引用數(shù)據(jù)類型,操作時需要通過`.value`訪問和修改,`reactive`主要用于對象類型的引用數(shù)據(jù),操作時可以直接訪問和修改屬性,但在模板中使用時需要通過定義時的變量來訪問

vue3使用ref和reactive定義數(shù)據(jù)

現(xiàn)在官網(wǎng)推薦使用ref定義所有變量

但是ref也可以定義引用數(shù)據(jù)類型，如果使用ref定義引用數(shù)據(jù)類型

首先需要先從vue解構(gòu)

import {reactive, ref } from "vue";

定義數(shù)據(jù)

let state = reactive({    //使用reactive定義數(shù)據(jù)，需要寫成對象的格式
  global: [],
});
let arr = reactive([])      //用reactive只定義一個空數(shù)組
let test = ref([]);       //使用ref定義數(shù)據(jù)，直接定義即可
let testObj = ref({});

數(shù)據(jù)賦值

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

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

    arr.push(...[1,2,3])         //用reactive單個定義的數(shù)組，通過擴展運算符，和push賦值  
    
    test.value = res.product;    //使用ref定義的，需要在定義的變量后邊加.value

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

在模板區(qū)使用，reactive需要用定義的數(shù)據(jù)區(qū)，去找到需要用到的數(shù)據(jù)

<template v-for="(item, index) in state.global" :key="index">
   <div>購買數(shù)量{{ item.buyCount }}</div>
</template>

在模板區(qū)使用,ref，直接使用定義的變量即可，不需要.value

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

操作數(shù)據(jù)中的數(shù)據(jù)

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

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