From 6258a891fc815394497a970a1554af5de1887072 Mon Sep 17 00:00:00 2001
From: skyun <skyun@devide>
Date: Thu, 19 Oct 2023 17:39:00 +0800
Subject: [PATCH] Thu Oct 19 17:39:00 CST 2023 inscode

---
 src/assets/main.css    |  4 ++++
 src/views/lesson-1.vue | 33 ++++++++++++++++++---------------
 2 files changed, 22 insertions(+), 15 deletions(-)

diff --git a/src/assets/main.css b/src/assets/main.css
index c133f91..a1aa5a4 100644
--- a/src/assets/main.css
+++ b/src/assets/main.css
@@ -33,3 +33,7 @@ a,
     padding: 0 2rem;
   }
 }
+
+.mt10px {
+    margin-top: 10px;
+}
diff --git a/src/views/lesson-1.vue b/src/views/lesson-1.vue
index b096977..74c945b 100644
--- a/src/views/lesson-1.vue
+++ b/src/views/lesson-1.vue
@@ -1,9 +1,10 @@
 <template>
     <header>
-        <h1>Lesson1</h1>
+        <h1>ref, reactive, toRef, toRefs的区别</h1>
     </header>
     <main>
-        {{number}}
+        <Divider>基本数据类型</Divider>
+        <h2>num: {{num}}</h2>
         <div>
             <lable>refNum:</lable>
             <InputNumber v-model="refNum" controls-outside />
@@ -14,16 +15,18 @@
             <InputNumber v-model="reactNum" controls-outside />
             <span>{{reactNum}}</span>
         </div>
+
+        <Divider class="mt10px"></Divider>
         <div>
             <lable>refObj:</lable>
-            <InputNumber v-model="refObj.number" controls-outside />
+            <InputNumber v-model="refObj.num" controls-outside />
             <span>{{refObj}}</span>
         </div>
         <hr />
         <h2>reactObj</h2>
         <div>
             <lable>reactObj.number:</lable>
-            <InputNumber v-model="reactObj.number" controls-outside />
+            <InputNumber v-model="reactObj.num" controls-outside />
             <span>{{reactObj}}</span>
         </div>
         <div>
@@ -37,8 +40,8 @@
             <span>{{reactObjNumToRef}}</span>
         </div>
         <div>
-            <lable>reactObjToRefs.number:</lable>
-            <InputNumber v-model="reactObjToRefs.number" controls-outside />
+            <lable>reactObjToRefs.num:</lable>
+            <InputNumber v-model="reactObjToRefs.num" controls-outside />
             <span>{{reactObjToRefs}}</span>
         </div>
         <div>
@@ -53,34 +56,34 @@
 <script setup>
 import { ref, reactive, toRef, toRefs, watch, onMounted, defineProps } from 'vue'
 
-const number = 0
+const num = 0
 
 console.log('----------------------------------------')
-const refNum = ref(number)
+const refNum = ref(num)
 console.log('refNum', refNum)
 
 console.log('----------------------------------------')
-const reactNum = reactive(number)
+const reactNum = reactive(num)
 console.log('reactNum', reactNum)
 
 console.log('----------------------------------------')
-const refObj = ref({number})
+const refObj = ref({num})
 console.log('refObj', refObj)
 
 console.log('----------------------------------------')
-const reactObj = reactive({number, child: {a: 1}})
-console.log('reactObj', reactObj)
+const obj = {num, child: {a: 1}}
+const reactObj = reactive(obj)
+console.log('reactObj', typeof(reactObj), reactObj)
 const {number: reactObjNum} = reactObj
 console.log('reactObjNum', reactObjNum)
-const reactObjNumToRef = toRef(reactObj, 'number')
+const reactObjNumToRef = toRef(reactObj, 'num')
 console.log('reactObjNumToRef', reactObjNumToRef)
 const reactObjToRefs = toRefs(reactObj)
 console.log('reactObjToRefs', reactObjToRefs)
 const reactObjChildToRefs = toRefs(reactObj.child)
 console.log('reactObjChildToRefs', reactObjChildToRefs)
-const reactObjNumToReact = reactObj.number
+const reactObjNumToReact = reactObj.num
 console.log('reactObjNumToReact', reactObjNumToReact)
-reactObj.number++
 </script>
 
 <style scoped>
-- 
GitLab