vue基础属性之计算属性
计算属性 computed
变量的计算不能直接写在template中,应该通过computed属性来计算。
computed属性中定义好的计算变量结果可以直接用在template中。
当计算表达式中的变量发生变化时,结果也会自动发生变化。
var app = Vue.createApp({
data(){
return{
count : 2,
price : 5
}
},
computed: { total(){ return this.price * this.count; } }, template: `<div>{{total}}</div>`
})
当price或者count发生变化时,total也会自动相应发生变化。
实际上将相同的计算过程写在methods函数中,也可以实现相同的效果。
那么computed和methods的区别是什么呢?
computed和methods的区别
computed:计算属性依赖的变量发生变化时,才会重新执行计算。
methods:只要页面重新渲染了,就会重新执行计算。