Vue3中的computed属性

基本用法：

import {ref,computed} from 'vue'const count = ref(0)const doubleCount = computed(()=>{
return count.value*2})//创建计算属性console.log(doubleCount.value)//0
count.value=1
const.log(doubleCount.value)//2

如果我们要修改计算属性

const firstName = ref('John')
const lastName = ref('Doe')const fullName = computed({//获取计算结果get() {return `${firstName.value} ${lastName.value}`},//处理计算属性的赋值set(newValue) {const [newFirst, newLast] = newValue.split(' ')firstName.value = newFirstlastName.value = newLast}
})console.log(fullName.value) // "John Doe"
fullName.value = "Alice Smith"
console.log(firstName.value) // "Alice"
console.log(lastName.value) // "Smith"

那么与普通的方法又有什么区别呢(method)

computed注意它是一个属性，适用于复杂逻辑、需要多次使用的结果（不需要重复计算）

// 计算属性（有缓存）
const filteredList = computed(() => {return list.value.filter(item => item.active)
})// 方法（无缓存）
function getFilteredList() {return list.value.filter(item => item.active)
}

最后补充一点在组件中的使用

<template><div><p>原始值: {{ count }}</p><p>计算值: {{ doubleCount }}</p></div>
</template><script setup>
import { ref, computed } from 'vue'
const count = ref(10)
const doubleCount = computed(() => count.value * 2)
</script>