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