vue3监听变量（包括对象、数组的特殊用法）

vue3中我们一般使用watch监听数据，正常使用情况如下：

let data = ref('')
watch(data,value => {
  console.log('data',value)
})

当监听的变量为引用型数据时我们需要进行深度监听，否则无法监听，如下：

let data = reactive({})
watch(data,value => {
  console.log('data',value)
},{
  deep:true
})

当监听对象里面的某个变量时需要使用箭头函数，如下：

let data = reactive({test:""})
watch(() => data.test,value => {
  console.log('data',value)
},{
  deep:true
})

当监听数组或对象时，不要修改引用地址，即不重新赋值，若要清空数组，应通过 arr.length = 0 实现，否则无法监听，如下所示：

let data = reactive([{a:"1"},{a:"2"}])
setTimeout(() => {
  // 错误示例
  // data = [{a:"1"}]
  // 正确示例
  data.length = 0
  data.push({a:"1"})
},1000)
watch(data,value => {
  console.log('data',value)
},{
  deep:true
})