const vm = Vue.createApp({
data(){
return {
msg:'tom',//Basic data type, stored in the stack memory
user:{//Reference data type, store it in heap memory
id:'0001',
username:'admin',
password:'0123'
}
}
},
watch:{//Method 1: Pass the watch option
msg:function(new_value,old_value){
console.log('The original value is:',old_value,'New value:',new_value)
},
user:{
handler:function(new_value){ console.log('user was modified:',new_value)},//Monitoring method
deep:true,// Turn on deep monitoring, and when the properties in the object change, it will also be monitored.
immediate:true//Trigger immediately
},
'':{//Only monitor properties in the object
handler:function(new_value){ console.log('user was modified:',new_value)},//Monitoring method
deep:true,// Turn on deep monitoring, and when the properties in the object change, it will also be monitored.
immediate:true//Trigger immediately
}
},
}).mount('#app')
//Method 2:
let unwathc = vm.$watch('user',function(new_value){
console.log('user was modified:',new_value)
if(new_value.username == 'abc'){
console.log('Cancel monitoring');
unwathc();//Cancel monitoring
}
},{
deep:true,
immediate:true
})//Presponding objects
