1、vue3數(shù)組監(jiān)控的問題

vue3中使用監(jiān)控器 watch 能夠完成一些基本類型數(shù)據(jù)的監(jiān)控，但是如果碰到復(fù)雜類型的數(shù)據(jù)，除了直接給變量的賦值操作，元素的添加和改變（包括長度變化）普通watch是監(jiān)控不到的。

這里的復(fù)雜類型包括對象和數(shù)組。

使用 vue3給出一個示例程序：

<template>
	<div>
		<div><button @click="change">按鈕1</button></div>
        <div><button @click="change2">按鈕2</button></div>
	</div>
</template>
 
<script>
	export default{
		data() {
			return {
				msg1: 1,
				msg2: "test",
				msg3: ["Tom","Jerry","Spiker"],
				msg4: {a: "你好"}
			}
		},
		methods: {
			change(){
				this.msg1 += 1
				this.msg2 += 1
				this.msg3.push("Rose")
				this.msg4.b = "你也好"
			},
            change2(){
				this.msg3 = ["Tom and Jerry"]
				this.msg4 = {a: "你也好！"}
			}
		},
		watch: {
			msg1 (newValue, oldValue) {
				console.log("msg1 change")
			},
			msg2 (newValue, oldValue) {
				console.log("msg2 change")
			},
			msg3 (newValue, oldValue) {
				console.log("msg3 change")
			},
			msg4 (newValue, oldValue) {
				console.log("msg4 change")
			}
		}
	}
</script>
 
<style>
</style>

點(diǎn)擊按鈕1，程序的打印結(jié)果為：

說明 msg3和 msg4變量的元素添加確實(shí)沒有監(jiān)聽到。

點(diǎn)擊按鈕2，程序打印結(jié)果為：

說明數(shù)組和對象的直接賦值操作是可以被 watch 監(jiān)聽到的。

那么為什么普通 watch 沒有提供對數(shù)組和對象的元素變化的監(jiān)聽呢？ 問題原文。簡而言之就是將基本類型的數(shù)據(jù)和復(fù)雜類型的數(shù)據(jù)做了區(qū)分，以避免復(fù)雜數(shù)據(jù)對于性能的損耗(個人理解)。

2、解決方案

2.1 vue版本

網(wǎng)上有些文章給出的解決辦法是通過 this.$set() 來指定數(shù)組下標(biāo)元素的變化，那么這樣就可以直接使用 watch 來進(jìn)行監(jiān)聽。但是沒有寫清楚，這是vue2的解決辦法(也可能那些博主在寫那些文章時vue3還沒有發(fā)布)。

總之，vue3響應(yīng)式數(shù)據(jù)的實(shí)現(xiàn)方法是和vue2不同的。比如上面的代碼，如果是vue2的話，是可以實(shí)現(xiàn) arr.push() 方法的監(jiān)控，但是下標(biāo)元素的改變，比如 arr[ index] = item 是實(shí)現(xiàn)不了的，所以需要監(jiān)控的數(shù)組變量使用 this.$set() 來改變下標(biāo)元素才能被 watch 監(jiān)控到。

這篇文章只給出功能描述和寫法，想弄清楚這種差別原因的需要去研究 vue2和vue3響應(yīng)式實(shí)現(xiàn)原理的不同。喜歡的同學(xué)可以去研究一下源碼。

2.2 vue3選項(xiàng)式api深度監(jiān)控的寫法

vue3的數(shù)據(jù)響應(yīng)是基于代理 proxy,所以取消了 this.$set()的使用，但是引入深度監(jiān)控的寫法。所以 vue3可以通過 watch的深度監(jiān)控來實(shí)現(xiàn)數(shù)組和對象變化的響應(yīng)。

這里修改一下上面的代碼，將 msg3和 msg4的監(jiān)控器改成：

msg3: {
	deep: true,
	handler(newValue, oldValue) {
		console.log("msg3 change")
	}
},
msg4 : {
	deep: true,
	handler(newValue, oldValue) {
		console.log("msg4 change")
    }
}

重新點(diǎn)擊一下按鈕1 ，打印結(jié)果變成：

實(shí)現(xiàn)了對于數(shù)組和對象的內(nèi)容元素監(jiān)控。

3、結(jié)論

vue3要實(shí)現(xiàn)數(shù)組監(jiān)控的話，可以使用深度監(jiān)控來實(shí)現(xiàn)。

以上為個人經(jīng)驗(yàn)，希望能給大家一個參考，也希望大家多多支持腳本之家。

最新評論