很多人习惯用watch,但是却很少有人知道watch的真正触发条件。如果不是对vue原理了如指掌,请谨慎使用watch。
示例1,下面会触发watch 吗?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
<script>
new vue({
data() {
return {
city: {id: 1, name: 'beijing' }
}
},
watch: {
city() {
console.log( 'city changed' )
}
},
created() {
this .city = {id: 1, name: 'beijing' }
}
})
</script>
|
会触发,因为在created方法里面重新给city赋值了一个对象,city前后的指向不同了
示例2:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
<script>
new vue({
data() {
return {
city: {id: 1, name: 'beijing' }
}
},
watch: {
city() {
console.log( 'city changed' )
}
},
created() {
this .city.name = 'shanghai'
}
})
</script>
|
不会触发, 因为created方法执行之后, city的指向没有变
如果我们期望捕获这种更新,应该这样写代码:
1
2
3
4
5
6
|
watch: {
city: {
handler: () => console.log( 'city changed' ),
deep: true
}
}
|
将选项deep设为true能让vue捕获对象内部的变化。
下面讨论一下watch一个数组:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
<script>
new vue({
el: '#body' ,
data() {
return {
cities: [ 'beijing' , 'tianjin' ]
}
},
watch: {
cities() {
console.log( 'cities changed' )
}
}
})
</script>
|
那下面哪些操作会触发cities的watch回调呢?
1
2
3
4
5
6
7
8
|
this .cities = [ 'beijing' , 'tianjin' ]
this .cities.push( 'xiamen' )
this .cities = this .cities.slice(0, 1)
this .cities.pop();
this .cities.sort((a,b)=>a.localecompare(b));
this .cities[0] = 'shenzhen'
this .cities.splice(0, 1)
this .cities.length = 0
|
答案是只有最后三行不会触发。
补充知识:vue 深度watch与watch立即触发回调
基础用法
搜索框输入搜索关键字的时候,可以自动触发搜索,此时除了监听搜索框的change事件之外,我们也可以通过watch监听搜索关键字的变化。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
|
<template>
<div>
<span>搜索</span>
<input v-model= "searchval" />
</div>
</template>
<script>
export default {
data() {
return {
searchval: ''
}
},
watch: {
// 在值发生变化之后,重新加载数据
searchval(newvalue, oldvalue) {
if (newvalue !== oldvalue) {
this .loaddata()
}
}
},
methods: {
loaddata() {
// 重新加载数据,此处需要通过函数防抖
}
}
}
</script>
|
立即触发
通过上面的代码,现在已经可以在值发生变化的时候触发加载数据了,但是如果要在页面初始化时候加载数据,我们还需要在created或者mounted生命周期钩子里面再次调用loaddata方法。不过,现在可以不用这样写了,通过配置watch的立即触发属性,就可以满足了。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
export default {
watch: {
// 在值发生变化之后,重新加载数据
searchvalue: {
// 通过handler来监听属性变化, 初次调用 newvalue为""空字符串, oldvalue为 undefined
handler(newvalue, oldvalue) {
if (newvalue !== oldvalue) {
this .loaddata()
}
},
// 配置立即执行属性
immediate: true
}
}
}
|
深度监听
一个表单页面,需求希望用户在修改表单的任意一项之后,表单页面就需要变更为被修改状态。如果按照上例中watch的写法,那么我们就需要去监听表单每一个属性,太麻烦了,这时候就需要用到watch的深度监听deep
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
export default {
data() {
return {
formdata: {
name: '' ,
sex: '' ,
age: 0,
deptid: ''
}
}
},
watch: {
// 在值发生变化之后,重新加载数据
formdata: {
// 需要注意,因为对象引用的原因, newvalue和oldvalue的值一直相等
handler(newvalue, oldvalue) {
// 在这里标记页面编辑状态
},
// 通过指定deep属性为true, watch会监听对象里面每一个值的变化
deep: true
}
}
}
|
随时监听,随时取消,了解一下$watch
有这样一个需求,有一个表单,在编辑的时候需要监听表单的变化,如果发生变化则保存按钮启用,否则保存按钮禁用。
这时候对于新增表单来说,可以直接通过watch去监听表单数据(假设是formdata),如上例所述,但对于编辑表单来说,表单需要回填数据,这时候会修改formdata的值,会触发watch,无法准确的判断是否启用保存按钮。现在你就需要了解一下$watch
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
|
export default {
data() {
return {
formdata: {
name: '' ,
age: 0
}
}
},
created() {
this .$_loaddata()
},
methods: {
// 模拟异步请求数据
$_loaddata() {
settimeout(() => {
// 先赋值
this .formdata = {
name: '子君' ,
age: 18
}
// 等表单数据回填之后,监听数据是否发生变化
const unwatch = this .$watch(
'formdata' ,
() => {
console.log( '数据发生了变化' )
},
{
deep: true
}
)
// 模拟数据发生了变化
settimeout(() => {
this .formdata.name = '张三'
}, 1000)
}, 1000)
}
}
}
|
根据上例可以看到,我们可以在需要的时候通过this.$watch来监听数据变化。那么如何取消监听呢,上例中this.$watch返回了一个值unwatch,是一个函数,在需要取消的时候,执行 unwatch()即可取消
以上这篇浅谈vue.watch的触发条件是什么就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持服务器之家。
原文链接:https://blog.csdn.net/tcy9099/article/details/96145229