# 计算属性和侦听器

# 计算属性

computed 在vue中一些数据经常依赖于别的数据做出改变，且改变的逻辑也较复杂，。这个时候就需要用到计算属性 computed 通俗来说就是当前数据不是确定的，要经常做出改变，而这个改变是其他数据改变导致的。只要在它的函数里引用了 data 中的某个属性，当这个属性发生变化时，函数仿佛可以嗅探到这个变化，并自动重新执行。

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<meta http-equiv="X-UA-Compatible" content="ie=edge" />
		<title>Document</title>
		<script src="./lib/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<div>
				<button @click="a++">
					点我a++
				</button>
				<button @click="b++">
					点我b++
				</button>
			</div>
			<div>
				a + b = {{ total }}
			</div>
		</div>
		<script>
			var vm = new Vue({
				el: "#app",
				data() {
					return {
						a: 1,
						b: 2,
					};
				},
				computed: {
					total() {
						return this.a + this.b;
					},
				},
			});
		</script>
	</body>
</html>

计算属性特点

只要计算属性中利用到的属性值发生改变它就会执行；
计算属性的值会缓存；

# 侦听器

当监听 data 中的某个属性发生变化时，监听器才会被执行，并更新属性

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<meta http-equiv="X-UA-Compatible" content="ie=edge" />
		<title>Document</title>
		<script src="./lib/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<input type="text" v-model="message" />
			{{ message }} {{ num }}
		</div>
		<script>
			var message = 11;
			var vm = new Vue({
				el: "#app",
				watch: {
					// 如果 `question` 发生改变，这个函数就会运行
					message: function(newQuestion, oldQuestion) {
						console.log("newQuestion", newQuestion);
						console.log("oldQuestion", oldQuestion);
						this.num++;
					},
				},
				data() {
					return {
						num: 10,
						message,
					};
				},
			});
		</script>
	</body>
</html>

# 侦听器与计算属性的不同

计算属性一进入页面就会执行侦听器只有当数据更改的时候才会执行
侦听器监听的数据不能更改计算属性当依赖的属性更改的时候会自动执行
计算属性会缓存结果

← vue Class 与 Style 绑定 →