[Frontend Note] Using watch in Vue to listen for data changes

Preface

The project I’m currently working on needs to migrate from Vue2.6 to Vue3.0, so I’m taking this chance to record the differences between the two.

watch in Vue2.x

Simple form

Suppose the value to observe is testData.

data(){
return {
		testData:0
	}
},
watch:{
	testData:(newValue, oldValue){
		console.log("data changed")
	}
}

Full form

Suppose the value to observe is testData.

data(){
return {
		testData:0
	}
},
watch:{
	testData:{
		immediate:true, //listen immediately (run on the first render)
		handler:(newValue, oldValue){
			//watch callback
			console.log(newValue)
		}
	}
}

watch in Vue3.0

Watching a single ref-defined reactive value

Suppose the value to observe is testData.

setup(){
	const testData = ref(0)
	watch(testData, (newValue, oldValue)=>{
		console.log("testData changed", newValue)
	})
	return {testData}
}

p.s. The immediate and deep options can also be used; in most cases, watch inside setup is immediate.

watch(testData, (newValue, oldValue)=>{...}, {immediate:true, deep:true})

Watching multiple ref-defined reactive values

Suppose the values to observe are testData01 and testData02.

setup(){
	const testData01 = ref(0)
	const testData02 = ref("Hello Vue3")

	watch([testData01, testData02], (newValue, oldValue)=>{
		console.log("testData01 changed", newValue[0])
		console.log("testData02 changed", newValue[1])
	})
	return {testData01, testData02}
}

Watching all key-values of an object defined with reactive

Suppose the value to observe is tesObject.

setup(){
	const testOject = reactive({
		testData01 : 0,
		tsetData02 : "hello Vue3"
	})
	watch(testOject, (newValue, oldValue)=>{
		console.log("data changed", newValue, oldValue);
	})
	return {testOject}
}

However, this form cannot get the oldValue.

Watching a specific key-value of an object defined with reactive

Suppose the value to observe is testData01 inside tesObject.

setup(){
	const testOject = reactive({
		testData01 : 0,
		tsetData02 : "hello Vue3"
	})
	watch(()=>testOject.testData01,
		(newValue, oldValue)=>{
			console.log("data changed", newValue, oldValue);
		})

	return {testObject}
}

Watching a key-value of a reactive object where that value is itself an object

Suppose the value to observe is testDataObject inside tesObject.

setup(){
	const testOject = reactive({
		testData01 : 0,
		testData02 : "hello Vue3",
		testDataObject : {
			testData03:2022,
			testData04:"Thursday"
		}
	})
	watch(()=>testOject.testDataObject,
			(newValue, oldValue)=>{
				console.log("data changed", newValue, oldValue);
			},
			{deep : true}
		)
	return {testObject}
}

Deep watching must be enabled.

Watching props passed in from a parent component

Suppose the value to observe is testProps.

props:{
	testProps:{
		type:string,
		required:true
	}
},
setup(){
		watch(()=> testProps,
			(newValue, oldValue)=>{
				console.log("data changed", newValue, oldValue);
			},
			{deep : true}
		)
	return {testProps}
}

Deep watching must be enabled.

ChangeLog

• 20260501–translate by claude code

• ← Previous Post
• Next Post →