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是用来设置计算属性的