vue之watch监听对象或者一个值时注意事项(深度观察deep:true慎用!)

vue中想在某个值改变的时候能够做一些其他事情,可以使用其提供的监听机制,使用watch。注意,本篇不讲技术问题,只是讲解如何应用,因为笔者也是一个前端的小白

例:经手项目中就有使用,截图如下:

下面来分析上面分别是怎样实现监听的:

其实除了画红线的地方,别的都没什么,就是按照这个格式,上图中的status、cboxUseCoupon、displayVideo,包括params4.payWay都是页面中的全局参数,其中前面几个都是单值,可以直接这样监听,回调钩子里面有新的值和旧的值,当这些值改变的时候,就会进入到这个function中,需要注意画出来的那个注释,这也是我碰到的问题:

   params4是个对象  监听了对象里面的payWay属性,一开始采用了那个深度观察:deep:true,出现的问题是对象的其他值变化的时候导致执行了我监听payWay的handler  ,注释掉那段就可以了,猜想原因:觉得是下面加这个深度监听后不止这个值改变会执行handler,当这个对象id或者是类似存储地址改变了也会执行handler。

猜你喜欢

转载自blog.csdn.net/qi_dabin/article/details/83865300