本文共 710 字，大约阅读时间需要 2 分钟。

Vue.js基础之计算属性

1. 反转字符串示例一

在模板 中使用计算属性我们可以轻松地实现字符串的反转操作。以下是一个简单的例子：

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

在这个示例中，我们直接在模板中使用了分割、逆序和重新连接字符串的操作。这种方法简洁直观，但需要注意，既然模板会被编译，你可能想在生产环境下避免在模板中直接使用 JavaScript 表达式。

2. 反转字符串示例二 - 使用计算属性

为了实现同样的效果，我们可以将反转操作转化为一个计算属性。计算属性会被 Vue.js 自动地转换为函数，可以高效地缓存其结果：

   
  
    
{{ reverseMessage }}
   

3. 计算属性与方法的区别

你可能已经想到了，无论是使用直接在模板中使用表达式，还是将其转化为计算属性，结束后的效果其实是一样的。但是，对于更复杂的逻辑来说，计算属性更值得选择。原因在于：

• 响应式缓存：计算属性会根据其依赖关系（比如 this.message ）自动缓存结果，只有当依赖发生变化时，才会重新计算。
• 更高效：如果多次访问计算属性（某个引用的复杂表达式），会比直接使用函数调用更高效，因为它只在必要时才会重新执行。

当然，我们也需要通过 methods 维度定义函数来满足需要：

   
  
    
{{ reverseMessage() }}
   

总结

计算属性在 Vue.js 中提供了一种强大的方式，将逻辑移动到数据属性中，避免了模板中逻辑过多的问题。通过合理的使用计算属性，我们可以更专注于业务逻辑，提升代码的可维护性和效率。