vue中计算属性和方法的区别及说明
更新时间：2022年09月07日 10:18:04 作者：混子前端
这篇文章主要介绍了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
}
}以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
通过自定义右键菜单栏,用户可以根据自己的需求添加、调整和删除菜单选项,所以本文就来为大家介绍一下如何使用使用Vue封装一个自定义的右键菜单组件吧2024-01-01
这篇文章主要为大家介绍了JS图片懒加载库VueLazyLoad示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-02-02
这篇文章主要介绍了Vue在自定义指令绑定的处理函数中传递参数方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-03-03
这篇文章主要介绍了vue-codemirror实现在线代码编译器 ,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2021-12-12
本篇文章主要介绍了基于vue的换肤功能的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-10-10
这篇文章主要介绍了vue-cli中vue本地实现跨域调试接口,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-01-01
这篇文章主要介绍了vue定义在computed的变量无法更新问题及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-01-01
本篇文章主要介绍了vue如何获取点击事件源的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-08-08
这篇文章主要为大家详细介绍了Vue3.0手写轮播图效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-10-10
最近开发中遇到一个多个点绘制,并实现点击事件,出现自定义窗口显示相关信息等功能,下面这篇文章主要给大家介绍了关于Vue结合高德地图实现HTML写自定义信息弹窗的相关资料,需要的朋友可以参考下2023-04-04
最新评论