watch监听的几种写法

1.直接监听单个字符串的变化
//value就是需要监听的变量watch:{value(){console.log('1321321321',this.value);}},//带参数的watch:{value(newVal,oldVal){console.log('1321321321',newVal,oldVal);}},
   watch:{'value': {immediate: true,deep:true,handler (val) {}}},
    watch:{value: {immediate: true,deep:true,handler (newVal) {console.log('newVal',newVal);}}},
2.监听数组的变化

2.1如果只是想监听数组的长度变化，普通监听即可
watch: {list:{handler(newVal,oldVal){console.log(newVal,oldVal);},}
},
2.2监听里面的值变化，需要深度监听deep: true，后面发现监听数组不加deep也可以
 watch: {list:{handler(newVal,oldVal){console.log(newVal,oldVal);//新旧值不同},deep: true,}
},
3.监听对象的变化，需要深度监听，用到deep属性

3.1监听整个对象的变化
 watch: {obj: {handler(newValue, oldValue) {console.log(newValue,oldValue)//打印出的新旧值一样，后面内容会解决这个新旧值一样的问题
},// 这里是关键，代表递归监听 obj 的变化deep: true}
},
3.2监听对象中的某个属性变化，

immediate表示在watch中首次绑定的时候，是否执行handler,设置为true则首次就执行

数组（一维、多维）的变化不需要通过深度监听，对象数组中对象的属性变化则需要deep深度监听。

遇到问题：监听对象时新旧值一样

问题描述：监听对象时新旧值一样

出现原因：

解决方案：

1方法一：使用computed属性将当前的对象进行深拷贝监听computed的值，代码如下：
computed:{newObj(){return JSON.parse(JSON.stringify(this.obj));}},//添加obj对象的变化watch: {newObj:{handler(newVal,oldVal){console.log(newVal,oldVal);//此时输出的新旧值不同了},deep:true  }
},
方法二：set方法后续更新

watch监听的几种写法相关推荐

common-io-2.0的新功能之文件监控FileAlteration（文件监听的两种实现方法《很全的监听文件例子》）...
common-io-2.0的新功能之文件监控FileAlteration(文件监听的两种实现方法<很全的监听文件例子>) 转载于:https://www.cnblogs.com/rocky ...
℃江让您从精通到入门：OnClick事件监听的几种方式
笔译笔,不如人之比,见一见,不与人为鉴.苍天下, 弃细雨,混泪难断谁更惆:苍穹再,散绸绫,铺洒漫染何出犹. 今天笔者来说下Android中OnClick事件监听的几种书写方式. 匿名内部类的方式 pa ...
android Button 监听的几种方式
android button控件目前主要有如下几种监听方式: 一个button控件对应一个监听: [java] view plaincopy Button buttontest; buttontest ...
王立平--android事件监听的3种方式
第一种通常在activity组件的oncreate事件中直接定义,直接动作. 这样的方式每一个控件都定义一次.通常不方便. Button btn = (Button) findViewById(R.i ...
android让跟布局优先响应点击事件,andorid事件监听的五种方式
一.Android中的事件处理方法事件处理:响应用户UI动作,提高应用程序交互性 1.基于监听的事件处理机制 2.基于回调的事件处理机制 3.Handler消息处理二.基于监听的事件处理机制详解 ...
vue2.0 -- watch监听
watch监听的几种写法: <html> watch: {// 适用于普通变量a: function (val) {console.log(000) ...
[已验证]双卡手机下两种来电监听方法的一些问题。
为什么80%的码农都做不了架构师?>>> 首先,网上学习到的来电监听有两种方法,但在双卡手机上都不太正常工作. 经过用户的反馈,基本上都能监听到大部分主流双卡手机的主副卡来电了 ...
深究AngularJS——监听模型$watch
前言 1.$watch是scope内置的函数,它的作用是用来监听数据的变化. 2.$watch可监听哪些数据? 单个对象的属性需要计算的结果(函数) 3. 语法: $scope.$watch(F,M ...
Android 截屏监听（截图分享功能实现）
具体来说就是,检测到了用户在应用内有截图,弹出一个分享界面, 在截图下方添加一个二维码,进行分享. ●●● 前言 Android系统没有直接对截屏事件监听的接口,也没有广播,只能自己动手来丰衣足食, ...

watch监听的几种写法

watch监听的几种写法相关推荐

最新文章

热门文章