计算属性缓存VS方法

计算属性缓存VS方法

❤ 计算属性computed和方法methods的区别

计算属性computed和方法methods，一样的功能二者都可以实现

1、使用方法

{{ reversedMessage() }}

 methods: {
     reversedMessage: function() {
       console.log('111')
       return this.message.split('').reverse().join('');
   }
  }
//输出俩 111

2、使用计算属性

computed: {
      reversedMessage: function () {
      console.log('111')
      return this.message.split('').reverse().join('')
     }
  }
//输出一个 111

区别：计算属性是基于它们的响应式依赖进行缓存的

• 如果message没有改变，那么将不再重新计算属性computed，而是从缓存中直接返回上一次的计算结果

• 而用方法methods，则每一次调用都会重新执行方法。

❤ 使用场景：

1. 在html中
-计算属性：
<p>{{reversedMsg}}</p>

-方法：
<p>{{reversedMsg()}}</p>

2. 在组件中

-计算属性：
computed: {
   reversedMsg: function(){
	return this.message.split('').reverse().join('')
    }
}

-方法：
methods: {
    reversedMsg: function(){
	return this.message.split('').reverse().join('')
    }
}