immediate设为true后,则监听的这个对象会当即输出,也就是说一刷新页面就会在控制台输出,固然此时页面上的数据咱们还没来得及手动让其发生变化,因此在控制台输出的newValue为咱们在代码中默认设置的值,oldValue输出为“undefined”。如code
当咱们手动改变newValue.id的值后,输出以下:对象
若是不设置immediate,或者将immediate设为false的话,则刷新页面后不会当即监听此对象,也就是控制台不会有输出,必需要监听的对象有值改变时控制台才会有输出。input
data() { return { value:'' }; }, watch:{ value:{ handler:'init', immediate:true } }, methods: { init(){ alert(1) } }
deep设为true后,就能够深刻监听了。简单点说,就是能够监听到对象里面的值的变化了it
<div> <input type="text" v-model="student.studentName">{{student.studentName}} </div> student:{ studentName:'xi' } watch:{ student:{ handler:function (newValue,oldValue) { console.log(newValue,'new') console.log(oldValue,'old') }, deep:true, immediate:true } } 不加deep监听不到改变