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。