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：只要页面重新渲染了，就会重新执行计算。