From 8a2699de62704e78ea142af13d0e42de7f68c928 Mon Sep 17 00:00:00 2001
From: skyun <skyun@devide>
Date: Thu, 19 Oct 2023 09:38:00 +0800
Subject: [PATCH] Thu Oct 19 09:38:00 CST 2023 inscode

---
 src/views/lesson-1.vue | 62 ++++++++++++++++++++++++++++++++++++++----
 1 file changed, 56 insertions(+), 6 deletions(-)

diff --git a/src/views/lesson-1.vue b/src/views/lesson-1.vue
index 2f4a9a6..069e5b6 100644
--- a/src/views/lesson-1.vue
+++ b/src/views/lesson-1.vue
@@ -3,6 +3,7 @@
         <h1>Lesson1</h1>
     </header>
     <main>
+        {{number}}
         <div>
             <lable>refNum:</lable>
             <InputNumber v-model="refNum" controls-outside />
@@ -14,25 +15,74 @@
             <span>{{reactNum}}</span>
         </div>
         <div>
-            <lable>refObj.a:</lable>
-            <InputNumber v-model="refObj.a" controls-outside />
+            <lable>refObj:</lable>
+            <InputNumber v-model="refObj.number" controls-outside />
             <span>{{refObj}}</span>
         </div>
+        <div>
+            <lable>refObjA:</lable>
+            <InputNumber v-model="refObjA" controls-outside />
+            <span>{{refObjA}}</span>
+        </div>
+        <div>
+            <lable>reactObj.a:</lable>
+            <InputNumber v-model="reactObj.a" controls-outside />
+            <span>{{reactObj}}</span>
+        </div>
         <div>
             <lable>reactObj.a:</lable>
             <InputNumber v-model="reactObj.a" controls-outside />
             <span>{{reactObj}}</span>
         </div>
+        <div>
+            <lable>reactObjA:</lable>
+            <InputNumber v-model="reactObjA" controls-outside />
+            <span>{{reactObjA}}</span>
+        </div>
+        <div>
+            <lable>reactToRef.a:</lable>
+            <InputNumber v-model="reactToRef.a" controls-outside />
+            <span>{{reactToRef}}</span>
+        </div>
+        <div>
+            <lable>reactToRefA:</lable>
+            <InputNumber v-model="reactToRefA" controls-outside />
+            <span>{{reactToRefA}}</span>
+        </div>
     </main>
 </template>
 
 <script setup>
 import { ref, reactive, toRef, watch, onMounted, defineProps } from 'vue'
 
-const refNum = ref(0)
-const reactNum = reactive(1)
-const refObj = ref({a: 1})
-const reactObj = reactive({a: 1})
+const number = 0
+
+console.log('----------------------------------------')
+const refNum = ref(number)
+console.log('refNum', refNum)
+
+console.log('----------------------------------------')
+const reactNum = reactive(number)
+console.log('reactNum', reactNum)
+
+console.log('----------------------------------------')
+const refObj = ref({number})
+console.log('refObj', refObj)
+
+console.log('----------------------------------------')
+const reactObj = reactive({number})
+console.log('reactObj', reactObj)
+const {number: reactObjNum} = reactObj
+console.log('reactObj.number', reactObj.number)
+console.log('reactObjNum', reactObjNum)
+
+console.log('----------------------------------------')
+const toRefNum = toRef(reactObj, 'number')
+console.log('toRefNum', toRefNum)
+
+console.log('----------------------------------------')
+const reactToRef = toRef(reactObj)
+const {a: reactToRefA} = {reactToRef}
 </script>
 
 <style scoped>
-- 
GitLab