//index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
</head>
<body>
<div id="vue-app">
<button @click="a++">a加</button>
<button @click="b++">b加</button>
{{ aage() }}
{{ bage() }}
{{ cage() }}
</div>
<script src="app.js"></script>
</body>
//app.js
new Vue({
el:"#vue-app",
data:
{
a:0,
b:0,
age:10,
},
methods:
{
aage:function(){
console.log("a++");
return this.a+this.age;
},
bage:function()
{
console.log("b++");
return this.b+this.age;
},
cage:function()
{
console.log("ab++");
}
}
});
运行效果
控制台显示效果
发现,虽然点的只有a加这个按钮,但可以发现所有的函数都执行了,methods的方法一旦被触发,所有方法都会被触发,所以相对来说,耗费性能,这个时候就运用computed
使用computed,对于js文件,只需把methods改成computed,对于html文件,则把函数aage(),bage()的括号去掉
{{ aage }}{{ bage }} {{ cage}}
会自动去的computed寻找是否有该名字
与methods的区别
相同点:两者最后达到的效果是相同的
不同点:计算属性是基于它们的依赖进行缓存的,只有相关依赖会发生改变时才会重新求职。只要相关依赖未改变,只会返回之前的结果,不再执行函数。
也就是说,如果这里的按钮的v-on不是a++而只是a,b++只是b,点击按钮,控制台是一片空白的