VUE中computed和watch的使用

VUE中computed和watch的使用

VUE中computed和watch的使用

1.computed

computed用来监控自己定义的变量，该变量不在data里面声明，直接在computed里面定义，然后就可以在页面上进行双向数据绑定展示出结果或者用作其他处理；
computed比较适合对多个变量或者对象进行处理后返回一个结果值，也就是数多个变量中的某一个值发生了变化则我们监控的这个值也就会发生变化，举例：购物车里面的商品列表和总金额之间的关系，只要商品列表里面的商品数量发生变化，或减少或增多或删除商品，总金额都应该发生变化。这里的这个总金额使用computed属性来进行计算是最好的选择
computed根据被依赖对象的变化er变化

computed: {
			fullName:function(){
				debugger
				return this.firstName + '  ' + this.lastName;
			}
		},

当firstName或者lastName变化的时候，会触发fullName的变化

2.watch

watch主要用于监控vue实例的变化，它监控的变量当然必须在data里面声明才可以，它可以监控一个变量，也可以是一个对象，但是我们不能类似这样监控

watch:{
age(newValue, oldValue){
debugger
console.log(‘当前年龄：’ + newValue)
}
}

当age的值发生变化的时候会触发watch
另外watch涉及到立即执行immediate:true，对象深度监听deep属性