计算属性computed:
- 支持缓存,只有依赖数据发生改变,才会重新进行计算
- 不支持异步,当computed内有异步操作时无效,无法监听数据的变化
- computed 属性值会默认走缓存,计算属性是基于它们的响应式依赖进行缓存的,也就是基于data中声明过的数据 通过计算得到的
- 如果一个属性是由其他属性计算而来的,这个属性依赖其他属性,是一个多对一或者一对一,一般用computed
- 如果computed属性属性值是函数,那么默认会走get方法;函数的返回值就是属性的属性值;在computed中的,属性都有一个get和一个set方法,当数据变化时,调用set方法。
- computed中属性不能和data、methods中的重名;
侦听属性watch:
- 不支持缓存,数据变,直接会触发相应的操作;
- watch支持异步;
- 监听的函数接收两个参数,第一个参数是最新的值;第二个参数是输入之前的值;
watch: {
val:function(newVal,oldVal){
console.log(newVal,oldVal)
}
}
- 当一个属性发生变化时,需要执行对应的操作;一对多;
- watch方法监听的属性,data中已创建的;
例1:当一个属性依赖多个属性改变时
<template>
<div>
<input type="text" v-model="val1" />+
<input type="text" v-model="val2" />={{ count}}
</div>
</template>
watch侦听
<script>
export default {
data() {
return {
val1: 0,
val2: 0,
count: 0,
};
},
watch: {
val1: function () {
this.count= parseFloat(this.val1) + parseFloat(this.val2);
},
val2: function () {
this.count= parseFloat(this.val1) + parseFloat(this.val2) ;
},
},
};
</script>
此时用computed 计算属性,就简单多了
<script>
export default {
data() {
return {
val1: 0,
val2: 0
};
},
computed: {
count: {
get:function(){
return parseFloat(this.val1)+parseFloat(this.val2)
}
}
}
};
</script>