vue中watch的使用探索

在專案中，經常有需要根據乙個值的變化，來相應的更新另乙個值的狀態。vue給我們提供了乙個很好用的watch方法，可以方便監控，watch並不完美，需要具體了解一下。

new
vue(
, phonelist:
['xiaomi'
,'huawei'
,'oppo'],
},watch:,}
})

對於字串數字等簡單的型別，可以入以上形式直接監聽，當每次發生變化時，進行相對應的操作。watch有乙個特點，最初繫結的時候不會執行，如果想要在繫結的時候就執行操作，則需要通過handler方法和immediate屬性配合

watch:
, immediate:
true},
}

預設情況下 handler 只監聽obj這個屬性它的引用的變化，我們只有給obj賦值的時候它才會監聽到，比如我們在 mounted事件鉤子函式中對obj進行重新賦值：

mounted:
}

這時 watch才能監聽到，進行相應操作。

如果要強制監聽，那麼就需要用到deep屬性。

watch:
, immediate:
true
, deep:
true
}}

deep:true表述深入觀察，watch進行監聽的時候，會是按層級遍歷，將每乙個屬性都新增到***中，這樣任何屬性變化，都會觸發相應操作。在工作，考慮到效能方面，如果乙個物件又很多的屬性，一一監聽會造成很大的開銷。那麼我們可以針對性的只監聽其中乙個屬性，例如

watch:
, immediate:
true
, deep:
true
}}

這種寫法的結果就是，watch會按層級，找到job屬性，指給它設定監聽，進行相應操作。