首页 > 网络编程 > JavaScript > javascript类库 > vue.js > vue3的ref和reactive定义数组

vue3中的ref和reactive定义数组方式

2023-10-08 15:04:33 作者：不悔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, () => { //这个时候通过直接修改和利用数组的方法修改都可以监测到
  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且必须是深度监听，这种写法不仅可以监听数组本身的变化，也可以监听 数组元素的变化
  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
}

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。