【金秋打卡】第13天-vue3.0实现todolist-原创手记-慕课网

第一模块

课程名称：vue3.0实现todolist

章节名称：

3-10 介绍计算属性

讲师姓名：五月的夏天

第二模块

课程内容(概述)

1、讲解计算属性是什么？计算属性也是一个变量，只不过是通过计算后得到的

2、讲解计算属性如何使用

第三模块

介绍

在 vue 中，计算属性 computed 在项目开发过程中使用的还是比较频繁的，使用频率高。在 vue3.0 中，计算属性是如何使用的呢。现归纳下在项目中如何使用计算属性以及使用的场景。

使用

<template>
    <div>
        <p>初始值:{{count}}</p>
        <p>Computed单个值:{{computedCount}}</p>
        <p>Computed返回对象值:{{computedObtCount['100x']}}--{{computedObtCount['1000x']}}</p>
        <p><button @click="acctCount">点我一下</button></p>
    </div>
</template>
<script>
import { defineComponent, ref, computed } from 'vue'
export default defineComponent({
    name: 'VComputed',
    setup() {
        const count = ref(0)
        const acctCount = () => {
            count.value++
        }
        // 定义计算属性, 必须返回一个值
        const computedCount = computed(() => {
            return count.value * 10
        })
        // 计算多个属性，通过返回对象的方式来实现
        const computedObtCount = computed(() => {
            return {
                '100x': count.value * 100,
                '1000x': count.value * 1000
            }
        })
        return {
            count,
            acctCount,
            computedCount,
            computedObtCount
        }
    }
})
</script>

在App.vue引入使用

<VComputed />

效果

图片描述

总结

计算属性和生命周期一样，都是从 vue 中导出引入的。我们把计算属性当成一个函数来使用，直接 return 计算结果即可。

计算属性函数可以多次使用，可以返回一个值，也可以返回一个对象包含多个值。

常见使用场景：sku数量变更计算金额，购物车结算计算金额等

第四模块

学习截图
图片描述