Vue中toRef与toRefs的区别

2022-09-13 10:34:29 阅读：179 来源： 互联网

标签：Vue name toRefs toRef reactive student 组件

条件： vue setup

作用：toRef、toRefs用于将reactive内的节点提取出来，同时具有响应式结构。

一、toRef用法：

<script setup>
    import {
        reactive,
        toRef,
        toRefs
    } from 'vue'

    var student = reactive({
        name: '张三',
        age: 15,
        contact: {
            phone: '18714896998',
            qq: '103422412',
            email: 'wm218@qq.com'
        }
    })
    
    // 定义toRef
    var name = toRef(student, 'name') // toRef用法
    var phone = toRef(student.contact, 'qq') // toRef用法
    console.log(name.value); name.value = '李四' //修改toRef的值时，status会同步响应 
    console.log(student); // 打印修改后的结果 
</script>

二、toRefs用法：

<template>
    <view></view>
</template>

<script setup>
    import {
        reactive,
        toRef,
        toRefs
    } from 'vue'

    var student = reactive({
        name: '张三',
        age: 15,
        contact: {
            phone: '18714896998',
            qq: '103422412',
            email: 'wm218@qq.com'
        }
    })
    
    // toRefs
    var info = toRefs(student)
    // 这种调用方式等同于直接调用student的结构
    console.log(info.name.value); // 此时info结构：{name: ..., age: ..., contace: ...}
    
    // 常用于组件、函数返回动态响应式变量
    var getInfo = function(){
        return {...toRefs(student)}
    }
    console.log(getInfo().name.value); 
</script>

注意：

toRef与toRefs都是将reactive的json内节点提取出来，做为独立的响应式结构。

二者的区别在于：toRef是指定某一节点提取出来，toRefs是一次性将所有节点提取出来。但toRefs只能提取一级节点！

SO：它们存在的意义：

有时需要将结构中的数据节点暴露给外部调用，这时得用toRef、toRefs。且暴露出去的数据也是响应式的，所以外部对该数据的变化也能同步到组件视图内。

下面案例中，直接通过父组件修改子组件内的变量：

组件test.vue代码：

<template>
    <view>姓名：{{student.name}}</view>
    <view>年龄：{{student.age}}</view>
    <view>手机：{{student.contact.phone}}</view>
    <view>企鹅：{{student.contact.qq}}</view>
    <view>邮箱：{{student.contact.email}}</view>
    <view>学生数量：{{studentNumber}}</view>
</template>

<script setup>
    import {
        ref,
        reactive,
        toRefs
    } from 'vue'

    var student = reactive({
        name: '张三',
        age: 15,
        contact: {
            phone: '18714896998',
            qq: '103422412',
            email: 'wm218@qq.com'
        }
    })
    
    var studentNumber = ref(20)

    defineExpose({
        // ...student, 如果采用这种方式展开，暴露出的数据将不会同步
        ...toRefs(student), // 必需要通过toRefs数据才能同步
        studentNumber // 这里的数据可以同步
    })
</script>

父组件修改数据，子组件同步响应示例：

<template>
    <test ref="student"></test>
</template>

<script setup>
    import {
        ref,
        toRef,
        toRefs,
        reactive,
        onMounted
    } from 'vue'

    // 获取组件实例，必需在setup内才能获取
    let student = ref(null);
    var info

    // 获取组件值，必需要挂载完成之后才能获取
    onMounted(() => {
        // 延迟5秒查看变化
        setTimeout(() => {
            // 这里有二个细节：
            // 1. 获取组件对外暴露接口，采用 student._value 方式
            // 2. 必需定义成动态响应式的(toRefs或toRef转换)，否则暴露的数据为只读
            //    info = reactive({...student._value}) 这种方式也不行
            info = {
                ...toRefs(student._value) //将组件值扩展开，并是响应式的
            }
            info.studentNumber.value = 50 // 修改此处，将会同步更新到组件
            info.name.value = '李四' // 修改此处，将会同步更新到组件
        }, 5000)
    });
</script>

标签：Vue,name,toRefs,toRef,reactive,student,组件
来源： https://www.cnblogs.com/wm218/p/16688020.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

Vue中toRef与toRefs的区别