Vue计算属性

标签:fun   bsp   调用   直接   http   vue   sem   技术   rgba   

计算属性

为什么需要计算属性

 把复杂的计算逻辑用简洁的模板内容体现出来。

计算属性的用法

computed: {
        reverseString: function(){
          return this.msg.split(‘‘).reverse().join(‘‘);
        }
      }

弄好了直接在页面中引用计算属性的方法名

<div>{{reverseString}}</div>

对比原方法

<div>{{msg.split(‘‘).reverse().join(‘‘)}}</div>

最后得到的结果是一样的

技术图片

 

 计算属性与方法的区别

  • 计算属性是基于他们的依赖进行缓存的  --- 可以节省性能
  • 方法不存在缓存

缓存 在计算属性中添加一个日志 我们将该计算属性运行两遍

methods: {
        reverseMessage: function(){
          console.log(‘methods‘)
          return this.msg.split(‘‘).reverse().join(‘‘);
        }
      }

查看控制台发现只有一次打印结果。说明,当第一次运行时,我们缓存了她的结果,第二次运行时就可以直接调用,这样可以提高性能。

而方法不存在缓存,调用多少遍方法就会执行多少遍。

 

Vue计算属性

标签:fun   bsp   调用   直接   http   vue   sem   技术   rgba   

原文地址:https://www.cnblogs.com/limu-zy/p/14130653.html

版权声明:完美者 发表于 2020-12-18 13:08:47。
转载请注明:Vue计算属性 | 完美导航

暂无评论

暂无评论...