在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)式的效果文章來源：http://www.zghlxwxcb.cn/news/detail-610586.html
解決方法：可以使用 ref 定義、使用 push 方法、數(shù)組外層嵌套一個對象文章來源地址http://www.zghlxwxcb.cn/news/detail-610586.html
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
}到了這里，關(guān)于vue3中的ref 和 reactive 定義數(shù)組的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
