Vue3 computed() 计算属性

 

 

<template>
	<span>
		<p>普通属性:{{num}}</p>
		<p>计算属性-只读:{{numAdd}}</p>
		<p>计算属性-可读写:{{numAdd2}}</p>
		<button @click="numUpdate">修改普通属性</button>
		<button @click="numAddUpdate">修改计算属性</button>
	</span>
</template>

<script setup>
    import {
        ref,
        computed
    } from "vue"

    var num = ref(10)
    var num2 = ref(10)
    var numAdd = computed(() => {
        return num.value + 1;
    })
    var numAdd2 = computed({
        get: () => {
            return num2.value + 1;
        },
        set: val => {
			num2.value = val;
        }
    })


    // 修改普通属性
    var numUpdate = () => {
        num.value++; // 可以修改
    }

    // 修改计算属性
    var numAddUpdate = () => {
        console.log("numAdd.value:" + numAdd.value)
        numAdd.value + 1; // 不可修改
        console.log("numAdd2.value:" + numAdd2.value)
        numAdd2.value = 100; // 可以修改
    }
</script>