vue 计算属性computed vs 侦听属性watch

计算属性

对于任何复杂逻辑都可使用计算属性，适用于性能开销较大的属性，避免执行多次getter

基础例子

<div id='example'>
	{{msgTime}}
</div>

<script>
	var vm = new Vue({
		el:"example",
		data:{
			//被依赖的响应式属性
			msg: 'hello world'
		}
		computed: {
			//计算属性的getter
			msgTime: function() {
				return this.msg + new Date().toString()
			}
			/*计算属性自定义getter和setter
			msgTime: {
				get: function() {
					return this.msg + new Date().toString()
				},
				set: function (newVal) {
					this.msg = newVal
				}
			}*/
		}
	})
</script>

特性

• 计算属性不可被定义在data中，提供的函数即为该属性getter
• 支持缓存，当被依赖的响应式数据（data，props）发生变化时，才会触发该函数再次求值。否则不会再次调用函数，而是直接获取缓存数据
• 支持依赖多个属性
• 不支持异步，当computed内有异步方法，将无法监听数据变化
• 可以自定义计算属性的getter和setter

侦听属性

当数据变化时需要执行异步操作或者开销较大的操作时，这个方式最有效

基础例子

<div id="demo">
	{{fullName}}
</div>

<script>
	var vm = new Vue({
		el: 'demo',
		data: {
			firstName: 'W',
			lastName: 'X',
			totalName: 'WX'
		},
		watch: {
			//如果firstName发生变化时，将执行该函数
			firstName: function(newVal,oldVal) {
				this.fullName = newVal + this.lastName;
			}
			//如果lastName发生变化时，将执行该函数
			lastName: function(newVal,oldVal) {
				this.fullName = this.firstName + newVal;
			}
		}
	})
</script>

特性

• 侦听属性需要被定义在data中，或者props中
• 不支持缓存，当数据变化时，即触发函数
• 只支持依赖一个数据
• 支持异步
• 当侦听属性复杂数据类型时，需要深度监听（参数中指定 deep: true），但是无法监听到对象里哪个属性的变化