Thu Oct 19 09:38:00 CST 2023 inscode

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>