.idea/workspace.xml

@@ -4,9 +4,8 @@
     <option name="autoReloadType" value="SELECTIVE" />
   </component>
   <component name="ChangeListManager">
-    <list default="true" id="82d74fc6-f54a-4255-8e7b-990e62fbaaf1" name="更改" comment="defineProps，实现简单的父传子">
+    <list default="true" id="82d74fc6-f54a-4255-8e7b-990e62fbaaf1" name="更改" comment="使用 Object.assign() 合并对象（修改属性并更新页面），区别于ref、reactive不可更新数据问题">
       <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" />
@@ -28,21 +27,21 @@
     <option name="hideEmptyMiddlePackages" value="true" />
     <option name="showLibraryContents" value="true" />
   </component>
-  <component name="PropertiesComponent">{
+  <component name="PropertiesComponent"><![CDATA[{
-  &quot;keyToString&quot;: {
+  "keyToString": {
-    &quot;RunOnceActivity.ShowReadmeOnStart&quot;: &quot;true&quot;,
+    "RunOnceActivity.ShowReadmeOnStart": "true",
-    &quot;RunOnceActivity.git.unshallow&quot;: &quot;true&quot;,
+    "RunOnceActivity.git.unshallow": "true",
-    &quot;git-widget-placeholder&quot;: &quot;dev&quot;,
+    "git-widget-placeholder": "dev",
-    &quot;node.js.detected.package.eslint&quot;: &quot;true&quot;,
+    "node.js.detected.package.eslint": "true",
-    &quot;node.js.detected.package.tslint&quot;: &quot;true&quot;,
+    "node.js.detected.package.tslint": "true",
-    &quot;node.js.selected.package.eslint&quot;: &quot;(autodetect)&quot;,
+    "node.js.selected.package.eslint": "(autodetect)",
-    &quot;node.js.selected.package.tslint&quot;: &quot;(autodetect)&quot;,
+    "node.js.selected.package.tslint": "(autodetect)",
-    &quot;nodejs_package_manager_path&quot;: &quot;npm&quot;,
+    "nodejs_package_manager_path": "npm",
-    &quot;settings.editor.selected.configurable&quot;: &quot;preferences.keymap&quot;,
+    "settings.editor.selected.configurable": "preferences.keymap",
-    &quot;ts.external.directory.path&quot;: &quot;/Volumes/Date/01_Demo/07-Vue3/node_modules/typescript/lib&quot;,
+    "ts.external.directory.path": "/Volumes/Date/01_Demo/07-Vue3/node_modules/typescript/lib",
-    &quot;vue.rearranger.settings.migration&quot;: &quot;true&quot;
+    "vue.rearranger.settings.migration": "true"
   }
-}</component>
+}]]></component>
   <component name="SharedIndexes">
     <attachedChunks>
       <set>
@@ -59,7 +58,6 @@
       <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" />
@@ -109,39 +107,12 @@
       <option name="project" value="LOCAL" />
       <updated>1745934177134</updated>
     </task>
-    <task id="LOCAL-00007" summary="ref、修改对象传入更新数据问题">
+    <option name="localTasksCounter" value="7" />
-      <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" />
@@ -150,8 +121,6 @@
     <MESSAGE value="ref 变量 和 reaction 对象的使用" />
     <MESSAGE value="reaction 对象的使用 v-for" />
     <MESSAGE value="使用 Object.assign() 合并对象（修改属性并更新页面），区别于ref、reactive不可更新数据问题" />
-    <MESSAGE value="ref、修改对象传入更新数据问题" />
+    <option name="LAST_COMMIT_MESSAGE" value="使用 Object.assign() 合并对象（修改属性并更新页面），区别于ref、reactive不可更新数据问题" />
-    <MESSAGE value="defineProps，实现简单的父传子" />
-    <option name="LAST_COMMIT_MESSAGE" value="defineProps，实现简单的父传子" />
   </component>
 </project>

src/App.vue

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

src/components/Person.vue

@@ -1,34 +1,47 @@
 <script setup lang="ts">
-import {reactive, toRefs} from "vue";
+import {reactive, ref} from "vue";
 
-let person = reactive({
+//let car = reactive(
-  name:'张三',
+//    {brand: '宝马',price:100}
-  age:18,
+//)
-})
+ let car = ref(
+    {brand: '宝马',price:100}
+)
 
-let {name,age} = toRefs(person)
+function changeBrand(){
-
+  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}) // 合并对象
 
-function changeAge(){
+  car.value = reactive({brand: '五菱宏观',price:5}) // 改成ref的话可以
-  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>姓名：{{name}}</h1>
+    <h1>汽车：{{car.brand}}===价格：{{car.price}}w</h1>
-    <h1>年龄：{{age}}</h1>
+    <button @click="changeBrand">修改名字</button>
-    <button @click="changeName">修改名字</button>
+    <button @click="changePrice">价格+10</button>
-    <button @click="changeAge">年龄+1</button>
+    <button @click="changeCar">整体修改</button>
   </main>
 </template>
 
 <style scoped>
 button {
-  margin: 0 1rem;
+  margin: 0 1.5rem;
 }
 </style>