标签：username vue newVal 侦听器 oldVal 侦听 id

侦听data里的数据变化：

方法格式：

<script>     const vm=new Vue({         el:"#app",         data:{             username:"张三",             userList:[                 {"id":1,"name":"张三"},                 {"id":2,"name":"李四"}             ],             info:{                 username:'admin'             }         },         //所有侦听都定义到watch里         watch:{             //本质是个函数，要监视那个数据的变化就把数据名作为方法名             username(newVal,oldVal){                 console.log(newVal,oldVal);             }, 　　　　//如果要侦听的是对象的子属性的变化,则必须包裹一层单引号 　　      'info.username'(newVal){                 console.log(newVal)               }         }         }) </script>

缺点1:无法在刚进入页面的时候,自动触发
缺点2:如果侦听的是一个对象,如果对象中的属性发生了变化,不会触发侦听器

对象格式

<script>     const vm=new Vue({         el:"#app",         data:{             username:"张三",             userList:[                 {"id":1,"name":"张三"},                 {"id":2,"name":"李四"}             ],             info:{                 username:'admin'             }         },         //所有侦听都定义到watch里         watch:{             //定义对象格式的侦听器             username:{                 handler(newVal,oldVal){                     console.log(newVal,oldVal);                 },                 //默认选项是false，作用：控制侦听器刚进页面是否自动触发一次                 immediate:true             },             userList:{                 handler(newVal,oldVal){                     console.log(newVal,oldVal);                 },                 //默认为false，开启深度监听,只要对象中任何一个属性变化了,都会触发对象的侦听器                 deep:true             }         }         }) </script>

好处1:可以通过immediate选项,让侦听器自动触发
好处2:可以通过deep选项,让侦听器深度监听对象中每个属性的变变化

标签：username,vue,newVal,侦听器,oldVal,侦听,id
From： https://www.cnblogs.com/wmqxlt/p/17285881.html