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ù)組，通過擴(kuò)展運(yùn)算符，和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++;
}總結(jié)
JS區(qū)操作
定義數(shù)據(jù)
- reactive定義時，需要寫成對象的格式，(定義的單個數(shù)據(jù)不需要)
- ref定義時，直接定義即可
操作數(shù)據(jù)
- 用reactive定義的數(shù)據(jù)，直接操作即可，
- 用reactive定義的單個數(shù)據(jù)，需要使用擴(kuò)展運(yùn)算符和push或pop給數(shù)據(jù)賦值
- 用ref定義是數(shù)據(jù)，需要在定義的變量后邊加.value
模板區(qū)
- 用reactive定義的數(shù)據(jù)，需要用定義時的變量到所需的變量
- 用ref定義的變量，直接使用變量即可，不需要使用.value
以上為個人經(jīng)驗(yàn)，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
一篇文章告訴你如何實(shí)現(xiàn)Vue前端分頁和后端分頁
這篇文章主要為大家介紹了如何實(shí)現(xiàn)Vue前端分頁和后端分頁，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2021-12-12
這篇文章主要介紹了keep-alive組件的作用與原理,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-05-05
Vue3為我們開發(fā)提供了兩種組件邏輯實(shí)現(xiàn)方式：選項式API和組合式API,本文將嘗試為大家分析什么是選項式API和組合式API,以及兩種API的優(yōu)缺點(diǎn),希望對大家有所幫助2023-12-12
詳解keep-alive + vuex 讓緩存的頁面靈活起來
這篇文章主要介紹了keep-alive + vuex 讓緩存的頁面靈活起來，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
本篇文章主要介紹了淺談vue+webpack項目調(diào)試方法步驟，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-09-09
最近需要做個需求，需要做到element Table表格組件多字段(多列)排序，本文就詳細(xì)的介紹一下方法，感興趣的可以了解一下2021-09-09
vue打包靜態(tài)資源后顯示空白及static文件路徑報錯的解決
這篇文章主要介紹了vue打包靜態(tài)資源后顯示空白及static文件路徑報錯的解決，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-09-09
當(dāng)使用Three.js加載GLB模型時,遇到加載錯誤常常是路徑問題,解決方案：1. 將GLB模型文件置于public目錄,避免打包時路徑編碼變化；2. 從node_modules的three庫中復(fù)制draco解碼器至public目錄；3. 確認(rèn)場景、攝像機(jī)和光源設(shè)置正確2024-10-10
這篇文章主要介紹了vue中的.sync修飾符用法及原理分析，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
vue動態(tài)綁定多個類名方法詳解(:class動態(tài)綁定多個類名)
vue中可以通過:class=""這樣來根據(jù)一定的條件來動態(tài)添加class,但是有時候需要判斷的條件比較多,需要動態(tài)添加的class也比較多,下面這篇文章主要給大家介紹了關(guān)于vue動態(tài)綁定多個類名(:class動態(tài)綁定多個類名)的相關(guān)資料,需要的朋友可以參考下2022-11-11