关于 vue 中 computed 和 watch 的使用

在vue项目中，虽然数据是实时变化的，但当某一个数据是根据其他数据的改变而改变，或这当某一个数据改变时，需要作出其他操作，这时候我们就需要用到computed 和watch。

1.computed 计算属性

计算属性的初衷是将双花括号内的逻辑提取出来，将复杂的逻辑使用计算属性。一般用于多个值通过计算得出一个值的结果。

<template>
	<div class="container">
		<div>{{ tot }}</div>
	</div>
</template>
<script>
export default {
data() {
		return {
			data1: 0,
			data2: 1,
		};
	},
}
computed: {
	tot() {
		let rslt = this.data1 + this.data2;
		return rslt;
		// return this.data1 + this.data2;
	},
},

计算属性将计算过程放置在一函数内，计算结果 return 出来，需要使用直接调用函数即可。如果要在mounted，或methods中的函数中获取计算属性的值，可以通过this.函数名获取，这个例子就是this.tot。

不要写成这样

data() {
	return {
		data1: 0,
		data2: 1,
		rslt: 0,
	};
},
computed: {
	tot() {
		this.rslt = this.data1 + this.data2;
		return this.rslt;
	},
},

会报错Unexpected side effect in "xxx" computed property vue/no-side-effects-in-computed-properties。
因为计算属性中应当仅包含用于返回值的计算，不应该包含 DOM 操作，修改外部变量，异步操作等。

2：watch侦听器

当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。通常用于一个值得改变引起其他的变化。

<template>
	<div class="container">
		<div>{{ data }}</div>
		<div>{{ status }}</div>
	</div>
</template>
export default {
	data() {
		return {
			data: 0,
			status: "",
		};
	},	
	watch: {
		data(newValue, oldValue) {
			console.log("newValue", newValue, "oldValue", oldValue);
			this.status = newValue % 2 === 0 ? "偶数" : "奇数";
		},
	},
}

watch 里面是你需要监听的数据，可以传入参数，变化后的值，和变化前的值，也可以只写一个变化后的值。

watch: {
	data(value) {
		this.status = value % 2 === 0 ? "偶数" : "奇数";
	},
},

也可以不传值，直接通过this访问

watch: {
	data() {
		this.double = this.data * 2;
	},
},

如有错误，欢迎指正，谢谢！
以上内容仅供参考，欢迎大家讨论。