Skip to content

V
Vue3 范例演示

skyuning / Vue3 范例演示
与 Fork 源项目一致

Fork自 inscode / VueJS

通知 1
Star 0
Fork 0
V
Vue3 范例演示
提交 48d2fafa 编写于 作者: S skyun
浏览文件
操作

Thu Oct 19 22:10:00 CST 2023 inscode

上级 6258a891
隐藏空白更改
内联 并排
Showing with 183 addition and 72 deletion
src/assets/main.css
浏览文件 @ 48d2fafa
...@@ -37,3 +37,26 @@ a, ...@@ -37,3 +37,26 @@ a,
.mt10px { .mt10px {
margin-top: 10px; 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
src/views/lesson-1.vue
浏览文件 @ 48d2fafa
...@@ -2,99 +2,187 @@ ...@@ -2,99 +2,187 @@
<header> <header>
<h1>ref, reactive, toRef, toRefs的区别</h1> <h1>ref, reactive, toRef, toRefs的区别</h1>
</header> </header>
<main> <main class="flex-col">
<Divider>基本数据类型</Divider> <Divider>基本数据类型</Divider>
<h2>num: {{num}}</h2> <h2><code>num: {{num}}</code></h2>
<div> <item class="head">
<lable>refNum:</lable> <name>变量名</name>
<InputNumber v-model="refNum" controls-outside /> <lable>变量引用</lable>
<span>{{refNum}}</span> <value>变量值</value>
</div> </item>
<div> <item>
<lable>reactNum:</lable> <name>refNum</name>
<InputNumber v-model="reactNum" controls-outside /> <lable>ref(num)</lable>
<span>{{reactNum}}</span> <value>{{refNum}}</value>
</div> <Input type="number" class="input" v-model="refNum" controls-outside />
</item>
<Divider class="mt10px"></Divider> <item>
<div> <name>reactNum</name>
<lable>refObj:</lable> <lable>reactive(num)</lable>
<InputNumber v-model="refObj.num" controls-outside /> <value>{{reactNum}}</value>
<span>{{refObj}}</span> <Input type="number" class="input" v-model="reactNum" controls-outside />
</div> </item>
<hr />
<h2>reactObj</h2> <Divider>对象类型</Divider>
<div> <Affix :offset-top="0">
<lable>reactObj.number:</lable> <div style="background: #ffffff;">
<InputNumber v-model="reactObj.num" controls-outside /> <div class="objs flex-row match-width" style="background: #f8f8f8; padding: 10px;">
<span>{{reactObj}}</span> <pre style="flex: 3">obj: {{obj}}</pre>
</div> <pre style="flex: 4">refObj = ref(obj): {{refObj}}</pre>
<div> <pre style="flex: 4">reactObj = reactive(obj): {{reactObj}}</pre>
<lable>reactObjNum:</lable> </div>
<InputNumber v-model="reactObjNum" controls-outside /> <Divider dashed />
<span>{{reactObj}}</span> <item class="head mt10px">
</div> <name>变量名</name>
<div> <lable>变量引用</lable>
<lable>reactObjNumToRef:</lable> <value>变量值</value>
<InputNumber v-model="reactObjNumToRef" controls-outside /> </item>
<span>{{reactObjNumToRef}}</span> <Divider dashed />
</div> </div>
<div> </Affix>
<lable>reactObjToRefs.num:</lable>
<InputNumber v-model="reactObjToRefs.num" controls-outside /> <item>
<span>{{reactObjToRefs}}</span> <name>refObj.num</name>
</div> <lable></lable>
<div> <value>{{'' + refObj.num}}</value>
<lable>reactObjNumToReact:</lable> <Input type="number" class="input" v-model="refObj.num" controls-outside />
<InputNumber v-model="reactObjNumToReact" controls-outside /> </item>
<span>{{reactObjNumToReact}}</span> <item>
</div> <name>reactObj.num</name>
<hr /> <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> </main>
<fixtop>
<Button class="float-right" type="error" @click="forceUpdate">强制更新</Button>
</fixtop>
</template> </template>
<script setup> <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('----------------------------------------') console.log('----------------------------------------')
const refNum = ref(num) const num = 0
console.log('refNum', refNum)
console.log('----------------------------------------') const refNum = ref(num)
const reactNum = reactive(num) const reactNum = reactive(num)
console.log('reactNum', reactNum)
console.log('----------------------------------------')
const refObj = ref({num})
console.log('refObj', refObj)
console.log('----------------------------------------') console.log('----------------------------------------')
const obj = {num, child: {a: 1}} const obj = {num, child: {a: 1}}
const refObj = ref(obj)
const reactObj = reactive(obj) const reactObj = reactive(obj)
console.log('reactObj', typeof(reactObj), reactObj)
const {number: reactObjNum} = reactObj const refObjNum = refObj.num
console.log('reactObjNum', reactObjNum) 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') const reactObjNumToRef = toRef(reactObj, 'num')
console.log('reactObjNumToRef', reactObjNumToRef) const refObjValueNumToRef = toRef(refObj.value, 'num')
const reactObjToRefs = toRefs(reactObj) const reactObjValueNumToRef = toRef(reactObj.value, 'num')
console.log('reactObjToRefs', reactObjToRefs)
const reactObjChildToRefs = toRefs(reactObj.child) const refObjChild = refObj.child
console.log('reactObjChildToRefs', reactObjChildToRefs)
const reactObjNumToReact = reactObj.num // const reactObjToRefs = toRefs(reactObj)
console.log('reactObjNumToReact', reactObjNumToReact) // console.log('reactObjToRefs', reactObjToRefs)
// const reactObjChildToRefs = toRefs(reactObj.child)
// console.log('reactObjChildToRefs', reactObjChildToRefs)
</script> </script>
<style scoped> <style scoped>
main > div { main item {
margin: 10px 0; margin: 2px 20px;
} }
main > div > * { main item > * {
display: inline-block; display: inline-block;
margin-right: 10px; margin-right: 10px;
} }
main > div > lable { main item > name {
width: 180px; 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> </style>
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或