vue3 ref,toRef,toRefs的区别

最新推荐文章于 2024-05-16 15:29:27 发布

山河亦问安

最新推荐文章于 2024-05-16 15:29:27 发布

阅读量277

点赞数 1

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

本文链接：https://blog.csdn.net/qq_43649937/article/details/128429758

版权

Vue 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

本文探讨了Vue中ref和toRef在响应式数据处理上的差异。ref创建的响应式数据不会影响源数据，但能更新视图；而toRef则会将对象属性变为响应式，修改会影响源数据但不更新视图。通过示例代码，展示了它们在实际应用中的用法，强调了如何在组件中正确管理和更新数据。

摘要由CSDN通过智能技术生成

ref 函数可以将对象里面的属性值变成响应式的数据，修改响应式数据，是不会影响到源数据，但是视图层上的数据会被更新

代码案例如下

<template>
<h>{{name1}}</h>
    <button @click="click">点击</button>
</template>

<script>
    import {reactive,toRefs,ref,toRef} from "vue"
    import test1 from "./Test1.vue"
    export default {
        name: "Test2",
        setup(){
            let name="yu";
            const name1=ref(name)

            const click=()=>{
                name1.value="zhang"
                console.log(name)
                console.log(name1)
            }


            return{
                name1,
                click
            }
        }


    }
</script>

toRef 函数会与源数据交互，修改响应式数据会造成源数据的修改，但是他的修改不会造成视图层数据的更新。

<template>
    <div style="text-align: center;padding-left: 50px">
        <h>{{name1}}</h>
        <br>
        <br>
        <button @click="click">点击</button>
    </div>

</template>

<script>
    import {reactive,toRefs,ref,toRef} from "vue"
    import test1 from "./Test1.vue"
    export default {
        name: "Test2",
        setup(){
            const name={
                name1:"hh"
            }
            const name1=toRef(name,"name1")

            const click=()=>{
                name1.value="zhang"
                console.log(name.name1)
                console.log(name1.value)
            }


            return{
                name1,
                click
            }
        }


    }
</script>

toRefs 函数与原始数据相交互，修改响应式数据会影响到源数据，但是不会更新视图层。
toRefs 函数还可以与其他响应式数据相交互，更加方便处理视图层数据。

<template>
    <div style="text-align: center;padding-left: 50px">
        <h>{{name1.name2}}</h>
        <br>
        <br>
        <button @click="click">点击</button>
    </div>

</template>

<script>
    import {reactive,toRefs,ref,toRef} from "vue"
    import test1 from "./Test1.vue"
    export default {
        name: "Test2",
        setup(){
            const name={
                name1:"hh",
                name2:"jj"
            }
            const name1=toRefs(name)

            const click=()=>{
                name1.name2.value="kk"
                console.log(name.name2)
                console.log(name1.name2.value)
            }


            return{
                name1,
                click
            }
        }


    }
</script>

toRefs配合reactive可以实现修改响应数据会更新视图层

<template>
    <div style="text-align: center;padding-left: 50px">
        <h>{{name2}}</h>
        <br>
        <br>
        <button @click="click">点击</button>
    </div>

</template>

<script>
    import {reactive,toRefs,ref,toRef} from "vue"
    import test1 from "./Test1.vue"
    export default {
        name: "Test2",
        setup(){
            const name=reactive({
                name2:"hh"
            })

            const click=()=>{
                name.name2="k"
            }


            return{
               ...toRefs(name),
                click
            }
        }


    }
</script>