Vue侦听器(watch)

Vue侦听器(watch)教程

在 Vue 中，Vue 侦听器(watch) 是通过 watch 选项提供了一个方法，来响应数据的变化。Vue 侦听器(watch) 最适合使用于当我们需要在数据变化时执行异步操作或开销较大的操作时使用。

Vue 侦听器(watch) 的回调函数，可以接受两个参数，第一个参数是变化之后的新值，第二个参数是变化之前的旧值。

Vue侦听器(watch)详解

语法

var vm = new Vue({
    el :'#app',
    watch:{
        param1:function(newValue, oldValue) {
        },
        param2: function(newValue, oldValue) {
        }
    }
})

说明

Vue 所有的侦听器都写在 watch 中。

案例

Vue侦听器

<!DOCTYPE html>
<html>
<head>
	<title>Vue 侦听器</title>
	<script type="text/javascript" src="./lib/vue-2.6.10.min.js"></script>
</head>
<style type="text/css">
</style>
<body>
	<div id="app">
		<input type="number" v-model.number="value1">+
		<input type="number" v-model.number="value2">=
		{{result}}
         <p>嗨客网（www.haicoder.net）</p>
	</div>
</body>
<script type="text/javascript">
	var vm = new Vue({
		el :'#app',
		data:{
			value1: 1,
			value2: 2,
			result: 0
		},
		watch:{
			value1:function(newValue, oldValue) {
				this.result = newValue + this.value2;
			},
			value2: function(newValue, oldValue) {
				this.result = newValue + this.value1;
			}
		}
	})
</script>
</html>

浏览器运行效果如下图所示：

01 vue watch.png

我们看到，我们使用了 Vue侦听器实现了与 Vue计算属性同样的效果。

我们在 Vue 侦听器watch 侦听了参数 value1 和参数 value2 的变化，当参数变化时，将参数 result 赋值为两个参数的和。

Vue侦听器(watch)总结

在 Vue 中，Vue 侦听器(watch) 是通过 watch 选项提供了一个方法，来响应数据的变化。Vue 侦听器(watch) 最适合使用于当我们需要在数据变化时执行异步操作或开销较大的操作时使用。

Vue 侦听器(watch) 的回调函数，可以接受两个参数，第一个参数是变化之后的新值，第二个参数是变化之前的旧值。Vue 侦听器(watch) 语法：

var vm = new Vue({
    el :'#app',
    watch:{
        param1:function(newValue, oldValue) {
        },
        param2: function(newValue, oldValue) {
        }
    }
})