computed 写法是标准的带 get/set 的计算属性写法

.idea/workspace.xml

@@ -4,7 +4,7 @@
     <option name="autoReloadType" value="SELECTIVE" />
   </component>
   <component name="ChangeListManager">
-    <list default="true" id="82d74fc6-f54a-4255-8e7b-990e62fbaaf1" name="更改" comment="使用 toRef 一次只能取一次数据">
+    <list default="true" id="82d74fc6-f54a-4255-8e7b-990e62fbaaf1" name="更改" comment="computed 计算属性，">
       <change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/src/components/Person.vue" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/Person.vue" afterDir="false" />
     </list>
@@ -58,7 +58,7 @@
       <option name="presentableId" value="Default" />
       <updated>1745919613888</updated>
       <workItem from="1745919615396" duration="326000" />
-      <workItem from="1746189663982" duration="2611000" />
+      <workItem from="1746189663982" duration="2970000" />
     </task>
     <task id="LOCAL-00001" summary="Merge remote-tracking branch 'vue3-学习仓库/dev' into dev&#10;&#10;# Conflicts:&#10;#&#9;.idea/workspace.xml&#10;#&#9;README.md&#10;#&#9;src/components/Person.vue">
       <option name="closed" value="true" />
@@ -140,7 +140,15 @@
       <option name="project" value="LOCAL" />
       <updated>1746191210625</updated>
     </task>
-    <option name="localTasksCounter" value="11" />
+    <task id="LOCAL-00011" summary="computed 计算属性，">
+      <option name="closed" value="true" />
+      <created>1746192333201</created>
+      <option name="number" value="00011" />
+      <option name="presentableId" value="LOCAL-00011" />
+      <option name="project" value="LOCAL" />
+      <updated>1746192333201</updated>
+    </task>
+    <option name="localTasksCounter" value="12" />
     <servers />
   </component>
   <component name="TypeScriptGeneratedFilesManager">
@@ -169,6 +177,7 @@
     <MESSAGE value="defineProps，实现简单的父传子" />
     <MESSAGE value="使用 toRefs 让数据变为响应式的" />
     <MESSAGE value="使用 toRef 一次只能取一次数据" />
-    <option name="LAST_COMMIT_MESSAGE" value="使用 toRef 一次只能取一次数据" />
+    <MESSAGE value="computed 计算属性，" />
+    <option name="LAST_COMMIT_MESSAGE" value="computed 计算属性，" />
   </component>
 </project>

src/components/Person.vue

@@ -5,11 +5,22 @@ let firstName = ref('zhang')
 let listName =ref('san')
 
 // 计算属性有缓存
-let myName = computed(()=>{
+let myName = computed({
   //return firstName.value + listName.value
-  return firstName.value.slice(0,1).toUpperCase() + firstName.value.slice(1) + '-' + listName.value
+  get(){
+    return firstName.value.slice(0,1).toUpperCase() + firstName.value.slice(1) + '-' + listName.value
+  },
+  set(setName){
+    const [val1,val2] = setName.split('-')
+    firstName.value = val1
+    listName.value = val2
+  }
 })
 
+function changeName(){
+  myName.value = 'li-si'
+}
+
 </script>
 
 <template>
@@ -18,7 +29,8 @@ let myName = computed(()=>{
     名：<input type="text" v-model:="listName">
   </main>
   <h1>姓名：{{myName}}</h1>
-  <!--<button></button>-->
+
+  <button @click="changeName">改名</button>
 </template>
 
 <style scoped>