您现在的位置是：网站首页> 编程资料编程资料

vue中计算属性和方法的区别及说明_vue.js_

2023-05-24 346人已围观

简介 vue中计算属性和方法的区别及说明_vue.js_

vue计算属性和方法区别

当我们实现翻转字符串的业务逻辑时，使用插值表达式打码如下：

{{msg}}
{{msg.split('').reverse().join('')}}

为了将复杂了业务逻辑便于管理，使得不显得杂乱无章，我们使用计算属性：

{{msg}}
 计算属性：
{{resverString}}

效果如下图：

对比使用methods方法：

{{msg}}
 计算属性：
{{resverString}}
 计算属性：
{{resverString}}
 方法属性：
{{resv()}}
 方法属性：
{{resv()}}
 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中前端与后端如何实现交互_vue.js_

下一篇：Vue中为什么不推荐用index做key详解_vue.js_

相关内容

点击排行

本栏推荐

猜你喜欢

-六神源码网