8.computed和methods的区别
2020-05-22 本文已影响0人
Vincent1223
methods：方法；computed：计算属性。
通常我们把需要计算的方法写在computed里，但是大部分情况下，写在methods里也可以实现需求，比如下面这段代码：
<body>
<div id="app">
<h2>{{fullName}}</h2>
<h2>{{getFullName()}}</h2>
</div>
<script>
new Vue({
el:"#app",
data:{
a1:'liu',
a2:'ruoyi',
},
methods:{
getFullName:function(){
return this.a1+" "+this.a2;
}
},
computed:{
fullName:function(){
return this.a1+" "+this.a2;
}
}
})
</script>
在methods和computed里写方法都可以获取全名，那么两者有什么区别呢？
计算属性computed，虽然在书写形式上是一个方法，但是它本质上是一个属性，它包含有getter和setter方法，只是setter方法并不常用，所以经常省略掉。
写在computed里的方法，在无论调用多少次，方法只其实只会执行一次。而写在methods里的方法，每一次调用，方法都会执行一次。
比如上面的代码，分别输出四次全名，并且在方法里打上log，去控制台看一下方法会调用几次。
<div id="app">
<h2>{{getFullName()}}</h2>
<h2>{{getFullName()}}</h2>
<h2>{{getFullName()}}</h2>
<h2>{{getFullName()}}</h2>
<h2>{{fullName}}</h2>
<h2>{{fullName}}</h2>
<h2>{{fullName}}</h2>
<h2>{{fullName}}</h2>
</div>
<script>
new Vue({
el:"#app",
data:{
a1:'liu',
a2:'ruoyi',
},
methods:{
getFullName:function(){
console.log("getfullName");
return this.a1+" "+this.a2;
}
},
computed:{
fullName:function(){
console.log("fullName")
return this.a1+" "+this.a2;
}
}
})
</script>
执行结果如下：
结果可见，methods里的方法共调用了4次，而computed里的方法只调用了一次。
可见，computed是比methods的性能要高。这是因为vue内部对computed做了缓存，它会观察计算属性的各个变量是否发生变化（例子中的a1和a2），如果都没有发生变化，就不再执行计算，直接把第一次计算的值返回。只有监测到属性值发生变化的时候，才会重新执行计算。而methods则会每次都重新计算，所以来说methods里计算相对性能较低。
所以，建议大家以后遇到需要类似计算场景的时候，能使用computed尽量使用computed，不要把计算方法写在methods里。
