计算属性Computed与method有相同的属性，稍微不太好理解。
一、属性对比
| 属性 | 页面重新渲染 | 适用场景 |
|---|---|---|
| computed | 不变化 | 较大量的计算和改变频率较低的属性 |
| methods | 页面元素的data变化 | 无缓存 |
二、Demo
methods样例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue.js</title>
<link rel="stylesheet" href="style.css">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="vue-app">
<h1> Computed 计算属性 </h1>
<button v-on:click="a++">Add to A</button>
<button v-on:click="b++">Add to B</button>
<p>A - {{a}}</p>
<p>B - {{b}}</p>
<p>Age + A ={{addToA()}}</p>
<p>Age + B ={{addToB()}}</p>
</div>
<script src="app.js"></script>
</body>
</html>new Vue({
el:"#vue-app",
data:{
a:0,
b:0,
age:20
},
methods:{
addToA:function(){
console.log("Add to A");
return this.a + this.age;
},
addToB:function(){
console.log("Add to B");
return this.b + this.age;
}
}
});
发生重新渲染，method调用总会执行该函数。所以，每次点击按钮触发时间，不论是add to A还是add to B按钮，都会触发methods方法。
在method的每一次点击会触发所有方法，每一次都会渲染DOM结构
computed属性样例
计算属性不能在方法中加入()，计算属性更加优化。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue.js</title>
<link rel="stylesheet" href="style.css">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="vue-app">
<h1> Computed 计算属性 </h1>
<button v-on:click="a++">Add to A</button>
<button v-on:click="b++">Add to B</button>
<p>A - {{a}}</p>
<p>B - {{b}}</p>
<p>Age + A ={{addToA}}</p>
<p>Age + B ={{addToB}}</p>
</div>
<script src="app.js"></script>
</body>
</html>new Vue({
el:"#vue-app",
data:{
a:0,
b:0,
age:20
},
computed:{
addToA:function(){
console.log("Add to A");
return this.a + this.age;
},
addToB:function(){
console.log("Add to B");
return this.b + this.age;
}
}
});
computed只在msg更新时计算，计算结果存在缓存中。
所以点击Add to A按钮，只调用addToA方法。
三、总结
Vue使用的是虚拟DOM，当与真实DOM结构不同是才会触发相应方法，method每次都会执行，每点击一个都会执行所有方法。
计算属性只有在相关依赖发生改变时才会重新求值，当页面重新渲染（不是刷新）的时候，计算属性不会变化，直接读取缓存使用。在相关依赖发生改变时才会重新求值。
219
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
