vue3 watch监听响应式数组失效问题

const pageData = reactive({
  checkedNodeList: []
  })


const colspanDisabled = ref(false);

watch(() => {
  return pageData.checkedNodeList
}, (newValue, oldValue) => {
  if (newValue.length > 0) {
    colspanDisabled.value = true;
  } else {
    colspanDisabled.value = false;
  }
}, {immediate: true});

如上代码中当，对数组进行splice操作，监听会失效

pageData.checkedNodeList.splice(index, 1);

解决方法：

1、使用   deep: true

watch(() => {
  return pageData.checkedNodeList
}, (newValue, oldValue) => {
  if (newValue.length > 0) {
    colspanDisabled.value = true;

  } else {
    colspanDisabled.value = false;
  }
}, {immediate: true, deep: true});

补充说明：

vue官方中说明了侦听数组的改变方法，若是使用索引去改变数组的参数则不会触发vue的watch事件以及渲染。例如↓三种方式都是不会触发vue的监听以及渲染的。

1.通过索引直接设置数组的某个值，

this.objArr[index] = newValue;

2.通过索引直接设置数组中对象的某个属性，

this.objArr[index].pro = newValue;

3.通过修改数组的长度，

this.objArr.length = newLength;
解决方法
官方文档中说明了：​

Vue 能够侦听响应式数组的变更方法，并在它们被调用时触发相关的更新。这些变更方法包括：

push()
pop()
shift()
unshift()
splice()
sort()
reverse()

举例1，数组的值的变化侦听
this.arr[index] = newValue;通过索引直接设置数组的某个值，是不会触发watch以及视图更新。
那我们就用他给的方法：splice（）

this.arr.splice(index,1,newValue)
//这样就会触发vue的watch以及视图的更新。

2、使用 watchEffect

watchEffect(()=>{
  if(pageData.checkedNodeList.length > 0){
    colspanDisabled.value = true;
  }else {
    colspanDisabled.value = false;
  }
});