项目地址 gitee.com/fe521/vue3-…

计算属性

computed 默认的使用方式

<template>
    <div class="home">
        <p>
            年龄：
            <button type="button" @click="changeAge(-1)">-</button>
            {{ age }}
            <button type="button" @click="changeAge(1)">+</button>
        </p>
        <p>出生年份：{{ year }}</p>
        <button @click="handleClick">handleClick</button>
    </div>
</template>

<script>
import {computed, ref} from 'vue';
export default {
    name: 'Home',
    components: {},
    setup() {
        const age = ref(19);

        function changeAge(value) {
            age.value += value;
        }
        const year = computed(() => {
            return 2020 - age.value;
        });

        return {
            year,
            age,
            changeAge
        };
    }
};
</script>

computed getter 和 setter

<template>
    <div class="home">
        <p>
            年龄：
            <button type="button" @click="changeAge(-1)">-</button>
            {{ age }}
            <button type="button" @click="changeAge(1)">+</button>
        </p>
        <p>
            出生年份：
            <button type="button" @click="changeYear(-1)">-</button>
            {{ year }}
            <button type="button" @click="changeYear(1)">+</button>
        </p>
        <button @click="handleClick">handleClick</button>
    </div>
</template>

<script>
import {computed, ref} from 'vue';
export default {
    name: 'Home',
    components: {},
    setup() {
        const age = ref(19);
        function changeAge(value) {
            age.value += value;
        }
        // const year = computed(() => {
        //     return 2020 - age.value;
        // });
        const year = computed({
            get() {
                return 2020 - age.value;
            },
            set(val) {
                age.value = 2020 - val;
            }
        });

        function changeYear(value) {
            year.value = year.value + value;
        }

        return {
            year,
            age,
            changeYear,
            changeAge
        };
    }
};
</script>