vue3

20.vue3/project1/src/App.vue

@@ -3,6 +3,12 @@
     <h1>App</h1>
     <hr>
     <hr>
+    <Demo6></Demo6>
+    <hr>
+    <hr>
+    <Demo5></Demo5>
+    <hr>
+    <hr>
     <Demo1></Demo1>
     <hr>
     <hr>
@@ -21,6 +27,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'
 </script>
 
 <style lang="scss" scoped>

20.vue3/project1/src/components/Demo5.vue

@@ -0,0 +1,53 @@
+<template>
+  <div>
+    <hr />
+    <hr />
+    <h1>Demo5</h1>
+    <h2>
+      我叫{{ obj.name }},今年{{ obj.age }},我住在{{ obj.address.city }}--{{
+        obj.address.area
+      }}
+    </h2>
+    <button @click="changePart1">修改名字</button>
+    <button @click="changePart2">修改地区</button>
+    <button @click="changePart3">修改整体地址</button>
+    <button @click="changePart4">修改整体对象</button>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref, reactive } from "vue";
+let obj = ref({
+  name: "图图",
+  age: 18,
+  address: {
+    city: "北京",
+    area: "海淀",
+  },
+});
+function changePart1() {
+  obj.value.name = "哪吒";
+}
+function changePart2() {
+  obj.value.address.area = "朝阳";
+}
+function changePart3() {
+  obj.value.address = {
+    city: "上海",
+    area: "浦东",
+  };
+}
+function changePart4() {
+  obj.value = {
+    name: "图图1",
+    age: 188,
+    address: {
+      city: "北京1",
+      area: "海淀1",
+    },
+  };
+}
+</script>
+
+<style lang="scss" scoped>
+</style>

20.vue3/project1/src/components/Demo6.vue

@@ -0,0 +1,53 @@
+<template>
+  <div>
+    <hr />
+    <hr />
+    <h1>Demo6</h1>
+    <h2>
+      我叫{{ obj.name }},今年{{ obj.age }},我住在{{ obj.address.city }}--{{
+        obj.address.area
+      }}
+    </h2>
+    <button @click="changePart1">修改名字</button>
+    <button @click="changePart2">修改地区</button>
+    <button @click="changePart3">修改整体地址</button>
+    <button @click="changePart4">修改整体对象</button>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { reactive } from "vue";
+let obj = reactive({
+  name: "图图",
+  age: 18,
+  address: {
+    city: "北京",
+    area: "海淀",
+  },
+});
+function changePart1() {
+  obj.name = '小明'
+}
+function changePart2() {
+  obj.address.area = '朝阳'
+}
+function changePart3() {
+  obj.address = {
+    city: '上海',
+    area: '浦东'
+  }
+}
+function changePart4() {
+  Object.assign(obj,{
+    name:'图图1',
+    age:188,
+    address:{
+      city:'北京1',
+      area:'海淀1',
+    }
+  })
+}
+</script>
+
+<style lang="scss" scoped>
+</style>