侦听器watch:当数据变化时才会执行。适用于一对多的场景,牵一发而动全身,监听关键因素的变化。
计算属性computed:用来做大量复杂的计算。适用于多对一的场景。会将计算结果缓存起来,方便下次使用。在下次使用时,如果原始数据没有发生变化,就从缓存中读取上次的计算结果直接返回,以此提升性能。
(函数:和普通js代码中的函数没有区别,相对计算属性来说,没有缓存,调用几次就执行几次,性能不如计算属性。)
代码演示:
<div id="app">
<input type="text" v-model="age">
<p>{{msg}}</p>
<span>还有{{year}}年</span>
</div>
<script>
const vm=new Vue({
el:'#app',
data:{
age:20,
total:100,
msg:''
},
computed:{
//计算属性 是对数据的计算 然后重新返回一个类似data的数据 我们可以直接当作data属性值 进行使用
year(){
return this.total-this.age
}
},
watch:{
//监听 则是对数据的监听 这个函数名 就是 数据的名字 当数据发生变化 我们可以让他 产生数据变化以后的事件
age(){
if(this.age==100){
console.warn('完!');
}
}
}
})
</script>