Vue计算属性和监听器

computed

computed: {
	total() {
		return this.num * this.price
	}
}

watch

// 侦听器有两个参数，分别是改变后的数据和改变前的数据
watch() {
	num(newVal,oldVal) {
		this.total = val * this.price
	}
	price() {
		this.total = this.num * val
	}
}
//侦听器除了是函数也可以是一个对象
price: {
	// handler是固定的配置选项，不能改变名称
	handler() {
	}
}

深度监听

当被监听的内容是引用数据类型时，我们需要使用深度监听来实现对数组/对象里的值进行监听。给监听器添加一个deep属性，默认值是false，当我们将其设置为true时深度监听生效。

watch() {
	obj: {
		handler(newVal,oldVal) {},
		// 深度监听
		deep:true
		// 立即监听(页面初始化时handler立即执行一次)
		immediate:true
	}
}

使用场景

计算属性应用场景是计算内容需要依赖多个属性的情况，因为计算属性每次缓存结果都要重新创建变量，所以当数据反复发送变化时更适合用侦听器。当一个数据会被反复使用并且依赖内容很少的情况下适合用侦听器。

computed当一个属性受多个属性影响的时候；例如购物车商品结算；watch当一条数据影响多条数据的时候，例如搜索框