一个对象,键是需要观察的表达式,值是对应回调函数。值也可以是方法名,或者包含选项的对象。Vue 实例将会在实例化时调用 $watch(),遍历 watch 对象的每一个属性。
<body> <div id="app"> <input type="text" v-model="num"> </div> <script src="vue.js"></script> <script> new Vue({ el: '#app', data: { num: '' }, watch: { num(newVal, oldVal) { // 监听 num 属性的数据变化 // 作用 : 只要 num 的值发生变化,这个方法就会被调用 // 第一个参数 : 新值 // 第二个参数 : 旧值,之前的值 console.log('oldVal:',oldVal) console.log('newVal:',newVal) } } }) </script> </body>
<input type="text" v-model="cityName.name"/> new Vue({ el: '#root', data: { cityName: {id: 1, name: 'shanghai'} }, watch: { cityName: { handler(newName, oldName) { // ... }, deep: true, immediate: true } } })
watch
时有一个特点,就是当值第一次绑定的时候,不会执行监听函数,只有值发生改变才会执行。如果我们需要在最初绑定值的时候也执行函数,则就需要用到immediate
属性。
new Vue({ el: '#root', data: { cityName: '' }, watch: { cityName: { handler(newName, oldName) { // ... }, immediate: true } } })
对象和数组都是引用类型,引用类型变量存的是地址,地址没有变,所以不会触发watch。这时我们需要进行深度监听,就需要加上一个属性 deep,值为 true
new Vue({ el: '#root', data: { cityName: {id: 1, name: 'shanghai'} }, watch: { cityName: { handler(newName, oldName) { // ... }, deep: true, immediate: true } } })