<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> <title>watch</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js" type="text/javascript" charset="utf-8"></script> </head> <body> <div id="app"> <input type="text" v-model="test" /> </div> </body> </html> <script type="text/javascript" charset="utf-8"> var app = new Vue({ el: "#app", data: { test: '', }, watch: { /* 注意:oldval是新值而newval是旧值 */ test(newval, oldval) { console.log('旧值:' + oldval + '====新值:' + newval) }, } }); </script>
immediate和handler
我们需要在最初绑定值的时候也执行函数,则就需要用到immediate属性。
比如当父组件向子组件动态传值时,子组件props首次获取到父组件传来的默认值时,也需要执行函数,此时就需要将immediate设为true。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> <title>watch</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js" type="text/javascript" charset="utf-8"></script> </head> <body> <div id="app"> <input type="text" v-model="test" /> </div> </body> </html> <script type="text/javascript" charset="utf-8"> var app = new Vue({ el: "#app", data: { test: 'hello', }, watch: { /* 注意:oldval是新值而newval是旧值 */ test: { handler(newval, oldval) { console.log('旧值:' + oldval + '====新值:' + newval) }, immediate: true } } }); </script>
监听的数据后面写成对象形式,包含handler方法和immediate,之前我们写的函数其实就是在写这个handler方法;
immediate表示在watch中首次绑定的时候,是否执行handler,值为true则表示在watch中声明的时候,就立即执行handler方法,值为false,则和一般使用watch一样,在数据发生变化的时候才执行handler。
deep
当需要监听一个对象的改变时,普通的watch方法无法监听到对象内部属性的改变,只有data中的数据才能够监听到变化,此时就需要deep属性对对象进行深度监听。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> <title>watch</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js" type="text/javascript" charset="utf-8"></script> </head> <body> <div id="app"> <input type="text" v-model="test.name" /> </div> </body> </html> <script type="text/javascript" charset="utf-8"> var app = new Vue({ el: "#app", data: { test: { id: 1, name: 'hello' }, }, watch: { /* 注意:oldval是新值而newval是旧值 */ test: { handler(newval, oldval) { console.log('test旧值:' + oldval + '====test新值:' + newval) }, deep: true, immediate: true }, 'test.name': { handler(newval, oldval) { console.log('name旧值:' + oldval + '====name新值:' + newval) }, // deep: true, immediate: true }, } }); </script>