Vue从入门到实战：使用监听器

来自CloudWiki
跳转至： 导航， 搜索

用途

Vue提供了一种更通用的方式来观察和响应Vue实例上的数据变动：监听属性。当你有一些数据需要随着其他数据变化而变动时，就可以使用监听器

举例

监听器是在Vue实例的选项对象的watch选项中定义。下面通过监听器来实现千米与米之间的换算。 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>监听器</title>
	</head>
	<body>
		<div id = "app">
		   千米 : <input type = "text" v-model="kilometers">
		   米 : <input type = "text" v-model="meters">
		</div>
		<p id="info"></p>
	
		<script src="vue.js"></script>
		<script>
			var vm = new Vue({
		    el: '#app',
		    data: {
		      kilometers: 0,
		      meters: 0
		    },
		    watch : {
	        kilometers: function(val){
	          this.meters = val * 1000
	        },
	        // 监听器函数也可以接受两个参数，val是当前值，oldVal是改变之前的值
	        meters : function (val, oldVal) {
	          this.kilometers = val / 1000;
	        }
		    }
		    });
		    /*
		    // $watch 是一个实例方法
		    vm.$watch('kilometers', function (newValue, oldValue) {
		    	// 这个回调将在 vm.kilometers 改变后调用
		    	document.getElementById ("info").innerHTML = "修改前值为: " + oldValue + "，修改后值为: " + newValue;
				})*/
		</script>
	</body>
</html>

编写了两个监听器，分别监听kilometers 和meters的变化，当其中一个数据属性的值发生改变时，对应的监听器就会被调用。

不要使用箭头函数来定义监听器函数，箭头函数绑定的是父级作用域的上下文。

当需要在数据变化时执行异步或开销较大的操作时，使用监听器是最合适的。

例：

fibonacci.js: 

function fibonacci(n)
{
	return n < 2 ? n : arguments.callee(n-1) + arguments.callee(n-2);
}

onmessage = function(event)
{
	var num = parseInt(event.data, 10);
	postMessage(fibonacci(num));
}

watch-fibonacci.html: 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>监听器</title>
	</head>
	<body>
		<div id = "app">
		   请输入要计算斐波那契数列的第几个数：
			<input type="text" v-model="num">
			<p v-show="result">{{result}}</p>
		</div>
	
		<script src="vue.js"></script>
		<script>
			var vm = new Vue({
		    el: '#app',
		    data: {
		      num: 0,
		      result: ''
		    },
				watch : {
				  num: function(val){
				  	this.result = "请稍候...";
				  	if(val > 0){
				    	let worker = new Worker("fibonacci.js");
				    	worker.onmessage = (event) => this.result = event.data;
						worker.postMessage(val);
						}
						else{
							this.result = '';
						}
				  }
				}
			});
		</script>
	</body>
</html>

Worker实例是异步执行的，当后台线程执行完任务后通过postMessage()调用通知创建者线程的onmessage回调函数。

取自“http://www.openbrains.net/mediawiki/index.php?title=Vue从入门到实战：使用监听器&oldid=24889”