...toRefs（）是什么意思？

最新推荐文章于 2024-03-06 15:22:13 发布

莹莹酱~

最新推荐文章于 2024-03-06 15:22:13 发布

阅读量565

点赞数 9

分类专栏： vue 文章标签： javascript vue.js

本文链接：https://blog.csdn.net/qq_36825145/article/details/135753459

版权

vue 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

解构语法，用起来舒服多了！

例如下面的html页面使用vue3的例子，state变量下的message、num、input1都可以直接使用。

而不需要使用state.message、state.num、state.input这样的写法。

另外文中的v-cloak,是解决屏幕闪动的问题，大型的项目一般都是挂载，都不会使用这个。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vue3</title>
    <style>
        [v-cloak] {
            display: none !important;
        }
    </style>
</head>
<body>
    <div id="app" v-cloak>
        <div>
            {{ state1 }}
        </div>
        <div>
            {{ message }}
        </div>
        <div>
            {{ num }}
        </div>
        <input type="text" name="" id="" placeholder="输入" v-model="input1"><br/>
        <input type="text" name="" id="" placeholder="输入" v-model="input2"><br/>
        <div>
            input1:{{ input1 }}
        </div>
        <div>
            input2:{{ input2 }}
        </div>
        <button @click="btn1">
            点我
        </button>
    </div>
    <!-- <script src="https://cdn.jsdelivr.net/npm/vue@3.0.11/dist/vue.global.js"></script> -->
    <script src="https://cdn.jsdelivr.net/npm/vue@3.0.11/dist/vue.global.prod.js"></script>
    <script>
        const { createApp, reactive, toRefs, ref, onMounted } = Vue;
        
        const app = createApp({
            setup() {
                var state1 = ref(123)
                var input2 = ref(123)
                const state = reactive({
                    message: 12,
                    num: 1,
                    input1: ''
                })
                onMounted(()=>{
                    console.log(2222)
                })
                const btn1 = () => {
                    console.log(state1)
                    console.log(input2)
                    console.log(state)
                    state1.value++
                    state.num++
                    
                }
                return {
                    ...toRefs(state),
                    state1,
                    input2,
                    btn1
                }
            }
        });
        app.mount("#app");
    </script>
</body>
</html>

莹莹酱~

关注

9
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
...toRefs（）是什么意思？

例如下面的html页面使用vue3的例子，state变量下的message、num、input1都可以直接使用。而不需要使用state.message、state.num、state.input这样的写法。另外文中的v-cloak,是解决屏幕闪动的问题，大型的项目一般都是挂载，都不会使用这个。解构语法，用起来舒服多了！
复制链接

扫一扫