computed

在Vue.js中，computed 是一种属性，用于定义基于依赖状态的响应式计算属性。它是Vue提供的一个强大特性，允许你在模板中以声明式的方式处理数据的计算逻辑。

`computed` 的特点：

响应式： computed 属性是响应式的，它们会根据依赖的数据进行更新，只有在依赖的数据发生改变时才会重新求值。
缓存： 计算属性会根据它们的依赖进行缓存，只有当依赖值发生改变时才会重新计算。这意味着只要相关依赖没有改变，多次访问计算属性会立即返回之前的计算结果，而不会重新执行计算函数。

如何使用 `computed`：

你可以在 Vue 实例中的 computed 对象中定义计算属性，这些属性可以依赖于 Vue 实例的数据。比如：

javascriptCopy 复制代码

new Vue({
  data: {
    a: 1,
    b: 2
  },
  computed: {
    // 一个计算属性的 getter
    sum: function () {
      return this.a + this.b;
    }
  }
});

然后你可以在模板中使用这个计算属性 sum：

htmlCopy 复制代码

<div>
  <p>Computed Sum: {{ sum }}</p>
</div>

示例说明：

当 a 或者 b 发生变化时，sum 计算属性会自动更新。这是因为 Vue 能够追踪到 sum 依赖的 a 和 b，并在它们发生变化时重新计算 sum 的值。

使用 computed 的好处之一是它使得模板更加清晰和简洁。你可以将复杂的逻辑封装在 computed 中，而不必将这些逻辑直接放在模板中。

总结：

computed 是 Vue.js 中一个非常有用的特性，它允许你以声明式的方式定义依赖属性，并根据这些属性进行响应式的计算。这对于处理模板中的逻辑和复杂计算十分有帮助，使得代码更易读、易维护。

实战演练

根据天气的温度选择穿什么衣服。

html 复制代码

<body>
    <div id="app"></div>
    <template id="my-app">
       <h2>当前温度：{{temp}}</h2>
        <h3>建议穿：{{cloth}}</h3>
        <button @click="minus">-5</button>
        <button @click="add">+5</button>
    </template>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/3.3.4/vue.global.js"></script>
    <script>
        const app = Vue.createApp({
            template:'#my-app',
            data(){
                return{
                    temp:20,
                    // cloth:'夹克'
                    }
                },
            computed:{   //计算属性是响应式执行的，
                         // 函数会在所依赖的变量值发生改变时自动重新执行
                cloth(){
                    if (this.temp <= 10) {
                        return '棉袄'
                     } else if (this.temp <= 20) {
                        return '夹克'
                    } else {
                        return '短袖'
                    }
                }
            },
            methods:{
                minus(){
                    this.temp-=5
                },
                add(){
                    this.temp+=5
                }
            }
  
        }).mount('#app')
        
    </script>
</body>

当computed追踪的temp发生改变时，重新执行函数cloth。

vue指令第四关，马上通关

computed

computed 的特点：

如何使用 computed：

示例说明：

总结：

实战演练

`computed` 的特点：

如何使用 `computed`：