vue3

20.vue3/project1/src/App.vue

@@ -10,6 +10,9 @@
     <hr>
     <hr>
     <Demo3></Demo3>
+    <hr>
+    <hr>
+    <Demo4></Demo4>
   </div>
 </template>
 
@@ -17,6 +20,7 @@
 import Demo1 from './components/Demo1.vue'
 import Demo2 from './components/Demo2.vue'
 import Demo3 from './components/Demo3.vue'
+import Demo4 from './components/Demo4.vue'
 </script>
 
 <style lang="scss" scoped>

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

@@ -0,0 +1,31 @@
+<template>
+  <div>
+    <hr />
+    <hr />
+    <h1>Demo4</h1>
+    <h3>我叫{{ obj.name }},今年{{ obj.age }}</h3>
+    <button @click="changeName">修改名字</button>
+    <button @click="changePerson">修改整体</button>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import {ref,reactive} from "vue" 
+let obj = ref({
+    name:'图图',
+    age:18
+})
+console.log(obj,'obj');
+function changeName() {
+    obj.value.name = '哪吒';
+}
+function changePerson() {
+    obj.value = {
+        name: '哪吒',
+        age: 20
+    }
+}
+</script>
+
+<style lang="scss" scoped>
+</style>