vue3中的ref和reactive定義數組方式

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

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

vue3的ref和reactive定義數組

在vue3中，定義響應式數據一般有兩種方式：

ref
reactive

一般來說，我們使用 ref 來定義基本數據類型，使用 reactive 來定義復雜數據類型

但是也可以使用 ref 來定義數組

1、ref 定義數組

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

兩種情況：

定義時就將數組初始化
定義時未初始化數組

初始化數組

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

未初始化數組

import { ref,watch,onMounted } from 'vue'
const arr = ref([])
watch( //這個時候不能用.value且必須是深度監(jiān)聽，這種寫法不僅可以監(jiān)聽數組本身的變化，也可以監(jiān)聽 數組元素的變化
  arr,
  () => {
    console.log('空數組變化了')
  },
  {
    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 定義數組

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

但是這樣定義的會出現問題，arr = newArr 這一步使得 arr 失去了響應式的效果

解決方法

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

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
}