在Vue3中，計算屬性可以使用computed函數(shù)來定義。
computed函數(shù)接受兩個參數(shù)：第一個參數(shù)是一個函數(shù)，該函數(shù)返回計算屬性的值；第二個參數(shù)是一個可選的配置對象，可以包含getter和setter函數(shù)，以及控制計算屬性緩存的緩存配置。
Vue3中的計算屬性與Vue2中的計算屬性相比有以下幾個變化：
-
使用
computed函數(shù) Vue3中使用computed函數(shù)來定義計算屬性，而不是Vue2中使用computed屬性。 -
支持
ref和reactive響應式對象 Vue3中的計算屬性不僅支持data對象上的響應式屬性，還支持ref和reactive響應式對象。 -
計算屬性不再是組件選項 Vue3中的計算屬性不再作為組件選項，而是在
setup()函數(shù)中定義。 -
更好的性能 Vue3中的計算屬性與Vue2相比具有更好的性能。Vue3通過使用基于Proxy的響應式系統(tǒng)，優(yōu)化了計算屬性的性能。此外，Vue3還引入了緩存策略，以避免計算屬性的重復計算。
下面是一個使用Vue3中的computed函數(shù)定義計算屬性的示例：
import { computed, reactive } from 'vue';
export default {
setup() {
const state = reactive({
firstName: 'John',
lastName: 'Doe'
});
const fullName = computed(() => `${state.firstName} ${state.lastName}`);
return { fullName };
}
};
在這個例子中，state對象是使用reactive函數(shù)定義的響應式對象。fullName計算屬性的值是通過連接state.firstName和state.lastName獲得的。請注意，fullName計算屬性是在setup函數(shù)中定義的。
你可以在模板中使用fullName計算屬性：
<template>
<div>{{ fullName }}</div>
</template>
每當state.firstName或state.lastName發(fā)生更改時，fullName計算屬性的值將重新計算。這是因為Vue會自動追蹤state.firstName和state.lastName的依賴關(guān)系，并在依賴項發(fā)生更改時重新計算計算屬性的值。
?
以下是一個使用computed函數(shù)定義計算屬性的非?；镜牟僮魇纠?/p>
<script>
import { computed } from "vue";
export default {
setup() {
const firstName = "John";
const lastName = "Doe";
const fullName = computed(() => `${firstName} ${lastName}`);
return { fullName };
},
};
</script>
在這個例子中，fullName計算屬性的值是通過將firstName和lastName連接起來獲得的。注意，由于Vue3使用了Composition API，因此計算屬性是在setup函數(shù)中定義的。
可以在模板中使用fullName計算屬性：
<template>
<div>{{ fullName }}</div>
</template>
每當firstName或lastName發(fā)生更改時，fullName計算屬性的值將重新計算。這是因為Vue會自動追蹤firstName和lastName的依賴關(guān)系，并在依賴項發(fā)生更改時重新計算計算屬性的值。
以下是另一個示例：文章來源：http://www.zghlxwxcb.cn/news/detail-417439.html
<template>
<div>{{ num1 }}---{{ num2 }}---{{ num3 }}</div>
<button @click="add">add</button>
</template>
<script>
import { defineComponent, computed, ref } from "vue";
export default defineComponent({
setup() {
let num1 = ref(10);
let num2 = ref(11);
let num3 = computed(() => {
return num1.value + num2.value;
});
let add = () => {
num1.value++;
};
return {
num1,
num2,
num3,
add,
};
},
});
</script>
?文章來源地址http://www.zghlxwxcb.cn/news/detail-417439.html
到了這里，關(guān)于vue全家桶進階之路33：Vue3 計算屬性computed的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
