vue3中的ref和reactive定義數(shù)組方式
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í)未初始化數(shù)組
初始化數(shù)組
import { ref,watch } from 'vue'
const arr = ref([1,2,3])
watch(arr.value, () => { //這個(gè)時(shí)候通過直接修改和利用數(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( //這個(gè)時(shí)候不能用.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ù)組外層嵌套一個(gè)對象
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)
}
// 方法三:外層嵌套一個(gè)對象
let arr = reactive({list:[]})
function change(){
let newArr = [1,2,3]
arr.list = newArr
}總結(jié)
以上為個(gè)人經(jīng)驗(yàn),希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
Vue3實(shí)現(xiàn)vueFLow流程組件的詳細(xì)指南
VueFlow是一個(gè)專門為Vue.js框架設(shè)計(jì)的交互式可視化庫,它允許開發(fā)者輕松創(chuàng)建和管理復(fù)雜的圖形模型,如流程圖、狀態(tài)機(jī)、組織結(jié)構(gòu)圖等,本文給大家介紹了Vue3實(shí)現(xiàn)vueFLow流程組件的詳細(xì)指南,需要的朋友可以參考下2024-11-11
vite+element-plus項(xiàng)目基礎(chǔ)搭建的全過程
最近看完Vue3和Vite文檔之后,就寫了個(gè)小demo,整體感覺下來還是很絲滑的,下面這篇文章主要給大家介紹了關(guān)于vite+element-plus項(xiàng)目基礎(chǔ)搭建的全過程,需要的朋友可以參考下2022-07-07
Vue實(shí)現(xiàn)Tab標(biāo)簽路由效果并用Animate.css做轉(zhuǎn)場動(dòng)畫效果的代碼
這篇文章主要介紹了Vue實(shí)現(xiàn)Tab標(biāo)簽路由效果,并用Animate.css做轉(zhuǎn)場動(dòng)畫效果,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-07-07
Vue使用js-audio-recorder實(shí)現(xiàn)錄制,播放與下載音頻功能
這篇文章主要為大家詳細(xì)介紹了Vue如何使用js-audio-recorder實(shí)現(xiàn)錄制,播放與下載音頻功能,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以了解下2023-12-12
Vue3.0之引入Element-plus ui樣式的兩種方法
本文主要介紹了Vue3.0之引入Element-plus ui樣式的兩種方法,文中通過示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-02-02
vue3 ts打包失敗ts類型校驗(yàn)未通過導(dǎo)致打包失敗的解決方案
這篇文章主要介紹了vue3 ts打包失敗ts類型校驗(yàn)未通過導(dǎo)致打包失敗的解決方案,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2025-06-06

