对于任何包含响应式数据的复杂逻辑，你都应该使用计算属性

computed 表示对数据的格式化操作。把复杂逻辑从v中 转到 vm中实现[关注点分离]，使v界面更加简洁。 计算属性的结果会被缓存，除非依赖的响应式 property 变换才会重新计算。 注：如果某个依赖(比如非响应式 property)在该实例范畴之外，则计算属性时不会被更新的。

这样说可能不方便理解，在模板中放入太多的逻辑会让模板过重且难以维护，来看一个案例：

  • 将msg反向输出到界面 ```html
    {{ msg.split(‘’).reverse().join(‘’) }} 

  1. 此时，我们的模版中放入了逻辑操作，v变得非常杂乱不干净，难以维护。vue为我们提供了解决方法， `computed` 将复杂的逻辑从v中转到vm中。所以，对于任何包含响应式数据的复杂逻辑，你都应该使用**计算属性，**没错是应该，至于为什么下面会提到。
  3. <a name="4ZLLM"></a>
  4. ### 基本例子
  5. ```html
  6. <body>
  7.     <div id="app">
  8.         <span>{{ reverseMsg }}</span> // 模块中直接使用声明的计算属性reverseMsg
  9.     </div>
  10. </body>
  12. <script>
  13.     Vue.createApp({
  14.         data() {
  15.             return {
  16.                 msg: 'Hello Vue'
  17.             }
  18.         },
  19.         computed: {
  20.             reverseMsg() {
  21.                 return this.msg.split('').reverse().join('')
  22.             }
  23.         }
  24.     }).mount('#app')
  25. </script>

计算属性缓存 vs 方法

你可能已经注意到我们可以通过在表达式中调用方法来达到同样的效果：

  1. <span>{{ reverseMsg() }}</span>
  1. // 在组件中
  2. methods: {
  3.   reverseMsg() {
  4.     return this.msg.split('').reverse().join('')
  5.   }
  6. }

我们可以将同一函数定义为一个方法而不是一个计算属性。两种方式的最终结果确实是完全相同的。不同的是计算属性是基于它们的反应依赖关系缓存的。计算属性只有在相关响应式依赖发生改变时它们才会重新求值。这就意味着只要案例中 msg 还没有发生改变，多次访问 reverseMsg 计算属性会立即返回之前的计算结果，而不必再次执行函数。

这也同意意味着下面这样的计算属性将不再更新，因为Date.now()不是响应式依赖：

  1. computed:{
  2.   now(){
  3.       return Date.now()    
  4.   }
  5. }

在模版中多次使用计算属性now得到的结果会是一样的，因为now的结果会被放入缓存，多次使用访问都会立即返回之前的计算结果。所以展现在页面的结果会是一样的，反观如果是个方法那么再展示在页面上的结果会是不一样的。

计算属性的Setter

计算属性默认只要getter，不过在需要时候你也可以提供一个setter，将计算属性写成一个对象也不是方法即可：
来看一个案例

  • 输入姓和名自动补全全名，输入全名自动补全姓和名 ```html


```