Vue3 watch监听 ref数组

在Vue3中使用数组作为响应式数据，有两种方式，用ref包裹，或用reactive
watch监听 ref 定义的数组有不同的写法

首先数组的变化分两种

1. 数组本身的变化(数组长度的变化)
2. 数组元素的变化

数组本身的变化

数组被替换emptyArray.value = []，常规写法，这样可以检测到变化
watch(emptyArray, () => {
//这里使用emptyArray.value是监测不到被替换的
  console.log('空数组长度变化了')
}) 

使用数组的变更方法(emptyArray.value.push(1))，
watch(emptyArray, () => {
//必须使用deep才能检测到使用数组变化变更方法的改变，但是这些改变可以引起UI的改变
  console.log('空数组长度变化了')
},{
 deep:true
}) 

数组元素的变化

创建时已经初始化了元素数据的数组–这种方式对于数组里是复杂数据也可以

const emptyArray = ref([1, 2, 3, 4])
watch(emptyArray.value, () => {
//通过直接修改和利用数组的方法修改都可以监测到
  console.log('数组变化了')
})

先创建后初始化，这种再用第一种方式已经检测不到数据的变化了，但是UI可以更新，这个时候必须用不带value的deep监听

const emptyArray = ref([1, 2, 3, 4])
watch( 
  emptyArray,
  () => {
    console.log('空数组变化了')
  }, {
    deep: true
  }
) 

不带.value的深度监听，不仅可以监听数组本身的变化，也可以监听 数组元素的变化

结论，创建ref的时候都大多不会初始化，所以基本都使用最后一种方式监听