fix:vue3

15.vue3/vue_project1/src/App.vue

@@ -5,6 +5,7 @@
     <Demo32 />
     <Demo4 />
     <Demo5 />
+    <Demo6 />
   </div>
 </template>
 
@@ -14,5 +15,6 @@ import Demo2 from "./components/Demo2.vue";
 import Demo32 from "./components/Demo36.vue";
 import Demo4 from "./components/Demo4.vue";
 import Demo5 from "./components/Demo5.vue";
+import Demo6 from "./components/Demo6.vue";
 </script>
 <style></style>

15.vue3/vue_project1/src/components/Demo5.vue

@@ -1,7 +1,9 @@
 <template>
   <div>
     <h2>第四个</h2>
-    <p>{{ obj.name }}--{{ obj.age }}--{{ obj.love }}</p>
+    <p>{{ obj.name }}--{{ obj.age }}--{{ obj.love }}--{{ obj.car.a1 }}--{{
+        obj.car.b1
+      }}</p>
     <button @click="changeName">换个人</button>
   </div>
 </template>
@@ -10,17 +12,34 @@ import { reactive } from 'vue';
 let obj = reactive({
   name:"蜡笔小新",
   age: 3,
-  love: '娜娜子'
+  love: '娜娜子',
+  car: {
+    a1: "a",
+    b1: "b",
+  },
 })
 console.log(obj)
 function changeName() {
   // obj.age = 5;
   // obj.name = '阿呆'
   // obj.love = '女的'
-  obj = {
-    name: '来财',
-    age:10,
-    love:'dollar'
+  // obj = {
+  //   name: '来财',
+  //   age:10,
+  //   love:'dollar'
+  // }
+  // Object.assign(obj,{
+  //   name: '来财',
+  //   age:10,
+  //   love:'dollar',
+  //   car:{
+  //     a1:"9",
+  //     b1:"4"
+  //   }
+  // })
+  obj.car = {
+    a1:"32",
+    b1:"29"
   }
 }
 </script>

15.vue3/vue_project1/src/components/Demo6.vue

@@ -0,0 +1,64 @@
+<template>
+  <div>
+    <h2>第四个</h2>
+    <p>
+      {{ obj.name }}--{{ obj.age }}--{{ obj.love }}--{{ obj.car.a1 }}--{{
+        obj.car.b1
+      }}
+    </p>
+    <button @click="changeName">换个人</button>
+  </div>
+</template>
+<script setup>
+import { ref } from "vue";
+
+/***
+ * ref声明引用数据类型
+ */
+let obj = ref({
+  name: "沸羊羊",
+  age: 3,
+  love: "美羊羊",
+  car: {
+    a1: "a",
+    b1: "b",
+  },
+});
+console.log(obj);
+/**
+ * ref:可以定义基本数据类型 也可以定义引用数据类型
+ * 走的是Object.defineProperty()中的getter和setter
+ * 单核心走的还是ES6中的proxy代理
+ * reactive 只适用于引用数据类型
+ * 走的是ES6中的proxy代理
+ *
+ */
+function changeName() {
+  // obj.age = 5;
+  // obj.name = '阿呆'
+  // obj.love = '女的'
+//   obj = {
+//     name: "来财",
+//     age: 10,
+//     love: "dollar",
+//   };
+  // 改名字
+  //   obj.value.name = "喜羊羊";
+
+  // Object.assign(obj.value,{
+  //     name:"瑶一瑶",
+  //     age:4,
+  //     love:"PP糖"
+  // })
+//   obj.value = {
+//     name: "瑶一瑶",
+//     age: 4,
+//     love: "PP糖",
+//   };
+  obj.value.car = {
+    a1:"3",
+    b1:"4"
+  }
+}
+</script>
+<style></style>