Vue3 computed() 计算属性

 

 

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44

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