vue3中的ref和reactive定義數(shù)組方式

更新時間：2023年10月08日 15:08:14 作者：不悔0.0

這篇文章主要介紹了vue3中的ref和reactive定義數(shù)組方式,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教

vue3的ref和reactive定義數(shù)組

在vue3中，定義響應(yīng)式數(shù)據(jù)一般有兩種方式：

ref
reactive

一般來說，我們使用 ref 來定義基本數(shù)據(jù)類型，使用 reactive 來定義復(fù)雜數(shù)據(jù)類型

但是也可以使用 ref 來定義數(shù)組

1、ref 定義數(shù)組

import { ref } from 'vue'
const arr = ref([])

兩種情況：

定義時就將數(shù)組初始化
定義時未初始化數(shù)組

初始化數(shù)組

import { ref,watch } from 'vue'
const arr = ref([1，2，3])
watch(arr.value, () => { //這個時候通過直接修改和利用數(shù)組的方法修改都可以監(jiān)測到
  console.log('數(shù)組變化了')
})
const pushArray = () => {
  emptyArray.value.splice(0, 0, 19)
}
const changeArrayItem = () => {
  emptyArray.value[0] = 10
}

未初始化數(shù)組

import { ref,watch,onMounted } from 'vue'
const arr = ref([])
watch( //這個時候不能用.value且必須是深度監(jiān)聽，這種寫法不僅可以監(jiān)聽數(shù)組本身的變化，也可以監(jiān)聽 數(shù)組元素的變化
  arr,
  () => {
    console.log('空數(shù)組變化了')
  },
  {
    deep: true
  }
)
const pushArray = () => {
  arr.value.splice(0, 0, { value: 12 })
}
const changeArrayItem = () => {
  arr.value[0] = { value: 32 }
}
onMounted(() => {
  arr.value = [{ value: 5 }, { value: 2 }, { value: 3 }, { value: 4 }]
})

2、reactive 定義數(shù)組

import { reactive } from 'vue';
let arr = reactive([])
function change(){
   let newArr = [1,2,3]
   arr = newArr
}

但是這樣定義的會出現(xiàn)問題，arr = newArr 這一步使得 arr 失去了響應(yīng)式的效果

解決方法

可以使用 ref 定義、使用 push 方法、數(shù)組外層嵌套一個對象

import { reactive,ref } from 'vue';
let arr = reactive([])
function change(){
   let newArr = [1,2,3]
   arr = newArr
}
// 方法一：使用 ref
let arr = ref([])
function change(){
   let newArr = [1,2,3]
   arr.value = newArr
}
// 方法二：使用push 方法
let arr = reactive([])
function change(){
   let newArr = [1,2,3]
   arr.push(...newArr)
}
// 方法三：外層嵌套一個對象
let arr = reactive({list:[]})
function change(){
   let newArr = [1,2,3]
   arr.list = newArr
}

總結(jié)

以上為個人經(jīng)驗(yàn)，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

VUE3+TS遞歸組件實(shí)現(xiàn)TreeList設(shè)計(jì)實(shí)例詳解
這篇文章主要為大家介紹了VUE3+TS遞歸組件實(shí)現(xiàn)TreeList設(shè)計(jì)實(shí)例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-09-09
vue:axios請求本地json路徑錯誤問題及解決
這篇文章主要介紹了vue:axios請求本地json路徑錯誤問題及解決，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-06-06
基于Vue和Firebase實(shí)現(xiàn)一個實(shí)時聊天應(yīng)用
在本文中,我們將學(xué)習(xí)如何使用Vue.js和Firebase來構(gòu)建一個實(shí)時聊天應(yīng)用,Vue.js是一種流行的JavaScript前端框架,而Firebase是Google提供的實(shí)時數(shù)據(jù)庫和后端服務(wù),結(jié)合這兩者,我們可以快速搭建一個功能強(qiáng)大的實(shí)時聊天應(yīng)用,需要的朋友可以參考下
2023-08-08
Vue2.5 結(jié)合 Element UI 之 Table 和 Pagination 組件實(shí)現(xiàn)分頁功能
這篇文章主要介紹了Vue2.5 結(jié)合 Element UI 之 Table 和 Pagination 組件實(shí)現(xiàn)分頁功能，非常不錯，具有參考借鑒價(jià)值,需要的朋友可以參考下
2018-01-01
vue實(shí)現(xiàn)簡單數(shù)據(jù)雙向綁定
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)簡單數(shù)據(jù)雙向綁定，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-04-04
vue2結(jié)合echarts實(shí)現(xiàn)一個地圖的效果
這篇文章主要介紹了vue2結(jié)合echarts實(shí)現(xiàn)一個地圖的效果,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對大家何用vue和echarts實(shí)現(xiàn)一個地圖有一定的幫助,感興趣的朋友一起看看吧
2024-03-03
詳解Vue的watch中的immediate與watch是什么意思
這篇文章主要介紹了詳解Vue的watch中的immediate與watch是什么意思，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2019-12-12
Vuex存值取值與異步請求處理方式
本文將詳細(xì)介紹Vuex的使用方法,包括參數(shù)值的獲取、修改,以及異步數(shù)據(jù)處理,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2025-04-04
Vue實(shí)現(xiàn)手機(jī)計(jì)算器
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)手機(jī)計(jì)算器，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2020-08-08
vue項(xiàng)目運(yùn)行npm?install報(bào)錯問題及解決
這篇文章主要介紹了vue項(xiàng)目運(yùn)行npm?install報(bào)錯問題及解決方案,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2023-08-08