Vue.js中computed和methods的区别
首先我们在浏览器上运行以下代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>computed和methods的区别</title>
<script src="../js/vue.min.js"></script>
</head>
<body>
<div id="demo">
<p>这是原字符串:<span style="font-weight: bold">{{message}}</span></p>
<p>这是调用method里的方法后返回的字符串:<span style="font-weight: bold">{{reverseMsgInMethod()}}</span></p>
<p>这是调用computed里的方法后返回的字符串:<span style="font-weight: bold">{{reverseMsgInComputed}}</span></p>
</div>
<script>
var vm=new Vue({
el:'#demo',
data:{
message:"computed和methods的区别"
},
methods:{
//倒转字符串
reverseMsgInMethod:function (){
return this.message.split('').reverse().join('');
}
},
computed:{
reverseMsgInComputed:function (){
return this.message.split('').reverse().join('');
}
}
});
</script>
</body>
</html>
运行结果如下所示:
我们可以惊奇的发现,调用method里的方法和computed里的方法的结果居然是一致的。那么难道说computed和motheds没有区别吗?
其实,computed和methods是有区别的,具体有以下三点:
-
调用方式不同:methods里的方法是以函数形式被调用的,因此在引用时需要加上括号,
如{{reverseMsgInMethod()}}
,而computed里的方法是以对象形式被调用的,因此不用加括号,如{{reverseMsgInComputed}}
。 -
绑定方式不同:methods与compute纯get方式都是单向绑定,不可以更改输入框中的值。compute的get与set方式是真正的双向绑定。
-
是否有缓存区:methods没有缓存,因此每次被调用时会重复执行里面的代码,而computed存在缓存,只要缓存区的值没有被改变,每次被调用是直接返回缓存的计算结果的。所以说,对于那种代码块运行时间长,数据结构冗杂的方法,可以放在computed中以减少开销。