背景：

路由結構/video/1.mp4,即/video是父路由，/1.mp4是/video的動態子路由，在/video父路由中會通過url的params獲取視訊資訊,即通過/1.mp4獲取對應的視訊完整資訊，然後通過props傳到動態子路由中，然後子路由通過接受到的視訊物件，進行展示

問題：

當路由切換時，即當我點選其他視訊時，導致動態子路由變化時，我監聽了/video父路由的變化並重新根據url的params獲取視訊物件，並自動通過props傳入子路由中，我在子路由中通過watch 視訊物件來進行一些操作，結果

watch: { 
 video () {
 console.log("test")
 }
}

test被列印了兩次，通過一番查詢，才發現，當子路由切換時，父路由/video中的data資料都會被初始化為預設值，所以導致video物件變化了兩次，一次是因為初始化被重置為預設值空物件，一次是請求後的正確資料

結局：

將video物件存到vuex中，然後父路由將vuex中的video物件傳給子路由就行了

補充知識：vue watch一個物件或陣列時，newvalue和oldvalue一樣

在官方的程式碼改寫了一下，當深度watch一個物件時，newval和oldval的值為什麼是相等的呢？

var vm = new Vue({
 data: {
 a: 1,c:{
   c1:1,c2:2
  }
 },watch: {
 'a': function (val,oldVal) {
  console.log(val,oldVal,(val== oldVal))
 },// 方法名
 'b': 'someMethod',// 深度 watcher
 'c': {
  handler: function (val,oldVal) { 
   console.log(val,(val== oldVal))
   },deep: true
 }
 }
})
  
vm.a = 2 
vm.c.c1 = 2 

和深度無關，而是在修改（不是替換）物件或陣列時，舊值將與新值相同，因為它們索引同一個物件/陣列。Vue 不會保留修改之前值的副本。

以上這篇解決vue watch資料的方法被呼叫了兩次的問題就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支援我們。