Vue预习篇（二）计算属性和监听器

2、计算属性和监听器

const app = new Vue({
	computed: {
		total() {
			return this.courses.length + '门'
		}
	},
	// 下面这种不能生效，因为初始化时不会触发
	// watch: {
	//	couses(newVal, oldVal) {
	//		this.totalCount = newVal.length + '门'
	//	}
	// }
	watch: {
		courses: {
			immediate: true,
			// deep: true,
			handler(newVal, oldVal) {
				this.totalCount = newVal.length + '门'
			}
		}
	}
})

计算属性和监听器的区别？

• 处理数据的场景不同，监听器适合一个数据响应多个数据，计算属性适合一个数据受多个数据影像。
• 计算属性有缓存性，计算所得的值如果没有变化不会重复执行。
• 监听器选项提供了更通用的方法，适合执行异步操作或较大开销操作的情况。

一个值变了，影响多个值，做很多东西，用监听器。