Vue侦听器监听对象中的属性

Vue的侦听器——watch

用法:

<template>
	<div>
		<span>监听form对象中的name属性</span>
		<span>{{form.name}}</span>
		<input type="button" value="点击改变" @click="setForm"/>
	</div>
</template>

<script>
export default{
	data(){
		return{
			form:{
				name:"小明",
				content:"内容",
			}
		}
	},
	methods:{
		setForm(){
			this.form.name="更改名称";
		}
	},
	watch:{
		"form.name"(newVal,beforeVal){
			console.log("新改变的value=>",newVal);
			console.log("未改变前的value",beforeVal);
		}
	}
}
</script>

---

监听要改变的对象值时,需要使用 " " 将key值包裹,否则在语法上会报错；