vue全家桶进阶之路33：Vue3 计算属性computed-Toy模板网

这篇具有很好参考价值的文章主要介绍了vue全家桶进阶之路33：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函数定义计算属性的示例：

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>