Vue之watch

最新推荐文章于 2024-09-19 18:19:08 发布

原创最新推荐文章于 2024-09-19 18:19:08 发布 · 207 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue

你好呀Vue 专栏收录该内容

14 篇文章

订阅专栏

本文详细介绍了Vue中watch的使用方法，包括基本用法、handler、deep与immediate属性的使用，以及如何通过计算属性实现对多个参数的监听。

Vue中采用watch用于侦听数据的变化，并在数据发生变化时做出相应。

1. watch的一般用法

<html>
	<head>
		<meta charset="utf-8">
		<title>Vue-test</title>
	</head>
	
	<!-- watch使用 -->
	<body>
		<div id="app">
            <input v-model="a"></input>
            {{a}}
		</div>
		<script src = "https://unpkg.com/vue/dist/vue.min.js"></script>
		<script>
			new Vue({
				el:'#app',
				data: {
                    a: 1,
                    b: 2,
                    c: 3,
                },
                
                watch: {
                    a: function(newValue, OldValue) {
                        alert(this.a);
                    }
                }
			})
		</script>
    </body>
</html>

当a的值发生改变时，会执行alert函数。

2. handler，deep与immediate

deep 表示深度监听，可用于监听某个对象中属性的变化；
immediate 当其为true时，会立即先执行handler函数，即在初始化绑定的时候就会执行。

<body>
    <div id="app">
        <input v-model="a"></input>
        {{a}}
    </div>
    <script src = "https://unpkg.com/vue/dist/vue.min.js"></script>
    <script>
        new Vue({
            el:'#app',
            data: {
                a: 1,
                b: 2,
                c: 3,
            },
            
            watch: {
                a: {
                    handler(newValue, oldValue) {
                        alert("immediate" + this.a);
                    },
                    immediate: true,
                }
                

            }
        })
    </script>
</body>

上述代码会在初始化页面时，就会先执行一次alert函数。

3. watch同时监听多个参数

watch无法同时监听多个参数，但是可以结合计算属性来完成这一操作：

computed: {
    multiData() {
        const {a,b,c} = this;
        return {a,b,c};
    }
},

watch: {
    multiData: {
        handler(newValue, oldValue) {
            alert("multiData were changed");
        },
        deep: true,
        immediate: true,
    },
}