先给出结论:
- 当计算属性依赖的内容发生变化时,才会执行,但计算属性之外的内容发生变化时,是不会重新执行计算的。
- 普通方法只要页面重新渲染,都会重新计算
- 当普通方法和计算属性实现一样的效果的时候,计算属性是更高效的。
举个例子:
<!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()值发生了改变。
所以得出结论:
- 当计算属性依赖的内容发生变化时,才会执行,但计算属性之外的内容发生变化时,是不会重新执行计算的。
- 普通方法只要页面重新渲染,都会重新计算
- 当普通方法和计算属性实现一样的效果的时候,计算属性是更高效的。