Vue中watch的详解

本文最后更新于：2 年前

Watch 概述

一个对象，键是需要观察的表达式，值是对应回调函数。值也可以是方法名，或者包含选项的对象。Vue 实例将会在实例化时调用 $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
<body>
<div id="app">
    <input type="text" v-model="num">
</div>
<script src="vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            num: ''
        },
        watch: {
            num(newVal, oldVal) {
            // 监听 num 属性的数据变化
    		// 作用 : 只要 num 的值发生变化,这个方法就会被调用
    		// 第一个参数 : 新值
    		// 第二个参数 : 旧值,之前的值
                console.log('oldVal:',oldVal)
                console.log('newVal:',newVal)
            }
        }
    })
</script>
</body>

immediate（立即处理 进入页面就触发）

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
<body>
<div id="app">
    <input type="text" v-model="num">
</div>
<script src="vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            num: 1
        },
        watch: {
            num: {
            	// 数据发生变化就会调用这个函数
                handler(newVal, oldVal) {
                    console.log('oldVal:', oldVal)
                    console.log('newVal:', newVal)
                },
                // 立即处理 进入页面就触发
                immediate: true
            }
        }
    })
</script>
</body>

deep（深度监听）

对象和数组都是引用类型，引用类型变量存的是地址，地址没有变，所以不会触发 watch。这时我们需要进行深度监听，就需要加上一个属性 deep，值为 true

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
40
41
42
43
<body>
<div id="app">
    <input type="button" value="更改名字" @click="change">
</div>
<script src="vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            food: {
                id: 1,
                name: '冰激凌'
            }
        },
        methods: {
            change() {
                this.food.name = '棒棒糖'
            }
        },
        watch: {
        	// 第一种方式：监听整个对象，每个属性值的变化都会执行handler
        	// 注意：属性值发生变化后，handler执行后获取的 newVal 值和 oldVal 值是一样的
            food: {
                // 每个属性值发生变化就会调用这个函数
                handler(newVal, oldVal) {
                    console.log('oldVal:', oldVal)
                    console.log('newVal:', newVal)
                },
                // 立即处理 进入页面就触发
                immediate: true,
                // 深度监听 属性的变化
                deep: true
            },
            // 第二种方式：监听对象的某个属性，被监听的属性值发生变化就会执行函数
            // 函数执行后，获取的 newVal 值和 oldVal 值不一样
            'food.name'(newVal, oldVal) {
                console.log('oldVal:', oldVal)   // 冰激凌
                console.log('newVal:', newVal)   // 棒棒糖
            }
        }
    })
</script>
</body>

Watch 和 computed 的区别

Watch

watch 用于观察和监听页面上的 vue 实例，当你需要在数据变化响应时，执行异步操作，或高性能消耗的操作，那么 watch 为最佳选择
​

1、watch 是监听器，可以监听某一个数据，然后执行相应的操作；
2、不支持缓存，数据变直接会触发相应的操作；
3、监听的函数接收两个参数，第一个参数是最新的值；第二个参数是输入之前的值；
4、支持异步操作；

computed

可以关联多个实时计算的对象，当这些对象中的其中一个改变时都会触发这个属性
     具有缓存能力，所以只有当数据再次改变时才会重新渲染，否则就会直接拿取缓存中的数据。
​

1、computed 是计算属性，也就是依赖某个值或者 props 通过计算得来得数据；
2、 computed 的值是在 getter 执行之后进行缓存的，只有在它依赖的数据发生变化，会重新调用 getter 来计算；
3、 不支持异步，当 computed 内有异步操作时无效，无法监听数据的变化；
​

什么时候用 computed 什么时候用 watch 比较合适？
当多个属性影响一个属性的时候，建议用 computed，比如：

1
2
3
fullName(){
  return this.firstName + this.secondName
}

fullName 是由 firstName 和 secondName 影响的，这种情况就适合 computed；
当一个值发生变化之后，会引起一系列的操作，这种情况就适合用 watch；

[

](https://blog.csdn.net/fu983531588/article/details/89454446)

Vue
watch

本博客所有文章除特别声明外，均采用 CC BY-SA 4.0 协议 ，转载请注明出处！