From 48d2fafa528ad09fe4bc88174663060217244998 Mon Sep 17 00:00:00 2001
From: skyun <skyun@devide>
Date: Thu, 19 Oct 2023 22:10:00 +0800
Subject: [PATCH] Thu Oct 19 22:10:00 CST 2023 inscode

---
 src/assets/main.css    |  23 ++++
 src/views/lesson-1.vue | 232 ++++++++++++++++++++++++++++-------------
 2 files changed, 183 insertions(+), 72 deletions(-)

diff --git a/src/assets/main.css b/src/assets/main.css
index a1aa5a4..d6e0d43 100644
--- a/src/assets/main.css
+++ b/src/assets/main.css
@@ -37,3 +37,26 @@ a,
 .mt10px {
     margin-top: 10px;
 }
+.flex-row {
+    display: flex;
+    flex-direction: row;
+}
+.flex-col {
+    display: flex;
+    flex-direction: column;
+}
+.flex-1 {
+    flex: 1;
+}
+.match-width {
+    width: 100%;
+}
+fixtop {
+    position: fixed;
+    top: 20px;
+    right: 20px;
+    z-index: 100;
+}
+.float-right {
+    float: right;
+}
\ No newline at end of file
diff --git a/src/views/lesson-1.vue b/src/views/lesson-1.vue
index 74c945b..bdd78a1 100644
--- a/src/views/lesson-1.vue
+++ b/src/views/lesson-1.vue
@@ -2,99 +2,187 @@
     <header>
         <h1>ref, reactive, toRef, toRefs的区别</h1>
     </header>
-    <main>
+    <main class="flex-col">
         <Divider>基本数据类型</Divider>
-        <h2>num: {{num}}</h2>
-        <div>
-            <lable>refNum:</lable>
-            <InputNumber v-model="refNum" controls-outside />
-            <span>{{refNum}}</span>
-        </div>
-        <div>
-            <lable>reactNum:</lable>
-            <InputNumber v-model="reactNum" controls-outside />
-            <span>{{reactNum}}</span>
-        </div>
-
-        <Divider class="mt10px"></Divider>
-        <div>
-            <lable>refObj:</lable>
-            <InputNumber v-model="refObj.num" controls-outside />
-            <span>{{refObj}}</span>
-        </div>
-        <hr />
-        <h2>reactObj</h2>
-        <div>
-            <lable>reactObj.number:</lable>
-            <InputNumber v-model="reactObj.num" controls-outside />
-            <span>{{reactObj}}</span>
-        </div>
-        <div>
-            <lable>reactObjNum:</lable>
-            <InputNumber v-model="reactObjNum" controls-outside />
-            <span>{{reactObj}}</span>
-        </div>
-        <div>
-            <lable>reactObjNumToRef:</lable>
-            <InputNumber v-model="reactObjNumToRef" controls-outside />
-            <span>{{reactObjNumToRef}}</span>
-        </div>
-        <div>
-            <lable>reactObjToRefs.num:</lable>
-            <InputNumber v-model="reactObjToRefs.num" controls-outside />
-            <span>{{reactObjToRefs}}</span>
-        </div>
-        <div>
-            <lable>reactObjNumToReact:</lable>
-            <InputNumber v-model="reactObjNumToReact" controls-outside />
-            <span>{{reactObjNumToReact}}</span>
-        </div>
-        <hr />
+        <h2><code>num: {{num}}</code></h2>
+        <item class="head">
+            <name>变量名</name>
+            <lable>变量引用</lable>
+            <value>变量值</value>
+        </item>
+        <item>
+            <name>refNum</name>
+            <lable>ref(num)</lable>
+            <value>{{refNum}}</value>
+            <Input type="number" class="input" v-model="refNum" controls-outside />
+        </item>
+        <item>
+            <name>reactNum</name>
+            <lable>reactive(num)</lable>
+            <value>{{reactNum}}</value>
+            <Input type="number" class="input" v-model="reactNum" controls-outside />
+        </item>
+
+        <Divider>对象类型</Divider>
+        <Affix :offset-top="0">
+            <div style="background: #ffffff;">
+                <div class="objs flex-row match-width" style="background: #f8f8f8; padding: 10px;">
+                    <pre style="flex: 3">obj: {{obj}}</pre>
+                    <pre style="flex: 4">refObj = ref(obj): {{refObj}}</pre>
+                    <pre style="flex: 4">reactObj = reactive(obj): {{reactObj}}</pre>
+                </div>
+                <Divider dashed />
+                <item class="head mt10px">
+                    <name>变量名</name>
+                    <lable>变量引用</lable>
+                    <value>变量值</value>
+                </item>
+                <Divider dashed />
+            </div>
+        </Affix>
+
+        <item>
+            <name>refObj.num</name>
+            <lable></lable>
+            <value>{{'' + refObj.num}}</value>
+            <Input type="number" class="input" v-model="refObj.num" controls-outside />
+        </item>
+        <item>
+            <name>reactObj.num</name>
+            <lable></lable>
+            <value>{{'' + reactObj.num}}</value>
+            <Input type="number" class="input" v-model="reactObj.num" controls-outside />
+        </item>
+
+        <Divider dashed />
+        <item>
+            <name>refObjNum</name>
+            <lable>ref(obj).num</lable>
+            <value>{{'' + refObjNum}}</value>
+            <Input type="number" class="input" v-model="refObjNum" controls-outside />
+        </item>
+        <item>
+            <name>reactObjNum</name>
+            <lable>reactObj.num</lable>
+            <value>{{'' + reactObjNum}}</value>
+            <Input type="number" class="input" v-model="reactObjNum" controls-outside />
+        </item>
+        <item>
+            <name>refObjValueNum</name>
+            <lable>refObj.value.num</lable>
+            <value>{{'' + refObjValueNum}}</value>
+            <Input type="number" class="input" v-model="refObjValueNum" controls-outside />
+        </item>
+        <item>
+            <name>reactObjValueNum</name>
+            <lable>reactObj.value.num</lable>
+            <value>代码错误</value>
+            <Input type="number" disabled="true" class="input" v-model="reactObjValueNum" controls-outside />
+        </item>
+
+        <Divider dashed />
+        <item>
+            <name>refObjNumToRef</name>
+            <lable>toRef(refObj.num)</lable>
+            <value>{{'' + refObjNumToRef}}</value>
+            <Input type="number" class="input" v-model="refObjNumToRef" controls-outside />
+        </item>
+        <item>
+            <name>reactObjNumToRef</name>
+            <lable>toRef(reactObj.num)</lable>
+            <value>{{'' + reactObjNumToRef}}</value>
+            <Input type="number" class="input" v-model="reactObjNumToRef" controls-outside />
+        </item>
+        <item>
+            <name>refObjValueNumToRef</name>
+            <lable>toRef(reactObj.value.num)</lable>
+            <value>{{'' + refObjValueNumToRef}}</value>
+            <Input type="number" class="input" v-model="refObjValueNumToRef" controls-outside />
+        </item>
+        <item>
+            <name>reactObjValueNumToRef</name>
+            <lable>toRef(reactObj.value.num)</lable>
+            <value>{{'' + reactObjValueNumToRef}}</value>
+            <Input type="number" class="input" v-model="reactObjValueNumToRef" controls-outside />
+        </item>
+
+        <Divider dashed />
+        <item>
+            <name>reactObjChild.a</name>
+            <lable>toRef(reactObj.value.num)</lable>
+            <value>{{'' + reactObjValueNumToRef}}</value>
+            <Input type="number" class="input" v-model="reactObjValueNumToRef" controls-outside />
+        </item>
     </main>
+    
+    <fixtop>
+        <Button class="float-right" type="error" @click="forceUpdate">强制更新</Button>
+    </fixtop>
 </template>
 
 <script setup>
-import { ref, reactive, toRef, toRefs, watch, onMounted, defineProps } from 'vue'
+import { ref, reactive, toRef, toRefs, watch, onMounted, defineProps, getCurrentInstance } from 'vue'
+const inst = getCurrentInstance()
+function forceUpdate() {
+    inst.ctx.$forceUpdate()
+}
 
-const num = 0
+function getType(v) {
+    return typeof(v)
+}
 
 console.log('----------------------------------------')
-const refNum = ref(num)
-console.log('refNum', refNum)
+const num = 0
 
-console.log('----------------------------------------')
+const refNum = ref(num)
 const reactNum = reactive(num)
-console.log('reactNum', reactNum)
-
-console.log('----------------------------------------')
-const refObj = ref({num})
-console.log('refObj', refObj)
 
 console.log('----------------------------------------')
 const obj = {num, child: {a: 1}}
+
+const refObj = ref(obj)
 const reactObj = reactive(obj)
-console.log('reactObj', typeof(reactObj), reactObj)
-const {number: reactObjNum} = reactObj
-console.log('reactObjNum', reactObjNum)
+
+const refObjNum = refObj.num
+const reactObjNum = reactObj.num
+const refObjValueNum = refObj.value.num
+// const reactObjValueNum = reactObj.value.num // error
+
+const refObjNumToRef = toRef(refObj, 'num')
 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.num
-console.log('reactObjNumToReact', reactObjNumToReact)
+const refObjValueNumToRef = toRef(refObj.value, 'num')
+const reactObjValueNumToRef = toRef(reactObj.value, 'num')
+
+const refObjChild = refObj.child
+
+// const reactObjToRefs = toRefs(reactObj)
+// console.log('reactObjToRefs', reactObjToRefs)
+// const reactObjChildToRefs = toRefs(reactObj.child)
+// console.log('reactObjChildToRefs', reactObjChildToRefs)
 </script>
 
 <style scoped>
-    main > div {
-        margin: 10px 0;
+    main item {
+        margin: 2px 20px;
     }
-    main > div > * {
+    main item > * {
         display: inline-block;
         margin-right: 10px;
     }
-    main > div > lable {
-        width: 180px;
+    main item > name {
+        width: 200px;
+    }
+    main item > lable {
+        width: 200px;
+    }
+    main item > value {
+        width: 100px;
+        text-align: center;
     }
+    main item > .input {
+        margin: 0px 20px;
+        width: 80px;
+        text-align: center;
+    }
+
 </style>
-- 
GitLab