vue监听watch注意事项

1、监听响应式数据，可以深度监听（是响应式数据，不是响应式数据的某个值）

例如1：let  allLogInfo = ref<object>({});

watch(

   allLogInfo,

   ()=>{}

)    这种是深度监听

watch(

   allLogInfo.value,

   ()=>{}

)   这种不行，监听不了，因为allLogInfo.value是个值

例如2：let  allLogInfo = reactive({count});

watch(

   allLogInfo,

   ()=>{}

)    这种是深度监听

watch(

   allLogInfo.count,

   ()=>{}

)   这种不行，监听不了，因为allLogInfo.value是个值

2、当监听一个响应式数据上的某个值，并且想使这个监听有效，可以写成函数式

watch(

   (）=> allLogInfo.count,

   ()=>{}

) 

3、函数式源数据监听，只有当源数据是不同的对象时，才可以触发监听，他不能深度监听，需要添加{deep:true}，即使reactive也要加{deep:true}

例如：

//父组件 usingTrend.js

  let detailData = reactive({

    name: '',

    data: ['', '', ''],

    dataX: [] as any,

    dataY: [

      {

        name: '',

        data: [],

        type: 'line',

      },

    ] as any,

  });

<StatisticEchartsModel v-show="!loading && !noData" :detailsForm="detailData" />

//子组件

watch(()=>props.detailsForm.dataX，()=>{

        ...........

})

如果在父组件中改变detailData值

情况1：detailData.dataX = []，会被监听到；

情况2：detailData.dataX.push(...)， 不会被监听到

要想解决情况2这种情况，就要

watch(()=>props.detailsForm.dataX，()=>{

        ...........

}，{deep:true})

最后总结一下：watch监听的数据源有这几种：1）响应式数据(ref、reactive)；2)函数形式；3)多个数据源组成的数组，这里要注意的是，除了ref、reactive，其他的都是函数形式，监听props里的数据也是通过函数形式