?

目錄

一、watch的使用

1. 監(jiān)聽一個變量

2. 監(jiān)聽一個對象的屬性

3. 監(jiān)聽一個函數(shù)的返回值

二、watch的使用場景

1. 監(jiān)聽表單的變化

2. 監(jiān)聽路由參數(shù)的變化

3. 監(jiān)聽Vuex中的數(shù)據(jù)變化

三、watch的效果圖

四、watch的示例

以上就是Vue3的watch的介紹，watch是Vue3中非常重要的一個功能，可以幫助我們更好的監(jiān)聽數(shù)據(jù)變化，并執(zhí)行相應(yīng)的操作。

---

Vue3的watch是用于監(jiān)聽Vue實(shí)例中的數(shù)據(jù)變化并執(zhí)行相應(yīng)操作的功能。Vue3中對watch的使用進(jìn)行了優(yōu)化，并且提供了更強(qiáng)大的功能。下面將對Vue3的watch進(jìn)行詳細(xì)介紹。

一、watch的使用

在Vue3中，我們可以使用watch來監(jiān)聽數(shù)據(jù)的變化，從而執(zhí)行相應(yīng)的操作。watch有以下幾種使用方式：

1. 監(jiān)聽一個變量

在Vue3中，我們可以使用watch來監(jiān)聽一個變量的變化，當(dāng)這個變量發(fā)生改變時，就會執(zhí)行相應(yīng)的操作。具體代碼如下：

watch: {name: {handler(newVal, oldVal) {console.log('name變?yōu)?#xff1a;', newVal)}}
}

這段代碼中，我們監(jiān)聽name這個變量，當(dāng)name發(fā)生變化時，就會執(zhí)行handler函數(shù)。handler函數(shù)接收兩個參數(shù)，分別代表變化后的值和變化前的值。

2. 監(jiān)聽一個對象的屬性

在Vue3中，我們同樣可以使用watch來監(jiān)聽一個對象的屬性的變化。具體代碼如下：

watch: {"person.name": {handler(newVal, oldVal) {console.log('person.name變?yōu)?#xff1a;', newVal)}}
}

這段代碼中，我們監(jiān)聽person對象的name屬性，當(dāng)name屬性發(fā)生變化時，就會執(zhí)行handler函數(shù)。

3. 監(jiān)聽一個函數(shù)的返回值

在Vue3中，我們還可以使用watch來監(jiān)聽一個函數(shù)的返回值的變化。具體代碼如下：

watch: {fullName: {handler(newVal, oldVal) {console.log('fullName變?yōu)?#xff1a;', newVal)},immediate: true}
},
computed: {fullName() {return this.firstName + ' ' + this.lastName}
}

這段代碼中，我們監(jiān)聽computed中的fullName函數(shù)的返回值，當(dāng)fullName的返回值發(fā)生變化時，就會執(zhí)行handler函數(shù)。immediate為true表示在watch被建立后，立即執(zhí)行handler函數(shù)。?

二、watch的使用場景

1. 監(jiān)聽表單的變化

在Vue3中，我們可以使用watch來監(jiān)聽表單的變化。具體代碼如下：

watch: {formData: {handler(newVal, oldVal) {console.log('formData變?yōu)?#xff1a;', newVal)},deep: true}
},
data() {return {formData: {name: '',age: 18}}
}

這段代碼中，我們監(jiān)聽formData對象的變化，deep為true表示深度監(jiān)聽，也就是說，當(dāng)formData內(nèi)部的屬性發(fā)生變化時，也會觸發(fā)handler函數(shù)。

2. 監(jiān)聽路由參數(shù)的變化

在Vue3中，我們可以使用watch來監(jiān)聽路由參數(shù)的變化，從而執(zhí)行相應(yīng)的操作。具體代碼如下：

watch: {$route(to, from) {console.log('路由變化：', to, from)}
}

這段代碼中，我們監(jiān)聽$router對象的變化，當(dāng)路由發(fā)生變化時，就會觸發(fā)handler函數(shù)。

3. 監(jiān)聽Vuex中的數(shù)據(jù)變化

在Vue3中，我們可以使用watch來監(jiān)聽Vuex中的數(shù)據(jù)變化，從而執(zhí)行相應(yīng)的操作。具體代碼如下：

import { mapState } from 'vuex'export default {computed: {...mapState(['count'])},watch: {count(newVal, oldVal) {console.log('count變?yōu)?#xff1a;', newVal)}}
}

這段代碼中，我們監(jiān)聽Vuex中的count數(shù)據(jù)的變化，當(dāng)count發(fā)生變化時，就會觸發(fā)handler函數(shù)。

三、watch的效果圖

當(dāng)我們對監(jiān)聽的數(shù)據(jù)進(jìn)行修改時，就會觸發(fā)watch中的handler函數(shù)，從而執(zhí)行相應(yīng)的操作。


四、watch的示例

下面是一個完整的示例，演示了如何使用watch來進(jìn)行表單校驗。

<template><div><input v-model="formData.name" @input="handleInput"><input v-model="formData.age" @input="handleInput"><p v-show="errorMessage" style="color: red">{{ errorMessage }}</p></div>
</template><script>
export default {data() {return {formData: {name: '',age: ''},errorMessage: ''}},watch: {formData: {handler(newVal, oldVal) {if (newVal.name.trim() === '') {this.errorMessage = '姓名不能為空'} else if (newVal.age.trim() === '') {this.errorMessage = '年齡不能為空'} else if (!/^\d+$/.test(newVal.age)) {this.errorMessage = '年齡必須為數(shù)字'} else {this.errorMessage = ''}},deep: true}},methods: {handleInput() {this.$forceUpdate()}}
}
</script>

這段代碼中，我們使用watch來監(jiān)聽formData對象的變化，當(dāng)formData發(fā)生變化時，就會觸發(fā)handler函數(shù)。在handler函數(shù)中，我們判斷formData中的數(shù)據(jù)是否符合要求，如果符合要求就清空errorMessage，否則就設(shè)置errorMessage的值。在template中，我們根據(jù)errorMessage來顯示錯誤提示信息。

以上就是Vue3的watch的介紹，watch是Vue3中非常重要的一個功能，可以幫助我們更好的監(jiān)聽數(shù)據(jù)變化，并執(zhí)行相應(yīng)的操作。