From 24be73a538f2e8d9aaf2ac9f9555422a4b2b63ac Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BA=91=E4=B8=8A=E8=B4=B5=E7=8C=AA?= <290425385@qq.com>
Date: Fri, 2 May 2025 20:44:48 +0800
Subject: [PATCH] =?UTF-8?q?defineProps=EF=BC=8C=E5=AE=9E=E7=8E=B0=E7=AE=80?=
 =?UTF-8?q?=E5=8D=95=E7=9A=84=E7=88=B6=E4=BC=A0=E5=AD=90?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .idea/workspace.xml       | 56 +++++++++++++++++++++++++++------------
 src/App.vue               |  6 +----
 src/components/Person.vue | 41 ++++------------------------
 3 files changed, 45 insertions(+), 58 deletions(-)

diff --git a/.idea/workspace.xml b/.idea/workspace.xml
index 01461be..2e64a70 100644
--- a/.idea/workspace.xml
+++ b/.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="ref、修改对象传入更新数据问题">
       <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[{
-  "keyToString": {
-    "RunOnceActivity.ShowReadmeOnStart": "true",
-    "RunOnceActivity.git.unshallow": "true",
-    "git-widget-placeholder": "dev",
-    "node.js.detected.package.eslint": "true",
-    "node.js.detected.package.tslint": "true",
-    "node.js.selected.package.eslint": "(autodetect)",
-    "node.js.selected.package.tslint": "(autodetect)",
-    "nodejs_package_manager_path": "npm",
-    "settings.editor.selected.configurable": "preferences.keymap",
-    "ts.external.directory.path": "/Volumes/Date/01_Demo/07-Vue3/node_modules/typescript/lib",
-    "vue.rearranger.settings.migration": "true"
+  <component name="PropertiesComponent">{
+  &quot;keyToString&quot;: {
+    &quot;RunOnceActivity.ShowReadmeOnStart&quot;: &quot;true&quot;,
+    &quot;RunOnceActivity.git.unshallow&quot;: &quot;true&quot;,
+    &quot;git-widget-placeholder&quot;: &quot;dev&quot;,
+    &quot;node.js.detected.package.eslint&quot;: &quot;true&quot;,
+    &quot;node.js.detected.package.tslint&quot;: &quot;true&quot;,
+    &quot;node.js.selected.package.eslint&quot;: &quot;(autodetect)&quot;,
+    &quot;node.js.selected.package.tslint&quot;: &quot;(autodetect)&quot;,
+    &quot;nodejs_package_manager_path&quot;: &quot;npm&quot;,
+    &quot;settings.editor.selected.configurable&quot;: &quot;preferences.keymap&quot;,
+    &quot;ts.external.directory.path&quot;: &quot;/Volumes/Date/01_Demo/07-Vue3/node_modules/typescript/lib&quot;,
+    &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="191000" />
     </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,31 @@
       <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>
+    <option name="localTasksCounter" value="8" />
     <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 +142,7 @@
     <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、修改对象传入更新数据问题" />
+    <option name="LAST_COMMIT_MESSAGE" value="ref、修改对象传入更新数据问题" />
   </component>
 </project>
\ No newline at end of file
diff --git a/src/App.vue b/src/App.vue
index a79db58..52a886e 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -3,12 +3,8 @@ import Person from "@/components/Person.vue";
 </script>
 
 <template>
-  <header>
-
-  </header>
-
   <main>
-<Person />
+    <Person name="xxxx"/>
   </main>
 </template>
 
diff --git a/src/components/Person.vue b/src/components/Person.vue
index b2eb9b5..c4e29e0 100644
--- a/src/components/Person.vue
+++ b/src/components/Person.vue
@@ -1,47 +1,16 @@
 <script setup lang="ts">
-import {reactive, ref} from "vue";
+defineProps({
+  name:String,
+})
 
-//let car = reactive(
-//    {brand: '宝马',price:100}
-//)
- let car = ref(
-    {brand: '宝马',price:100}
-)
-
-function changeBrand(){
-  car.value.brand = '三菱'
-}
-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的话可以
-
-  //用法等同于 ⬇️
-  //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>
-    <button @click="changeBrand">修改名字</button>
-    <button @click="changePrice">价格+10</button>
-    <button @click="changeCar">整体修改</button>
+    <h1>名字是{{name}}</h1>
   </main>
 </template>
 
 <style scoped>
-button {
-  margin: 0 1.5rem;
-}
+
 </style>