vue中侦听器、计算属性和方法的区别

vue中侦听器、计算属性和方法的区别

<div>watch: {{total}}</div> // 侦听器
<div>computed: {{total}}</div> // 计算属性
<div>methods: {{total()}}</div> // 方法

watch: {
	count(current, prev) {
		this.total = current++;
	}
 },
 computed: {
 	total: function() {
 		return this.count++;
 	}
 },
 methods: {
 	total: function() {
 		return this.count++;
 	}
 }

侦听器和计算属性

侦听器和计算属性都能监测到数据的变化，但计算属性可以不需要定义变量直接使用

• watch适合处理的场景是，侦听一个数的变化，当该数据变化，来处理其他与之相关数据的变化（该数据影响别的多个数据）
• computed适合处理的场景是，获得一个值或者结果，该结果受其他的依赖的影响。（一个数据受多个数据影响）

计算属性和方法

• 计算属性：当计算属性依赖的内容发生变化时，才会执行计算。
• 方法：当被调用时会执行，如果放在{{}}，页面刷新时自动执行。
• 计算属性的缓存：当计算属性依赖的内容没有发生变化时，不会执行计算。

计算属性的get和set

每个计算属性都有一个getter和setter

computed : {
   total: {
   	get : function() {
   		return this.counter ++;
   	},
   	 set : function(val) {
   		this.counter = 22;
   	}
   }
}

get是用来获取计算属性的，必须有返回值。
set是用来设置计算属性的