vue中计算属性和方法的区别及说明
目录
vue计算属性和方法区别
区别
vue向计算属性传递参数
vue计算属性和方法区别当我们实现翻转字符串的业务逻辑时，使用插值表达式打码如下：
<div id="app">
<div>{{msg}}</div>
<div>{{msg.split('').reverse().join('')}}</div>
</div>
为了将复杂了业务逻辑便于管理，使得不显得杂乱无章，我们使用计算属性：
<div id="app">
<div>{{msg}}</div>
计算属性：<div>{{resverString}}</div>
</div>
<script>
var vm=new Vue({
el:"#app",
data:{
msg:"happy"
},
computed:{
resverString:function(){
console.log('computed');
return this.msg.split('').reverse().join('');
}
}
})
</script>
效果如下图：
对比使用methods方法：
<div id="app">
<div>{{msg}}</div>
计算属性：<div>{{resverString}}</div>
计算属性：<div>{{resverString}}</div>
方法属性：<div>{{resv()}}</div>
方法属性：<div>{{resv()}}</div>
</div>
computed:{
resverString:function(){
console.log('computed');
return this.msg.split('').reverse().join('');
}
},
methods:{
resv:function(){
console.log('methods');
return this.msg.split('').reverse().join('');
}
}
结果如下图：
如图，控制台的结果说明，在相同的依赖（data中的数据）下，计算属性只会执行一次逻辑，而方法每次调用都会执行，所以：计算属性在一定条件下进行了一定的性能优化。
区别计算属性是基于依赖进行缓存的，而方法则不缓存。
vue向计算属性传递参数{{componentVal('input')}}
componentVal () {
return (val) => {
return 'el-' + val
}
}
以上为个人经验，希望能给大家一个参考，也希望大家多多支持软件开发网。
相关文章
Noya
2020-03-21
Serwa
2020-03-20
Claire
2021-05-21
Rhoda
2023-07-22
Hester
2023-07-22
Grace
2023-07-22
Vanna
2023-07-22
Peony
2023-07-22
Dorothy
2023-07-22
Dulcea
2023-07-22
Zandra
2023-07-22
Serafina
2023-07-24
Kathy
2023-08-08
Olivia
2023-08-08
Victoria
2023-08-08
Elina
2023-08-08
Jacinthe
2023-08-08
Viridis
2023-08-08
Hana
2023-08-08
Cybill
2023-08-08