Vue3学习笔记（7.0）

Vue3计算属性

计算属性关键词：computed

计算属性在处理一些复杂逻辑时是很有用的。

可以看下以下反转字符的例子：

    
    
    
    
    


    

        {{message.split("").reverse().join('')}}
    

    

 接下来看看使用了计算属性的实例

    
    
    
    
    


    

        
原始字符串：{{message}}
        
反转后的字符串：{{reversedMessage}}
    

    

 在该示例中声明了一个计算属性reversedMessage

提供的函数将用作属性vm.reversedMessage的getter。

vm.reversedMessage依赖于vm.message，在vm.message发生改变时，vm.reversedMessage也会更新。

我们可以用methods来替代computed，效果上两个都是一样的，但是computed是基于它的依赖缓存，只有相关依赖发生改变时才会重新取值。而使用methods，在重新渲染的时候，函数总会重新调用执行。

下面就来看看一个示例

尴尬，一开始出现个这，检查一下代码，发现少了括号

 

    
    
    
    
    


    

        
原始字符串：{{message}}
        
使用computed反转后的字符串：{{reversedMessage}}
        
使用methods反转后的字符串：{{reversedMessage2()}}
    

    

 

这样就能正常显示了。

 可以说使用computed性能会更好，但是如果不希望缓存，我们可以使用methods属性。

computed setter

computed属性默认只有getter，不过需要时我们也可以提供一个setter：