vue3

vue3/晚课/my_project/src/App.vue

@@ -1,6 +1,8 @@
 <template>
   <div class="app">
-    <Demo4></Demo4>
+    <Demo6></Demo6>
+    <!-- <Demo5></Demo5> -->
+    <!-- <Demo4></Demo4> -->
     <!-- <Demo3></Demo3> -->
     <!-- <Demo2></Demo2> -->
     <!-- <Demo1></Demo1> -->
@@ -14,13 +16,17 @@ import Demo1 from './components/Demo1.vue'
 import Demo2 from './components/Demo2.vue'
 import Demo3 from './components/Demo3.vue'
 import Demo4 from './components/Demo4.vue'
+import Demo5 from './components/Demo5.vue'
+import Demo6 from './components/Demo6.vue'
 export default {
     components:{
         Demo,
         Demo1,
         Demo2,
         Demo3,
-        Demo4
+        Demo4,
+        Demo5,
+        Demo6
     }
 }
 </script>

vue3/晚课/my_project/src/components/Demo2.vue

@@ -8,9 +8,11 @@
     <button @click="changeSex">修改性别</button>
   </div>
 </template>
-// npm install vite-plugin-vue-setup-extend
-// 在vite.config.ts文件中挂载插件
-<!--setup语法糖:不支持使用this 弱化this  -->
+<!--
+  setup语法糖:不支持使用this 弱化this
+  npm install vite-plugin-vue-setup-extend
+  在vite.config.ts文件中挂载插件
+-->
 <script lang="ts" setup name="newDemo">
 let name = "小艾";
 let age = 19;

vue3/晚课/my_project/src/components/Demo5.vue

@@ -0,0 +1,47 @@
+<template>
+    <div class="demo5">
+        <h3>用户一：{{obj.aa}}</h3>
+        <h3>用户二：{{obj.bb}}</h3>
+        <button @click="changeUser">修改用户一</button>
+    </div>
+</template>
+
+/**
+    ref 可以修改基本数据类型 也可以修改引用数据类型
+    走的是Object.defineProperty中的getter和setter劫持数据并修改数据
+    ref 修改浅层的引用数据类型
+    reactive 只能修改引用数据类型
+    走的是es6中的proxy代理数据
+    reactive 修改深层的引用数据类型
+*/
+<script lang="ts" setup name="Demo5">
+import {ref,reactive} from 'vue';
+let obj = ref({
+    aa: "图图",
+    bb: "海绵宝宝"
+})
+let bb = reactive({
+    a:"1",
+    b:"2"
+})
+let dd = {
+    a:{
+        b:{
+            c:{
+                d:111
+            }
+        }
+    }
+}
+console.log(bb);
+let a = ref(1);
+console.log(a);
+console.log(obj);
+function changeUser() {
+    obj.value.aa = '哆啦A梦'
+}
+</script>
+
+<style>
+
+</style>

vue3/晚课/my_project/src/components/Demo6.vue

@@ -0,0 +1,29 @@
+<template>
+  <div class="demo6">
+   <h2> 玩具一：{{obj.c1}}</h2>
+    <br>
+    <h2>玩具二：{{obj.c2}}</h2>
+    <hr>
+    <button @click="change">修改玩具</button>
+  </div>
+</template>
+
+<script lang="ts" setup name="Demo6">
+import {ref,reactive } from 'vue'
+let obj = reactive({
+    c1:"奔驰",
+    c2:"宝马"
+})
+// function change() {
+//     obj.value = {c1:"大众",c2:"小米"}
+// }
+function change() {
+    // obj = {c1:"五菱宏光",c2:"宝骏"}
+    Object.assign(obj,{c1:"五菱宏光",c2:"宝骏"})
+    // Object.assign(obj,a:1,b:2)
+}
+</script>
+
+<style>
+
+</style>