先来一段代码,我们分别声明一个methods方法newName(),computed新增一个计算属性newNames,然后分别在页面中调了各四次,我们来看一下打印结果:如下图
可以看到计算属性newNames只被执行了一次,这就是computed的好处,他是具有缓存性的,当计算第一次结果后会存入缓存,第二次调用该计算属性的时候,他会先读取需要返回的结果是否发生改变,如果没有就直接返回缓存的结果,如果改变了才会从新计算,而method就不会,直接执行了四次,所以处理效率上面不用多说,你明白了吗,合理的利用计算属性可以让代码变得更加简洁,程序更加流畅,你学废了吗,学废了记得点个赞哦!
HTML代码
<div>{{newNames}}</div>
<div>{{newNames}}</div>
<div>{{newNames}}</div>
<div>{{newNames}}</div>
<div>{{newName()}}</div>
<div>{{newName()}}</div>
<div>{{newName()}}</div>
<div>{{newName()}}</div>
JS代码
data() {
return {
oldName: '野猪佩奇',
}
},
computed: {
newNames() {
console.log('调用computed方法');
return this.oldName;
}
},
methods: {
newName() {
console.log('调用methods方法');
return this.oldName;
},
}