1. 程式人生 > >vue之watch監聽物件或者一個值時注意事項(深度觀察deep:true慎用!)

vue之watch監聽物件或者一個值時注意事項(深度觀察deep:true慎用!)

vue中想在某個值改變的時候能夠做一些其他事情,可以使用其提供的監聽機制,使用watch。注意,本篇不講技術問題,只是講解如何應用,因為筆者也是一個前端的小白

例:經手專案中就有使用,截圖如下:

下面來分析上面分別是怎樣實現監聽的:

其實除了畫紅線的地方,別的都沒什麼,就是按照這個格式,上圖中的status、cboxUseCoupon、displayVideo,包括params4.payWay都是頁面中的全域性引數,其中前面幾個都是單值,可以直接這樣監聽,回撥鉤子裡面有新的值和舊的值,當這些值改變的時候,就會進入到這個function中,需要注意畫出來的那個註釋,這也是我碰到的問題:

   params4是個物件  監聽了物件裡面的payWay屬性,一開始採用了那個深度觀察:deep:true,出現的問題是物件的其他值變化的時候導致執行了我監聽payWay的handler  ,註釋掉那段就可以了,猜想原因:覺得是下面加這個深度監聽後不止這個值改變會執行handler,當這個物件id或者是類似儲存地址改變了也會執行handler。