先給出結論：
- 當計算屬性依賴的內容發生變化時，纔會執行，但計算屬性之外的內容發生變化時，是不會重新執行計算的。
- 普通方法只要頁面重新渲染，都會重新計算
- 當普通方法和計算屬性實現一樣的效果的時候，計算屬性是更高效的。
舉個例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>test</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="root">
<div>{{total}}</div>
<div>{{getTotal()}}</div>
</div>
</body>
<script>
const app = Vue.createApp({
data() {
return {
count: 2,
price: 5,
}
},
computed: {
total() {
return this.count * this.price
}
},
methods: {
getTotal() {
return this.count * this.price
}
},
});
const vm = app.mount('#root');
</script>
</html>
- 這時的計算屬性和普通方法實現的效果是一樣的
換個例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>test</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="root">
<div>計算屬性：{{msg}}:{{total}}</div>
<div>普通方法：{{msg}}:{{getTotal()}}</div>
</div>
</body>
<script>
const app = Vue.createApp({
data() {
return {
count: 2,
price: 5,
msg: 'test1'
}
},
computed: {
total() {
return Date.now();
}
},
methods: {
getTotal() {
return Date.now();
}
},
});
const vm = app.mount('#root');
</script>
</html>
-
這是剛剛運行起來的效果，現在我動態改變下變量msg的值
![]()
可以看到當msg的值發生改變的時候，計算屬性裏的Date.now()是沒有變的，而普通方法裏的Date.now()值發生了改變。
所以得出結論：
- 當計算屬性依賴的內容發生變化時，纔會執行，但計算屬性之外的內容發生變化時，是不會重新執行計算的。
- 普通方法只要頁面重新渲染，都會重新計算
- 當普通方法和計算屬性實現一樣的效果的時候，計算屬性是更高效的。