直接上代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<h1 class="price">{{priceToFixedByComputed}}</h1>
<h1 class="price">{{priceToFixedByMethods()}}</h1>
<h1 class="price">{{price | priceToFixedByFilters}}</h1>
<h2 class="price">{{priceToFixedByComputed}}</h2>
<h2 class="price">{{priceToFixedByMethods()}}</h2>
<h2 class="price">{{price | priceToFixedByFilters}}</h2>
<h3 class="price">{{priceToFixedByComputed}}</h3>
<h3 class="price">{{priceToFixedByMethods()}}</h3>
<h3 class="price">{{price | priceToFixedByFilters}}</h3>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
let vm = new Vue({
el: '#app',
data() {
return {
price: 27.999999999
}
},
computed: {
priceToFixedByComputed() {
console.log('computed')
return this.price.toFixed(2)
}
},
methods: {
priceToFixedByMethods() {
console.log('methods')
return this.price.toFixed(2)
}
},
filters: {
priceToFixedByFilters(val) {
console.log('filters')
return val.toFixed(2)
}
},
watch: {
price(val) {
console.log('watch')
}
},
})
</script>
</body>
</html>
computed，一般用于计算，可直接在模板中使用有缓存机制，性能比methods更高。
image.png
如上图所示，当我多次调用在表达式中使用price时，computed只计算一次，计算完后只要参数不改变，就不在计算，缓存下来重复使用。而methods和filters只要使用到了就调用，没有缓存。
再来看看数据改变后
image.png
computed触发一次，methods触发三次，filter触发三次，watch触发一次。
methods, 一般用于函数方法，在模板中使用时需加()，没有缓存，使用一次就触发一次。
filters，一般用于格式化（时间，取整，取余等），使用时用 “|” 隔开,这里只是为了突出特殊场景下computed的高效性。
watch，当观察的对象改变时触发，没有返回值。
