vue全家桶进阶之路33:Vue3 计算属性computed

在Vue3中,计算属性可以使用computed函数来定义。

computed函数接受两个参数:第一个参数是一个函数,该函数返回计算属性的值;第二个参数是一个可选的配置对象,可以包含getter和setter函数,以及控制计算属性缓存的缓存配置。

Vue3中的计算属性与Vue2中的计算属性相比有以下几个变化:

  1. 使用computed函数 Vue3中使用computed函数来定义计算属性,而不是Vue2中使用computed属性。

  2. 支持refreactive响应式对象 Vue3中的计算属性不仅支持data对象上的响应式属性,还支持refreactive响应式对象。

  3. 计算属性不再是组件选项 Vue3中的计算属性不再作为组件选项,而是在setup()函数中定义。

  4. 更好的性能 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.firstNamestate.lastName获得的。请注意,fullName计算属性是在setup函数中定义的。

你可以在模板中使用fullName计算属性:

<template>
  <div>{{ fullName }}</div>
</template>

每当state.firstNamestate.lastName发生更改时,fullName计算属性的值将重新计算。这是因为Vue会自动追踪state.firstNamestate.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计算属性的值是通过将firstNamelastName连接起来获得的。注意,由于Vue3使用了Composition API,因此计算属性是在setup函数中定义的。

可以在模板中使用fullName计算属性:

<template>
  <div>{{ fullName }}</div>
</template>

每当firstNamelastName发生更改时,fullName计算属性的值将重新计算。这是因为Vue会自动追踪firstNamelastName的依赖关系,并在依赖项发生更改时重新计算计算属性的值。

以下是另一个示例:

<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>

 

热门相关:超武穿梭   寂静王冠   刺客之王   时间都知道(唐嫣、窦骁、杨烁主演)   寂静王冠