<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, Initial-scale =1.0"> <title> $watch</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="app"> <input type="text" v-model="name"> <h3>{{name}}</h3> <hr> <input type="text" v-model="age"> <h3>{{age}}</h3> <hr> <input type="text" v-model="user.name"> <h3>{{user.name}}</h3> <! -- <input type="text" v-model="user.links.link"> <h3>{{user.links.link}}</h3> --> </div> <script> var vm = new Vue({ El :'#app', data(){return {name:' Tom ', age:20, user:{name:'song', age:10}}}, Watch :{age:function(newVal,oldVal){console.log('age changed,old '+oldVal+' new: '+ newVal); }, // age:(newVal,oldVal)=>{ }, // age(newVal,oldVal){} // 'user.name':function(newVal,oldVal){// console.log('user.name 'is changed,oldVal +' is changed: ' + newVal); // }, user:{ handler(newVal,oldVal){ debugger console.log('newVal',newVal); console.log('oldVal',oldVal); BeforeMount (){}, mounted(){}), beforeMount(){}, mounted(){}); $watch('name',function(newVal,oldVal){console.log('name changed,old '+oldVal+' new: '+ newVal); }) </script> </body> </html>Copy the code