在 Vue.js 中，watch 屬性是一種非常重要的屬性，它可以監聽(tīng) Vue 實(shí)例中指定的數據變化，并在數據發(fā)生變化時(shí)執行相應的操作。本文將對 Vue.js 中的 watch 屬性進(jìn)行詳細的介紹，并附上相關(guān)的代碼示例。

什么是 watch 屬性？

在 Vue.js 中，watch 屬性被定義為一個(gè)對象，它可以用來(lái)監聽(tīng) Vue 實(shí)例中的數據變化。當監聽(tīng)的數據發(fā)生變化時(shí)，watch 屬性可以執行指定的回調函數，從而實(shí)現對數據變化的響應。

watch 屬性的基本語(yǔ)法如下所示：

// 監聽(tīng)一個(gè)數據的變化

watch: {

targetData: {

handler(newVal, oldVal) {

// 數據發(fā)生變化時(shí)執行的操作

},

deep: true, // 是否深度監聽(tīng)

immediate: true, // 是否在組件創(chuàng )建時(shí)立即執行回調函數

},

},

在上述代碼中，targetData 表示要監聽(tīng)的數據，handler 表示數據發(fā)生變化時(shí)執行的回調函數。deep 和 immediate 分別表示是否深度監聽(tīng)和是否在組件創(chuàng )建時(shí)立即執行回調函數。

watch 屬性的用途

watch 屬性的主要用途是監聽(tīng) Vue 實(shí)例中的數據變化，并在數據發(fā)生變化時(shí)執行相應的操作。例如，在一個(gè)購物車(chē)組件中，我們可以使用 watch 屬性監聽(tīng)購物車(chē)中的商品數量變化，并在商品數量變化時(shí)重新計算購物車(chē)總價(jià)。

此外，watch 屬性還可以用來(lái)監聽(tīng)組件中的數據變化，并進(jìn)行一些數據驗證和數據同步操作。例如，在一個(gè)表單組件中，我們可以使用 watch 屬性監聽(tīng)用戶(hù)輸入的數據，并在數據發(fā)生變化時(shí)進(jìn)行數據驗證和數據同步操作，從而增強表單的交互性和可用性。

watch 屬性的深度監聽(tīng)

在 Vue.js 中，watch 屬性可以進(jìn)行深度監聽(tīng)，這意味著(zhù)當監聽(tīng)的數據是一個(gè)對象或數組時(shí)，它會(huì )遞歸地監聽(tīng)對象或數組中的每一個(gè)屬性和元素的變化。

例如，在下面的代碼中，我們使用 watch 屬性對一個(gè)對象進(jìn)行深度監聽(tīng)：

watch: {

obj: {

handler(newVal, oldVal) {

console.log('obj changed:', newVal, oldVal);

},

deep: true,

},

},

在上述代碼中，當對象 obj 中的任意一個(gè)屬性發(fā)生變化時(shí)，都會(huì )觸發(fā)回調函數，從而輸出相應的日志信息。

需要注意的是，在進(jìn)行深度監聽(tīng)時(shí)，由于監聽(tīng)的數據結構比較復雜，可能會(huì )導致性能問(wèn)題，因此建議在進(jìn)行深度監聽(tīng)時(shí)，盡量避免監聽(tīng)過(guò)深的層次。

watch 屬性的立即執行

在 Vue.js 中，watch 屬性可以設置立即執行（immediate: true），這意味著(zhù)在組件創(chuàng )建時(shí)立即執行回調函數，而不需要等待數據發(fā)生變化。

例如，在下面的代碼中，我們使用 watch 屬性監聽(tīng)一個(gè)數據，并在組件創(chuàng )建時(shí)立即執行回調函數：

watch: {

data: {

handler(newVal, oldVal) {

console.log('data changed:', newVal, oldVal);

},

immediate: true,

},

},

在上述代碼中，當組件創(chuàng )建時(shí)，就會(huì )立即執行回調函數，并輸出相應的日志信息。

需要注意的是，在進(jìn)行立即執行時(shí)，由于回調函數會(huì )在組件創(chuàng )建時(shí)被執行，因此需要確保監聽(tīng)的數據已經(jīng)被初始化，否則可能會(huì )導致回調函數的執行出錯。

watch 屬性的銷(xiāo)毀

在 Vue.js 中，watch 屬性會(huì )在組件銷(xiāo)毀時(shí)自動(dòng)銷(xiāo)毀，這意味著(zhù)當組件被銷(xiāo)毀時(shí)，watch 屬性也會(huì )被自動(dòng)銷(xiāo)毀。這種自動(dòng)銷(xiāo)毀的機制可以有效地避免內存泄漏問(wèn)題。

例如，在下面的代碼中，我們使用 watch 屬性監聽(tīng)一個(gè)數據，并在組件銷(xiāo)毀時(shí)自動(dòng)銷(xiāo)毀：

export default {

data() {

return {

data: '',

};

},

watch: {

data: {

handler(newVal, oldVal) {

console.log('data changed:', newVal, oldVal);

},

},

},

beforeDestroy() {

// 組件銷(xiāo)毀前自動(dòng)銷(xiāo)毀 watch 屬性

this.$watch();

},

};

在上述代碼中，我們通過(guò) beforeDestroy 鉤子函數，在組件銷(xiāo)毀前手動(dòng)銷(xiāo)毀 watch 屬性，以避免內存泄漏問(wèn)題。

watch 屬性的使用示例

下面通過(guò)一個(gè)實(shí)際的示例來(lái)演示如何使用 watch 屬性。

監聽(tīng)數據變化

在下面的代碼中，我們使用 watch 屬性監聽(tīng)一個(gè)數據的變化，并在數據發(fā)生變化時(shí)輸出相應的日志信息：

<>

export default {

data() {

return {

text: '',

};

},

watch: {

text: {

handler(newVal, oldVal) {

console.log('text changed:', newVal, oldVal);

},

},

},

};

在上述代碼中，我們使用 watch 屬性監聽(tīng)輸入框中的文本變化，并在文本發(fā)生變化時(shí)輸出相應的日志信息。

深度監聽(tīng)數據變化

在下面的代碼中，我們使用 watch 屬性深度監聽(tīng)一個(gè)對象的變化，并在數據發(fā)生變化時(shí)輸出相應的日志信息：

<>

export default {

data() {

return {

user: {

name: '',

age: '',

},

};

},

watch: {

user: {

handler(newVal, oldVal) {

console.log('user changed:', newVal, oldVal);

},

deep: true,

},

},

};

在上述代碼中，我們使用 watch 屬性深度監聽(tīng)一個(gè)對象 user 的變化，并在對象中的任意一個(gè)屬性發(fā)生變化時(shí)輸出相應的日志信息。

立即執行回調函數

在下面的代碼中，我們使用 watch 屬性設置立即執行，并在組件創(chuàng )建時(shí)輸出相應的日志信息：

<>

export default {

data() {

return {

text: '',

};

},

watch: {

text: {

handler(newVal, oldVal) {

console.log('text changed:', newVal, oldVal);

},

immediate: true,

},

},

};

在上述代碼中，我們使用 watch 屬性設置立即執行，并在組件創(chuàng )建時(shí)輸出文本的初始值。

總結

本文對 Vue.js 中的 watch 屬性進(jìn)行了詳細的介紹，包括 watch 屬性的基本語(yǔ)法、用途、深度監聽(tīng)、立即執行和銷(xiāo)毀等相關(guān)內容。通過(guò)本文的學(xué)習，相信讀者已經(jīng)對 watch 屬性有了更加深入的理解，可以在實(shí)際的開(kāi)發(fā)中更加靈活地運用 watch 屬性來(lái)實(shí)現數據的監聽(tīng)和響應。

文獻摘自 CSDN