在vue3中,定义响应式数据一般有两种方式:ref 和 reactive
一般来说,我们使用 ref 来定义基本数据类型,使用 reactive 来定义复杂数据类型
但是也可以使用 ref 来定义数组
但是企业中项目做多了就会发现,定义数组用的都是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
}
3、示例
<template>
<div>arr1: {{ arr1 }}</div>
<div>arr2: {{ state.arr2 }}</div>
</template>
<script setup>
import { reactive, ref } from 'vue'
const arr1 = ref([1,2,3,4])
setTimeout(()=>{
arr1.value = [1]
console.log('arr1: 1秒后')
}, 1000)
const state = reactive({
arr2: [5,6,7,8]
})
setTimeout(()=>{
state.arr2 = [5]
console.log('arr2: 2秒后')
}, 2000)
通过以上代码示例发现,ref定义数组的好处:
1. 可以使模板代码更简洁 <div>arr1: {{ arr1 }}</div>
即可,因为模板代码会自动拆包
虽然vue3提供了toRef和toRefs,可以把reactive定义的arr2拆出来,直接放到模板中使用,但是还是多一步,略显麻烦
2. ref声明数组的方式与其他对象是解耦的,arr1的声明、重新赋值、模板的使用都是arr1自己,与其他对象不发生关系
使用reactive定义的arr2则是与state强关联在一起的,不能直接使用arr2,必须要使用state.arr2
方式
3. 可以使用arr1.value = []
的方式进行重新赋值,而且不会失去响应式