语法：
计算属性：computed:{
变量名:function (){
...处理
return 返回值;
}
}
方法：
methods:{
方法名:function(){
...处理
可返回值也可以不返回
}
}
监听器
watch:{
被监听属性:function(){
属性改变时处理...
}
代码如下：想看结论直接往下拉
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue的计算属性，方法，监听器</title>
<script src="vue.js"></script>
</head>
<body>
<div id = 'app2'>
<h1>{{num1}}</h1>
<h1>{{num2}}</h1>
<h1>{{numz}}</h1>
<h1>{{total}}</h1>
<h1>{{total1()}}</h1>
<h1>{{total2}}</h1>
</div>
<script>
var app = new Vue({
el:'#app2',
data:{
num1:0,
num2:0,
numz:666,
total2:0,
},
//计算属性返回值实现
computed:{
total:function (){
console.log("计算了一次1");
return this.num1+this.num2;s
}
},
//方法实现
methods:{
total1:function(){
console.log("计算了一次2");
return this.num1 + this.num2;
}
},
//监听器实现
watch:{
num2:function(){
console.log("计算了一次3");
this.total2 = this.num1+this.num2;
},
num1:function(){
console.log("计算了一次3");
this.total2 = this.num1+this.num2;
}
},
});
</script>
</body>
</html>
页面效果与测试如下
结论：
刚加载页面的时候调用了方法与计算属性
修改了无关变量时，因为计算属性与监听有缓存而方法没有，所以
修改了相关变量时，缓存重置，重新计算
由此可以看出此场景时 计算属性最好用，既简洁又有缓存