vue中watch侦听器
vue中watch侦听器
vue通过watch选项,提供一个通用的方法,用来响应数据的变化
常应用于,在数据变化时,执行异步或开销较大的操作
watch 是 一个对象
一、watch
键
watch的键,是对象key值,是需要观察的表达式
键类型
-
通常对象类型
- 例:- watch: { msg: 'msgChange' } - watch: { msg () { } }
-
字符串类型
可以实现监听对象当中的某一个属性- 例:- watch: {'personObj.name' () {console.log('123'); } }
值
值类型
-
函数类型
第一个参数- newVal- 被改变的数据
第二个参数- oldVal- 赋值新值之前的值 -
字符串类型
此时,值为:方法名字,被侦听的数据改变时,会执行该方法例:- watch: { msg: 'msgChange' }, methods: { msgChange () { console.log('123'); }}
-
对象类型
可以提供选项
(1)handler(必需)
是被侦听的数据改变时执行的回调函数
handler值类型为函数例:- watch: {msg: { handler () {console.log('msg的值改变啦'); } } }
handler值类型为字符串,此字符串是方法的名字
(2)deep
默认情况下,侦听器侦听对象, 只侦听引用的变化,只有在给对象赋值时,该对象才能被监听到
deep可以让侦听器发现对象内部值的变化
deep用于深度监听对象里面的属性,此时,只能打印新值,拿不到旧值
deep值为true,无论该对象被嵌套的有多深,都会被侦听到
例 :handler: function (newValue, oldValue) {
console.log('新值age', newValue);
console.log('旧值age', oldValue); },
deep: true
(3)immediate
回调将会在侦听开始之后立刻被调用,即:侦听器立即执行
例:- watch: {
msg: {
handler () { },
immediate: true} }
-
数组类型
可以将多种不同值类型,写在一个数组中例:- watch: { msg:[ 'msgChange1', function () {}, { handler () {}, deep: true, immediate: true} ]}
二、vm.$watch
Vue实例将会在实例化时调用$watch,用于遍历watch对象的每一个属性
侦听某个数据
-
三个参数
-
第一个参数- 被侦听的数据
-
第二个参数- 数据改变时执行的回调函数
-
第三个参数(可选)- 选项对象
-
-
二个参数
-
第一个参数- 被侦听的数据
-
第二个参数- 选项对象
- handler属性(必需)- 是数据改变时执行的回调函数 - 其他属性(可选)
-
侦听某个对象属性
- vm.$watch(‘obj.name’, /*参数同上/)
不确定侦听数据时
-
第一个参数- 写成函数类型
- 例: vm.$watch(function () { return this.a + this.b; }, function () {}, { deep: true, immediate: true })
vm.$watch返回
侦听函数执行后,会返回一个取消侦听函数,用来停止触发回调
带有immediate选项时,不能在第一次回调时取消侦听数据
三、Watch和computed的区别
缓存
Watch- 不支持缓存- 数据改变,直接会触发相应的操作
computed- 支持缓存- 依赖数据发生改变,才会重新求值
异步
Watch- 支持异步
computed- 不支持异步- 有异步操作时无效,无法监听数据的变化
监听
Watch- 只能监听- 一个变量(有子变量可以监听)- 可监听- 多个变量
处理场景
Watch- 擅长处理的场景是:一个数据影响多个数据
computed- 擅长处理的场景是:多个数据影响一个数据