vue3

15.vue3/project1/src/App.vue

@@ -2,16 +2,20 @@
   <div>
     <Demo1/>
     <Demo2/>
+    <Demo3/>
   </div>
 </template>
 
 <script>
 import Demo1 from './components/Demo1.vue';
 import Demo2 from './components/Demo2.vue';
+import Demo3 from './components/Demo3.vue';
 export default {
   components:{
     Demo1,
-    Demo2
+    Demo2,
+    Demo3
+    
   }
 }
 </script>

15.vue3/project1/src/components/Demo2.vue

@@ -8,20 +8,20 @@
 </template>
 
 <script setup lang='ts' name='Demo2'>
+    import {ref} from 'vue';
+    // ref 定义基本数据类型
     // 语法糖 setup 不支持this
-        let name1 = '哪吒';
-        let age1 = 12;
-        // console.log(this)
-
+        let name1 = ref('哪吒');
+        let age1 = ref(12);
+        console.log(name1,'name1');
+        console.log(age1,'age1');
         function changeName() {
             console.log("走进来");
-            name1 = '猪八戒';
+            name1.value = '猪八戒';
             // 不具备响应式 => 具备响应式
             console.log(name1,'name1');
         }
 
-    
-
 </script>
 
 <style>

15.vue3/project1/src/components/Demo3.vue

@@ -0,0 +1,36 @@
+<template>
+    <div>
+    <h3>你好啊 我是第三个demo</h3>
+    <p>
+        我叫{{obj.name}},今年{{obj.age}}岁,我家住在{{obj.address}}
+    </p>
+    <button @click="changePerson">
+        单独改变
+    </button>
+    <button @click="changeAll">
+        全部改变
+    </button>
+    </div>
+</template>
+
+<script setup lang='ts' name='Demo3'>
+    // 定义引用数据类型
+    import {reactive} from 'vue';
+    let obj = reactive({
+        name:"图图",
+        age: 3,
+        address: '翻斗花园'
+    })
+    console.log(obj,'obj')
+    function changePerson() {
+        obj.name ='孙悟空';
+    }
+    function changeAll() {
+        // obj = {name:'哆啦A梦',age: 7,address:"大雄家"}
+        Object.assign(obj, {name:'哆啦A梦',age: 7,address:"大雄家"})
+    }
+</script>
+
+<style>
+
+</style>