vue3

vue3/my_project/src/App.vue

@@ -5,7 +5,9 @@
     <!-- <Demo1></Demo1> -->
     <!-- <Demo2></Demo2> -->
     <!-- <Demo3></Demo3> -->
-    <Demo4></Demo4>
+    <!-- <Demo4></Demo4> -->
+    <!-- <Demo5></Demo5> -->
+    <Demo6></Demo6>
    </div>
 </template>
 
@@ -15,6 +17,8 @@ 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 {
     // js或ts
     components: {
@@ -22,7 +26,9 @@ export default {
         Demo1,
         Demo2,
         Demo3,
-        Demo4
+        Demo4,
+        Demo5,
+        Demo6
     },
 }
 </script>

vue3/my_project/src/components/Demo4.vue

@@ -11,6 +11,7 @@
 
 <script lang="ts" setup name="Demo4">
 import { reactive } from 'vue';
+// reactive 定义引用类型
 let arr = reactive([
   {
     name: '张三',

vue3/my_project/src/components/Demo5.vue

@@ -0,0 +1,60 @@
+<template>
+  <div id="demo5">
+    <h3>姓名：{{obj.name}}</h3>
+    <h3>年龄：{{obj.age}}</h3>
+    <h3>
+        玩具：
+        <p>{{obj.car.c1}}</p>
+        <p>{{ obj.car.c2 }}</p>
+    </h3>
+    <button @click="changeCar1">修改第一辆车</button>
+    <button @click="changeCar2">修改第二辆车</button>
+  </div>
+</template>
+/**
+    ref:可以修改基本数据类型类型 也可以修改引用数据类型类型 
+    走的还是object.defineProperty()中getter和setter劫持数据 修改数据
+    ref修改引用 只适用于 浅层的引用数据类型
+    reactive: 只能修改引用数据类型
+    走的是ES6中的代理 proxy
+    深层的引用数据类型
+*/
+<script setup lang="ts" name="Demo5">
+  import { ref,reactive } from 'vue';
+  let aa = ref('哈哈');
+  let obj1 = reactive({
+    bb:"1",
+    cc:"2"
+  })
+  let obj = ref({
+    name: "图图",
+    age: 3,
+    car: {
+      c1: "玛莎拉蒂",
+      c2: "大G",
+    }
+  })
+  let obj3 = {
+    a: {
+        b:{
+            c: {
+                d:"121"
+            }
+        }
+    }
+  }
+  console.log(aa);
+  console.log(obj1);
+  function changeCar1() {
+    console.log(obj)
+    obj.value.car.c1 = '夏利'
+    // obj.car.c1 = '夏利';
+  }
+  function changeCar2() {
+    obj.value.car.c2 = '五菱'
+  }
+</script>
+
+<style>
+
+</style>

vue3/my_project/src/components/Demo6.vue

@@ -0,0 +1,44 @@
+<template>
+  <div id="demo5">
+    <h3>姓名：{{obj.name}}</h3>
+    <h3>年龄：{{obj.age}}</h3>
+    <h3>
+        玩具：
+        <p>{{obj1.bb}}</p>
+        <p>{{ obj1.cc}}</p>
+    </h3>
+    <button @click="change">修改玩具</button>
+  </div>
+</template>
+<script setup lang="ts" name="Demo5">
+  import { ref,reactive } from 'vue';
+  let aa = ref('哈哈');
+  let obj1 = reactive({
+    bb:"1",
+    cc:"2"
+  })
+  let sum = ref(0);
+  let obj = reactive({
+    name: "图图",
+    age: 3,
+    car: {
+      c1: "玛莎拉蒂",
+      c2: "大G",
+    }
+  })
+  // function change() {
+  //   obj1.value = {bb:"爱玛",cc:"上海永久"}
+  // }
+  function change() {
+    
+    // obj.car = {c1:"爱玛",c2:"上海永久"}
+    console.log(obj1)
+    Object.assign(obj1,{bb:"爱玛",cc:"上海永久"})
+    obj1 = {bb:"爱玛",cc:"上海永久"}
+  // obj1= {}
+  }
+</script>
+
+<style>
+
+</style>