Vue3中ref与toRef的区别

天才小熊猫点、

已于 2022-02-17 22:09:39 修改

阅读量885

点赞数

CC 4.0 BY-SA版权

分类专栏： Vue3笔记文章标签： vue.js elementui javascript

于 2022-02-17 09:39:55 首次发布

本文链接：https://blog.csdn.net/m0_56219678/article/details/122974863

Vue3笔记专栏收录该内容

9 篇文章

订阅专栏

本文详细介绍了 Vue 中 `ref` 和 `toRef` 的使用场景及其响应式原理。通过示例代码展示了它们在页面数据更新时的不同行为，指出 `ref` 在创建时仅读取对象属性，后续修改的是 `ref` 自身的属性，而非源数据。同时，对比了使用 `ref` 和 `toRef` 渲染页面的效果，强调了它们在数据绑定和响应式更新方面的差异。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在开发时，有时候会遇到，使用toRef和使用ref的页面效果一样。

代码如下：

    <template>
        <div>
            <h1>姓名：{{name}}</h1>
            <h1>年龄：{{age}}</h1>
            <h1>薪资：{{salary}}K</h1>
            <div>
                <button @click="name+='-'">修改姓名</button>
                <button @click="age++">修改年龄</button>
                <button @click="salary+=10">修改薪资</button>
            </div>
        </div>
    </template>

    <script>
        import {ref,reactive,toRef,toRefs} from 'vue'
        export default {
            name: "Demo2",
            setup(){
                let obj = reactive({
                    name:'孙悟空',
                    age:99,
                    job:{
                        j1:{
                            salary:20
                        }
                    }
                });

                let name = obj.name
                console.log(`我是name`,name);

                let name1 = toRef(obj,"name")
                console.log(`我是name1`,name1);

                return {
                    name:ref(obj.name),
                    age:ref(obj.age),
                    salary:ref(obj.job.j1.salary),
                }
            }
        }
    </script>

    <style scoped>

    </style>

使用ref，页面上的数据依旧是响应式的。

但是这里有一个坑，使用ref，它只有创建的时候读取了obj里面的数据。之后修改的数据都是ref创建出来的属性。

验证一下，在页面中渲染出obj。进行对比

代码：

    <template>
        <div>
            {{obj}}
            <h1>姓名：{{name}}</h1>
            <h1>年龄：{{age}}</h1>
            <h1>薪资：{{salary}}K</h1>
            <div>
                <button @click="name+='-'">修改姓名</button>
                <button @click="age++">修改年龄</button>
                <button @click="salary+=10">修改薪资</button>
            </div>
        </div>
    </template>

    <script>
        import {ref,reactive,toRef,toRefs} from 'vue'
        export default {
            name: "Demo2",
            setup(){
                let obj = reactive({
                    name:'孙悟空',
                    age:99,
                    job:{
                        j1:{
                            salary:20
                        }
                    }
                });

                let name = obj.name
                console.log(`我是name`,name);

                let name1 = toRef(obj,"name")
                console.log(`我是name1`,name1);

                return {
                    obj,
                    name:ref(obj.name),
                    age:ref(obj.age),
                    salary:ref(obj.job.j1.salary),
                }
            }
        }
    </script>

    <style scoped>

    </style>

效果图：