在Vue3中，計算屬性可以使用computed函式來定義，
computed函式接受兩個引數：第一個引數是一個函式，該函式回傳計算屬性的值；第二個引數是一個可選的配置物件，可以包含getter和setter函式，以及控制計算屬性快取的快取配置，
Vue3中的計算屬性與Vue2中的計算屬性相比有以下幾個變化：
-
使用
computed函式 Vue3中使用computed函式來定義計算屬性，而不是Vue2中使用computed屬性， -
支持
ref和reactive回應式物件 Vue3中的計算屬性不僅支持data物件上的回應式屬性，還支持ref和reactive回應式物件， -
計算屬性不再是組件選項 Vue3中的計算屬性不再作為組件選項，而是在
setup()函式中定義， -
更好的性能 Vue3中的計算屬性與Vue2相比具有更好的性能，Vue3通過使用基于Proxy的回應式系統，優化了計算屬性的性能，此外，Vue3還引入了快取策略，以避免計算屬性的重復計算，
下面是一個使用Vue3中的computed函式定義計算屬性的示例：
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函式定義的回應式物件，fullName計算屬性的值是通過連接state.firstName和state.lastName獲得的，請注意，fullName計算屬性是在setup函式中定義的，
你可以在模板中使用fullName計算屬性：
<template>
<div>{{ fullName }}</div>
</template>
每當state.firstName或state.lastName發生更改時，fullName計算屬性的值將重新計算，這是因為Vue會自動追蹤state.firstName和state.lastName的依賴關系，并在依賴項發生更改時重新計算計算屬性的值，
以下是一個使用computed函式定義計算屬性的非常基本的操作示例：
<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函式中定義的，
可以在模板中使用fullName計算屬性：
<template>
<div>{{ fullName }}</div>
</template>
每當firstName或lastName發生更改時，fullName計算屬性的值將重新計算，這是因為Vue會自動追蹤firstName和lastName的依賴關系，并在依賴項發生更改時重新計算計算屬性的值，
以下是另一個示例：
<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>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/550462.html
標籤：其他
上一篇：git merge 提示錯誤 fatal: refusing to merge unrelated histories