Vue计算属性

计算属性

为什么需要计算属性

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

计算属性的用法

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('');
        }
      }

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

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