Watch

watch的作用可以監(jiān)控一個(gè)值的變換，并調(diào)用因?yàn)樽兓枰獔?zhí)行的方法。可以通過(guò)watch動(dòng)態(tài)改變關(guān)聯(lián)的狀態(tài)。

簡(jiǎn)單點(diǎn)說(shuō)，就是實(shí)時(shí)監(jiān)聽(tīng)某個(gè)數(shù)據(jù)的變化。

1、普通監(jiān)聽(tīng)

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

2、立即監(jiān)聽(tīng)

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

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

immediate需要搭配handler一起使用，其在最初綁定時(shí)，調(diào)用的函數(shù)也就是這個(gè)handler函數(shù)。

3、深度監(jiān)聽(tīng)

當(dāng)需要監(jiān)聽(tīng)一個(gè)對(duì)象的改變時(shí)，普通的watch方法無(wú)法監(jiān)聽(tīng)到對(duì)象內(nèi)部屬性的改變，只有data中的數(shù)據(jù)才能夠監(jiān)聽(tīng)到變化，此時(shí)就需要deep屬性對(duì)對(duì)象進(jìn)行深度監(jiān)聽(tīng)。

<template> <!-- 深度監(jiān)聽(tīng) --><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){// // 什么時(shí)候執(zhí)行, obj中一旦有屬性發(fā)生變化,就會(huì)執(zhí)行這里的代碼// console.log("name或者age被修改了",newVal,oldVal);// },// deep:true// }"obj.age":{handler(newVal,oldVal){// 什么時(shí)候執(zhí)行, age被修改的時(shí)候來(lái)執(zhí)行console.log("age被修改了",newVal,oldVal);},}} } </script><style lang = "less" scoped></style>

---

注意：

1、如果監(jiān)聽(tīng)的數(shù)據(jù)是一個(gè)對(duì)象，那么 immediate: true失效；

2、一般使用于對(duì)引用類(lèi)型的監(jiān)聽(tīng)，深度監(jiān)聽(tīng)，如監(jiān)聽(tīng)一個(gè)Object，只要Object里面的任何一個(gè)字段發(fā)生變化都會(huì)被監(jiān)聽(tīng)，但是比較消耗性能，根據(jù)需求使用，能不用則不用。

3、因?yàn)樯厦娲aobj是引用數(shù)據(jù)類(lèi)型，val, oldVal指向一致，導(dǎo)致看到的結(jié)果一樣。

---

4、deep優(yōu)化

我們可以通過(guò)點(diǎn)語(yǔ)法獲取對(duì)象中的屬性，然后轉(zhuǎn)為字符串，即是對(duì)深度監(jiān)聽(tīng)的優(yōu)化

<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: {// 通過(guò)點(diǎn)語(yǔ)法獲取對(duì)象中的屬性，然后轉(zhuǎn)為字符串，即是對(duì)深度監(jiān)聽(tīng)的優(yōu)化"obj.age": {handler(val, oldVal) {console.log(val, oldVal);},deep: true,immediate: true, // 此時(shí)監(jiān)聽(tīng)的數(shù)據(jù)不是一個(gè)對(duì)象，可以使用immediate}} }; </script>

5、Watch與Computed的區(qū)別

• watch中的函數(shù)是不需要調(diào)用的，computed內(nèi)部的函數(shù)調(diào)用的時(shí)候不需要加()

• watch(屬性監(jiān)聽(tīng))，監(jiān)聽(tīng)的是屬性的變化，而computed(計(jì)算屬性)，是通過(guò)計(jì)算而得來(lái)的數(shù)據(jù)

• watch需要在數(shù)據(jù)變化時(shí)執(zhí)行異步或開(kāi)銷(xiāo)較大的操作時(shí)使用，而對(duì)于任何復(fù)雜邏輯或一個(gè)數(shù)據(jù)屬性，在它所依賴(lài)的屬性發(fā)生變化時(shí)，也要發(fā)生變化，這種情況下，我們最好使用計(jì)算屬性computed。

• computed 屬性的結(jié)果會(huì)被緩存，且computed中的函數(shù)必須用return返回最終的結(jié)果

• watch 一個(gè)對(duì)象，鍵是需要觀察的表達(dá)式，值是對(duì)應(yīng)回調(diào)函數(shù)。主要用來(lái)監(jiān)聽(tīng)某些特定數(shù)據(jù)的變化，從而進(jìn)行某些具體的業(yè)務(wù)邏輯操作；

6、Watch與Computed的使用場(chǎng)景

• computed 　　　

  • 當(dāng)一個(gè)結(jié)果受多個(gè)屬性影響的時(shí)候就需要用到computed

  • 最典型的例子： 購(gòu)物車(chē)商品結(jié)算的時(shí)候

• watch

  • 當(dāng)一個(gè)數(shù)據(jù)的變化需要有額外操作的時(shí)候就需要用watch

  • 搜索數(shù)據(jù)

• 總結(jié)：

  • 一個(gè)值的結(jié)果受其他值的影響，用computed

  • 一個(gè)值的變化將時(shí)刻影響其他值，用watch

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。