观察下面一段代码，学习Vue计算属性
<template>
<div>
<span>用户大于10岁的数量：{{ userVue.filter(user=>user.age>10).length}}</span>
<span>用户大于10岁的数量2：{{ userAgeltTen}}</span>
<span>用户大于10岁的数量3：{{ userAgeltTenMethod()}}</span>
<span>用户姓名：{{ fullName }}</span>
<button @click="nameChange">姓名变化</button>
</div>
</template>
<script lang="ts" setup>
import { log } from 'console'
import { computed, nextTick } from 'vue'
import { ref } from 'vue'
import { reactive } from 'vue'
//定义一个数组
let users = [
{
userName: 'zhangsan',
age: 9,
sex: 'man'
},
{
userName: 'lisi',
age: 12,
sex: 'woman'
}
]
let userVue = reactive(users)
const userAgeltTen = computed(() => {
console.log("计算属性执行了")
return userVue.filter(user=>user.age>10).length
})
function userAgeltTenMethod(){
console.log("方法执行了")
return userVue.filter(user=>user.age>10).length
}
//因为模板调用了一次，计算属性没有再次执行而是返回来结果
console.log(userAgeltTen.value)
//方法再一次执行了
console.log(userAgeltTenMethod())
const firstName = ref("王")
const lastName = ref("五")
const fullName = computed( {
get(){
return firstName.value+","+lastName.value
},
set(names){
[firstName.value,lastName.value] = names.split(" ")
}
})
function nameChange(){
fullName.value = "赵 六"
}
</script>
<style scoped>
</style>它的输出如下图：
Vue 3 中的计算属性与 Vue 2 中的类似，但有一些重要的改进和变化。计算属性是依赖于响应式数据的属性，它们会根据其依赖的数据动态计算得出最新的值，类似于一个缓存机制，只有在依赖发生变化时才会重新计算。
在 Vue 3 中，计算属性的定义依然使用 computed 函数，但是有几个重要的改变：
-
使用
computed函数： 在 Vue 3 中，你可以使用computed函数来创建计算属性，而不再是使用对象的方式。import { computed } from 'vue'; export default { setup() { const count = ref(1); const squaredCount = computed(() => count.value * count.value); return { count, squaredCount }; } }; -
Composition API 的优势： Vue 3 引入了 Composition API，这使得计算属性的定义更加灵活和易于组织。你可以在
setup函数中使用computed函数，并且可以更方便地管理相关的依赖和逻辑。 -
缓存机制： 计算属性会自动缓存其返回值，只有在它的相关依赖项变化时才会重新计算。这一点与 Vue 2 中的计算属性相同，但在使用 Composition API 时更加明确和灵活。
总结来说，Vue 3 的计算属性依然是响应式的，但是在使用方式和性能上有一些优化和改进，尤其是在使用 Composition API 时更加灵活和清晰。
为什么要用计算属性？
核心就是计算属性会用到缓存，当监控值变量没有发生任何变化时，调用计算方法，不会执行函数内的内容，而是会立即返回结果：
<span>用户大于10岁的数量2：{{ userAgeltTen}}</span>
<span>用户大于10岁的数量3：{{ userAgeltTenMethod()}}</span>
const userAgeltTen = computed(() => {
console.log("计算属性执行了")
return userVue.filter(user=>user.age>10).length
})
function userAgeltTenMethod(){
console.log("方法执行了")
return userVue.filter(user=>user.age>10).length
}
//因为模板调用了一次，计算属性没有再次执行而是返回来结果
console.log(userAgeltTen.value)
//方法再一次执行了
console.log(userAgeltTenMethod())上面一段代码中，"计算属性执行了"，只会输出一次，而"方法执行了"，他会输出两次，原因是html中调用第一次后，console.log再次进行调用的时候会直接拿缓存中的值，而不是重新去计算一次，而方法就不行，方法每次调用都会去重新计算
计算属性的Get和Set
const firstName = ref("王")
const lastName = ref("五")
const fullName = computed( {
get(){
return firstName.value+","+lastName.value
},
set(names){
[firstName.value,lastName.value] = names.split(" ")
}
})
function nameChange(){
fullName.value = "赵 六"
}计算属性的值也可以直接使用.value进行赋值，调用计算属性的.value方法，会直接调用fullName的计算属性的set方法，在计算属性中的[firstName.value,lastName.value]这两个值也会重新赋值
关注公众号：资小库，问题快速答疑解惑
