监听器watch
实时监视数据变化,执行一些业务逻辑或异步操作,一旦监听的数据变化了立马执行
-
watch声明在跟data同级的配置项中
-
两种写法
-
简单类型数据直接监听(使用的是方法的写法)
watch: { // 该方法会在数据变化时,触发执行 数据属性名 (newValue, oldValue) { 一些业务逻辑 或 异步操作。 }, '对象.属性名' (newValue, oldValue) { 一些业务逻辑 或 异步操作。 } }
eg:
data: { num: 0, obj: { num: 0 } }, watch: { // 该方法会在数据变化时,触发执行 // 接收一个新值一个旧值,只要新值可以省略旧值参数 num (newValue, oldValue) { 一些业务逻辑 或 异步操作。 }, // js中属性名有特殊字符需要加引号 'obj.num' (newValue, oldValue) { 一些业务逻辑 或 异步操作。 } }
-
添加额外的配置项(使用的是对象的写法)
deep: true
对复杂类型进行深度的监听,比如对象中的所有属性immdiate: true
初始化,进入页面立即执行一次
watch: {// watch 完整写法 对象: { deep: true, // 深度监视 immdiate:true,//立即执行handler函数 handler (newValue) { // 处理逻辑 console.log(newValue) } } }
eg:
data: { obj: { num: 0, money: 0 } }, watch: { obj: { deep: true, // 深度监视 immdiate:true,//立即执行handler函数 handler (newValue) { // 处理逻辑 console.log(newValue) } } }
-