Watch

watch的作用可以監控一個值的變換，并調用因為變化需要執行的方法。可以通過watch動態改變關聯的狀態。

簡單點說，就是實時監聽某個數據的變化。

1、普通監聽

<template> <!-- 監聽屬性 --><div><p>{{num}}</p><button @click="num++">按鈕</button></div> </template><script> export default {data () {return {num:30}},watch:{// 第1種格式:// num(newVal,oldVal){// // 什么時候執行, num的值發生變化的時候,就執行這里的代碼// console.log("num被修改了",newVal,oldVal);// },// 第2種格式:num:{handler(newVal,oldVal){// 什么時候執行, num的值發生變化的時候,就執行這里的代碼console.log("num被修改了",newVal,oldVal);}}} } </script><style lang = "less" scoped></style>

2、立即監聽

如果我們需要在最初綁定值的時候也執行函數，則就需要用到immediate屬性。

<template> <!-- 立即監聽 --><div><p>{{num}}</p><button @click="num++">按鈕</button></div> </template><script> export default {data () {return {num:30}},watch:{num:{handler(newVal,oldVal){// 什么時候執行, num的值發生變化的時候,就執行這里的代碼console.log("num被修改了",newVal,oldVal);},immediate:true // 立即監聽}} } </script><style lang = "less" scoped></style>

immediate需要搭配handler一起使用，其在最初綁定時，調用的函數也就是這個handler函數。

3、深度監聽

當需要監聽一個對象的改變時，普通的watch方法無法監聽到對象內部屬性的改變，只有data中的數據才能夠監聽到變化，此時就需要deep屬性對對象進行深度監聽。

<template> <!-- 深度監聽 --><div><p>{{obj.age}}</p><button @click="obj.age++">按鈕</button></div> </template><script> export default {data () {return {obj:{name:"Vue",age:7}}},watch:{// obj:{// handler(newVal,oldVal){// // 什么時候執行, obj中一旦有屬性發生變化,就會執行這里的代碼// console.log("name或者age被修改了",newVal,oldVal);// },// deep:true// }"obj.age":{handler(newVal,oldVal){// 什么時候執行, age被修改的時候來執行console.log("age被修改了",newVal,oldVal);},}} } </script><style lang = "less" scoped></style>

---

注意：

1、如果監聽的數據是一個對象，那么 immediate: true失效；

2、一般使用于對引用類型的監聽，深度監聽，如監聽一個Object，只要Object里面的任何一個字段發生變化都會被監聽，但是比較消耗性能，根據需求使用，能不用則不用。

3、因為上面代碼obj是引用數據類型，val, oldVal指向一致，導致看到的結果一樣。

---

4、deep優化

我們可以通過點語法獲取對象中的屬性，然后轉為字符串，即是對深度監聽的優化

<template><div class="home"><h3>{{obj.age}}</h3><button @click="btnClick">按鈕</button></div> </template><script> export default {name: "Home",data() {return {obj: {name: "Lucy",age: 13}};},methods: {btnClick() {this.obj.age = 33;}},watch: {// 通過點語法獲取對象中的屬性，然后轉為字符串，即是對深度監聽的優化"obj.age": {handler(val, oldVal) {console.log(val, oldVal);},deep: true,immediate: true, // 此時監聽的數據不是一個對象，可以使用immediate}} }; </script>

5、Watch與Computed的區別

• watch中的函數是不需要調用的，computed內部的函數調用的時候不需要加()

• watch(屬性監聽)，監聽的是屬性的變化，而computed(計算屬性)，是通過計算而得來的數據

• watch需要在數據變化時執行異步或開銷較大的操作時使用，而對于任何復雜邏輯或一個數據屬性，在它所依賴的屬性發生變化時，也要發生變化，這種情況下，我們最好使用計算屬性computed。

• computed 屬性的結果會被緩存，且computed中的函數必須用return返回最終的結果

• watch 一個對象，鍵是需要觀察的表達式，值是對應回調函數。主要用來監聽某些特定數據的變化，從而進行某些具體的業務邏輯操作；

6、Watch與Computed的使用場景

• computed 　　　

  • 當一個結果受多個屬性影響的時候就需要用到computed

  • 最典型的例子： 購物車商品結算的時候

• watch

  • 當一個數據的變化需要有額外操作的時候就需要用watch

  • 搜索數據

• 總結：

  • 一個值的結果受其他值的影響，用computed

  • 一個值的變化將時刻影響其他值，用watch

總結

以上是生活随笔為你收集整理的130-Vue中的监听事件——Watch的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。