很多人习惯用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
