vue3

17.Vue3/project/src/App.vue

@@ -32,12 +32,16 @@ export default {
     <hr>
     <hr>
     <Demo2></Demo2>
+    <hr>
+    <hr>
+    <Demo3></Demo3>
   </div>
 </template>
 
 <script lang="ts" setup>
 import Demo1 from './components/Demo1.vue';
 import Demo2 from './components/Demo2.vue';
+import Demo3 from './components/Demo3.vue';
 // export default {
 //   // components:{
 //   //   Demo1

17.Vue3/project/src/components/Demo3.vue

@@ -0,0 +1,53 @@
+<template>
+  <div>
+    <!-- <p>我叫{{ obj.name }},今年{{ obj.age }}岁</p> -->
+    <p>
+      我叫{{ obj.name }},今年{{ obj.age }}岁,我有一个{{ obj.car.c1 }}和一个{{
+        obj.car.c2
+      }}
+    </p>
+    <button @click="changePerson">修改整体</button>
+    <button @click="changeName">修改名字</button>
+    <button @click="changeCar1">修改第一辆车</button>
+    <button @click="changeCar">修改整体车</button>
+  </div>
+</template>
+
+<script setup>
+import { ref, reactive } from "vue";
+// ref可以定义引用数据类型
+let obj = ref({
+  name: "111",
+  age: 10,
+  car: {
+    c1: "摩托车",
+    c2: "自行车",
+  },
+});
+console.log(obj, "3232");
+function changeName() {
+  obj.value.name = "哈哈";
+}
+function changePerson() {
+  obj.value = {
+    name: "12",
+    age: 20,
+    car: {
+      c1: "11",
+      c2: "22",
+    },
+  };
+}
+function changeCar1() {
+  obj.value.car.c1 = "哈哈哈";
+}
+function changeCar() {
+  obj.value.car = {
+    c1: "1",
+    c2: "2",
+  };
+}
+</script>
+
+<style lang="scss" scoped>
+</style>