cssjshtml vue computed methods区别
computed 和 methods区别:
computed 只在初始化时被调用。
methsods在数据发生变化是被调用。
1.首先最明显的不同 就是调用的时候，methods要加上（）
2.我们可以使用 methods 来替代 computed，效果上两个都是一样的，但是 computed 是基于它的依赖缓存，只有相关依赖发生改变时才会重新取值。
而使用 methods ，在重新渲染的时候，函数总会重新调用执行
1.打开浏览器开发者模式，点击按钮Add to A:
Add to A Add to B
2.点击按钮Add to B:
Add to A Add to B
methods方法会将methods里面的两个方法函数都去执行。
3.点击按钮Add to C:
Add to A Add to B Add to C
4.点击按钮Add to D:
Add to A Add to B Add to D
computed只会执行自己对应的方法，但是也会带上methods里面的方法。
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>methods_and_computed</title>
</head>
<body>
<div id="vue-app">
<h1>Methods</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>Age + B = {{ addToB()}}
<h1>Computed</h1>
<button v-on:click="c++">Add to C</button>
<button v-on:click="d++">Add to D</button>
<p>C - {{ c }} </p>
<p>D - {{ d }} </p>
<p>Age + C = {{ addToC }}
<p>Age + D = {{ addToD }}
</div>
<script src="/static/js/vue.min.js"></script>
<script>
new Vue({
el: "#vue-app",
data: {
a: 0,
b: 0,
c: 0,
d: 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;
}
},
computed: {
addToC: function () {
console.log("Add to C");
return this.c + this.age;
},
addToD: function () {
console.log("Add to D");
return this.d + this.age;
}
}
});
</script>
</body>
</html>本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2019/02/26 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录