vue中的watch使用方式

<el-input type="text" v-model="numberValidateForm" autocomplete="off"></el-input>
<div>{{numberPhone}}</div>

export default{
	data(){
		return{
		numberPhone:'',
		numberValidateForm:'121454',
		object:{
		d:''
		}
		}
	},
	// handler和immediate的配合使用起到的作用就是马上会执行一次当前对象属性
	// immediate的值改为false后，该对象就只有触发的时候才会执行
	//第一种方式
		watch: { 
		    numberValidateForm: {
				handler(newName, oldName){
					this.numberPhone = ’已改变数据‘
				},
		      immediate: true
		    }
		  },
	//第二种方式
	//这方式就是只有数据改变的时候才会触发
	  watch:{
		numberValidateForm(newName,oldName) {
			return this.numberPhone = ’已改变数据‘
			} 
		  }，
	//第三种方式监听对象属性改变（深度监听deep）
	//监听整个对象有缺点，比较耗费性能
	watch:{
			 object:{
				handler(newName, oldName){
				console.log('newVal-obj.a', this.object.d);
				console.log('oldVal-obj.b', this.object.d);		
				},
				deep:true
			 },
	//优化后(监听对应的对象属性)
	 'object.a':{
				handler(newName, oldName){
				console.log('newVal-obj.a', this.object.d);
				console.log('oldVal-obj.b', this.object.d);		
				},
				immediate: true, //立即执行一次
				deep:true
			 }
		 },
}