vue的计算属性和方法有什么区别（vue全家桶进阶之路33：Vue3 计算属性computed）

时间2025-07-17 07:24:09分类IT科技浏览4188

导读：在Vue3中，计算属性可以使用computed函数来定义。...

在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函数定义计算属性的示例：

在这个例子中，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函数定义计算属性的非常基本的操作示例：

在这个例子中，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>

声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。