快捷導(dǎo)航

vue3選項(xiàng)式api如何監(jiān)控?cái)?shù)組變化

更新時(shí)間：2024年06月07日 08:59:52 作者：loggers_kid

這篇文章主要介紹了vue3選項(xiàng)式api如何監(jiān)控?cái)?shù)組變化問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教

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

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

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

使用 vue3給出一個(gè)示例程序：

<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ù)組和對(duì)象的直接賦值操作是可以被 watch 監(jiān)聽到的。

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

2、解決方案

2.1 vue版本

網(wǎng)上有些文章給出的解決辦法是通過 this.$set() 來指定數(shù)組下標(biāo)元素的變化，那么這樣就可以直接使用 watch 來進(jìn)行監(jiān)聽。但是沒有寫清楚，這是vue2的解決辦法(也可能那些博主在寫那些文章時(shí)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ù)組和對(duì)象變化的響應(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é)果變成：