使用 toRefs 让数据变为响应式的

.idea/workspace.xml

@@ -4,8 +4,9 @@
     <option name="autoReloadType" value="SELECTIVE" />
   </component>
   <component name="ChangeListManager">
-    <list default="true" id="82d74fc6-f54a-4255-8e7b-990e62fbaaf1" name="更改" comment="使用 Object.assign() 合并对象（修改属性并更新页面），区别于ref、reactive不可更新数据问题">
+    <list default="true" id="82d74fc6-f54a-4255-8e7b-990e62fbaaf1" name="更改" comment="defineProps，实现简单的父传子">
       <change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/App.vue" beforeDir="false" afterPath="$PROJECT_DIR$/src/App.vue" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/src/components/Person.vue" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/Person.vue" afterDir="false" />
     </list>
     <option name="SHOW_DIALOG" value="false" />
@@ -27,21 +28,21 @@
     <option name="hideEmptyMiddlePackages" value="true" />
     <option name="showLibraryContents" value="true" />
   </component>
-  <component name="PropertiesComponent"><![CDATA[{
+  <component name="PropertiesComponent">{
-  "keyToString": {
+  &quot;keyToString&quot;: {
-    "RunOnceActivity.ShowReadmeOnStart": "true",
+    &quot;RunOnceActivity.ShowReadmeOnStart&quot;: &quot;true&quot;,
-    "RunOnceActivity.git.unshallow": "true",
+    &quot;RunOnceActivity.git.unshallow&quot;: &quot;true&quot;,
-    "git-widget-placeholder": "dev",
+    &quot;git-widget-placeholder&quot;: &quot;dev&quot;,
-    "node.js.detected.package.eslint": "true",
+    &quot;node.js.detected.package.eslint&quot;: &quot;true&quot;,
-    "node.js.detected.package.tslint": "true",
+    &quot;node.js.detected.package.tslint&quot;: &quot;true&quot;,
-    "node.js.selected.package.eslint": "(autodetect)",
+    &quot;node.js.selected.package.eslint&quot;: &quot;(autodetect)&quot;,
-    "node.js.selected.package.tslint": "(autodetect)",
+    &quot;node.js.selected.package.tslint&quot;: &quot;(autodetect)&quot;,
-    "nodejs_package_manager_path": "npm",
+    &quot;nodejs_package_manager_path&quot;: &quot;npm&quot;,
-    "settings.editor.selected.configurable": "preferences.keymap",
+    &quot;settings.editor.selected.configurable&quot;: &quot;preferences.keymap&quot;,
-    "ts.external.directory.path": "/Volumes/Date/01_Demo/07-Vue3/node_modules/typescript/lib",
+    &quot;ts.external.directory.path&quot;: &quot;/Volumes/Date/01_Demo/07-Vue3/node_modules/typescript/lib&quot;,
-    "vue.rearranger.settings.migration": "true"
+    &quot;vue.rearranger.settings.migration&quot;: &quot;true&quot;
   }
-}]]></component>
+}</component>
   <component name="SharedIndexes">
     <attachedChunks>
       <set>
@@ -58,6 +59,7 @@
       <option name="presentableId" value="Default" />
       <updated>1745919613888</updated>
       <workItem from="1745919615396" duration="326000" />
+      <workItem from="1746189663982" duration="1161000" />
     </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" />
@@ -107,12 +109,39 @@
       <option name="project" value="LOCAL" />
       <updated>1745934177134</updated>
     </task>
-    <option name="localTasksCounter" value="7" />
+    <task id="LOCAL-00007" summary="ref、修改对象传入更新数据问题">
+      <option name="closed" value="true" />
+      <created>1745934687739</created>
+      <option name="number" value="00007" />
+      <option name="presentableId" value="LOCAL-00007" />
+      <option name="project" value="LOCAL" />
+      <updated>1745934687740</updated>
+    </task>
+    <task id="LOCAL-00008" summary="defineProps，实现简单的父传子">
+      <option name="closed" value="true" />
+      <created>1746189895108</created>
+      <option name="number" value="00008" />
+      <option name="presentableId" value="LOCAL-00008" />
+      <option name="project" value="LOCAL" />
+      <updated>1746189895108</updated>
+    </task>
+    <option name="localTasksCounter" value="9" />
     <servers />
   </component>
   <component name="TypeScriptGeneratedFilesManager">
     <option name="version" value="3" />
   </component>
+  <component name="Vcs.Log.Tabs.Properties">
+    <option name="TAB_STATES">
+      <map>
+        <entry key="MAIN">
+          <value>
+            <State />
+          </value>
+        </entry>
+      </map>
+    </option>
+  </component>
   <component name="VcsManagerConfiguration">
     <MESSAGE value="Vue2 &amp; Vue3 中data 与setup 数据的调用情况" />
     <MESSAGE value="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" />
@@ -121,6 +150,8 @@
     <MESSAGE value="ref 变量 和 reaction 对象的使用" />
     <MESSAGE value="reaction 对象的使用 v-for" />
     <MESSAGE value="使用 Object.assign() 合并对象（修改属性并更新页面），区别于ref、reactive不可更新数据问题" />
-    <option name="LAST_COMMIT_MESSAGE" value="使用 Object.assign() 合并对象（修改属性并更新页面），区别于ref、reactive不可更新数据问题" />
+    <MESSAGE value="ref、修改对象传入更新数据问题" />
+    <MESSAGE value="defineProps，实现简单的父传子" />
+    <option name="LAST_COMMIT_MESSAGE" value="defineProps，实现简单的父传子" />
   </component>
 </project>

src/App.vue

@@ -3,10 +3,6 @@ import Person from "@/components/Person.vue";
 </script>
 
 <template>
-  <header>
-
-  </header>
-
   <main>
     <Person/>
   </main>

src/components/Person.vue

@@ -1,47 +1,34 @@
 <script setup lang="ts">
-import {reactive, ref} from "vue";
+import {reactive, toRefs} from "vue";
 
-//let car = reactive(
+let person = reactive({
-//    {brand: '宝马',price:100}
+  name:'张三',
-//)
+  age:18,
- let car = ref(
+})
-    {brand: '宝马',price:100}
-)
 
-function changeBrand(){
+let {name,age} = toRefs(person)
-  car.value.brand = '三菱'
+
+function changeName(){
+  //person.name = person.name + '~'
+  person.name += '~'
 }
-function changePrice(){
-  car.value.price += 10
-}
-function changeCar(){
-  //car = {brand: '五菱宏观',price:5} // 页面不更新
-  //car = reactive({brand: '五菱宏观',price:5}) // 新指排了对象，页面不显示
-  //Object.assign(car,{brand: '五菱宏观',price:5}) // 合并对象
 
-  car.value = reactive({brand: '五菱宏观',price:5}) // 改成ref的话可以
+function changeAge(){
-
+  person.age +=1
-  //用法等同于 ⬇️
-  //const target = { a: 1 };
-  //const source1 = { b: 2 };
-  //const source2 = { c: 3 };
-  //
-  //const result = Object.assign(target, source1, source2);
-  //console.log(result); // { a: 1, b: 2, c: 3 }
 }
 </script>
 
 <template>
   <main>
-    <h1>汽车：{{car.brand}}===价格：{{car.price}}w</h1>
+    <h1>姓名：{{name}}</h1>
-    <button @click="changeBrand">修改名字</button>
+    <h1>年龄：{{age}}</h1>
-    <button @click="changePrice">价格+10</button>
+    <button @click="changeName">修改名字</button>
-    <button @click="changeCar">整体修改</button>
+    <button @click="changeAge">年龄+1</button>
   </main>
 </template>
 
 <style scoped>
 button {
-  margin: 0 1.5rem;
+  margin: 0 1rem;
 }
 </style>