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中如何获取当前路由name，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-10-10
这篇文章主要为大家介绍了前端自动化测试Vue中TDD和单元测试示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-02-02
vue项目下npm或yarn下安装echarts多个版本方式
这篇文章主要介绍了vue项目下npm或yarn下安装echarts多个版本方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-06-06
这篇文章主要介绍了ant design vue导航菜单与路由配置操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-10-10
这篇文章主要介绍了Vue中的项目打包及部署全流程，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-08-08
这篇文章主要为大家介绍了Vue不能watch数组和对象变化解决方案示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-11-11
这篇文章主要介绍了vue清空form对象的方法，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-09-09
这篇文章主要介绍了Vue生命周期区别详解,本篇文章通过简要的案例,讲解了该项技术的了解与使用,以下就是详细内容,需要的朋友可以参考下2021-07-07
这篇文章主要介绍了Vue中的computed和watch的区别详解，文章围绕主题展开详细的内容介绍，具有一定的参考价值，需要的小伙伴可以参考一下2022-09-09
这篇文章主要介绍了vue 弹出框引入另一个vue页面,这种方式适用于在一个页面逻辑比较多的时候,可以搞多个页面,防止出错,本文通过示例代码给大家介绍的非常详细,需要的朋友可以参考下2023-08-08
最新评论