- A+
在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>
