watch侦听器
watch侦听器允许开发者监视数据的变化，从而针对数据的变化做特定的操作
语法格式：
const v = new Vue({ el: "#app", data: { username: '' }, watch: { //监听username的变化 // newVal变化之后的值，oldVal变化之前的值 username( newVal, oldVal ) { console.log(newVal, oldVal); } } })
示例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div id="app"> <input type="text" v-model="username"> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> <script> const v = new Vue({ el: "#app", data: { username: '' }, watch: { //监听username的变化 // newVal变化之后的值，oldVal变化之前的值 username( newVal, oldVal ) { console.log(newVal, oldVal); } } }) </script> </body> </html>
侦听器注意点
1.所有的侦听器要定义在watch节点下
2.侦听器本质为函数，要监视哪个数据的变化就把数据名作为方法名即可
3.侦听器的参数，新值在前，旧值在后
对象格式的侦听器
对象格式的侦听器可以通过immediate让侦听器自动触发
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div id="app"> <input type="text" v-model="username"> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> <script> const v = new Vue({ el: "#app", data: { username: '1' }, watch: { // 对象格式的侦听器 username: { // 侦听器的处理函数 handler(newVal, oldVal) { console.log(newVal, oldVal); }, // 默认值为false，要一开始就触发，值填true immediate: true } } }) </script> </body> </html>
深度侦听
侦听的是一个对象，对象中的属性发生变化不会触发侦听器
解决：
1.开启深度监听，只要对象中的属性发生变化就会触发侦听器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div id="app"> <input type="text" v-model="info.username"> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> <script> const v = new Vue({ el: "#app", data: { // 用户信息对象 info: { username: '1' } }, watch: { // 对象格式的侦听器 info: { // 侦听器的处理函数 handler(newVal) { console.log(newVal); }, // 开启深度侦听 deep: true } } }) </script> </body> </html>
2.侦听对象的属性
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div id="app"> <input type="text" v-model="info.username"> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> <script> const v = new Vue({ el: "#app", data: { // 用户信息对象 info: { username: '1' } }, watch: { //侦听对象的属性 //侦听对象的属性，必须包裹单引号 'info.username'(newVal, oldVal) { console.log(newVal, oldVal); } } }) </script> </body> </html>
