VUE2语法--toRefs与toRef用法

雾林小妖

已于 2024-06-27 18:05:46 修改

阅读量1.5k

点赞数 9

CC 4.0 BY-SA版权

分类专栏： VUE实战文章标签： toRefs用法 toRef用法 vue语法

于 2023-12-09 16:32:14 首次发布

本文链接：https://blog.youkuaiyun.com/tangshiyilang/article/details/134897020

VUE实战专栏收录该内容

10 篇文章

订阅专栏

本文介绍了Vue3中的ref和reactive功能，以及它们的子函数toRefs和toRef的用法。toRefs用于提取部分响应式数据，如果目标字段不存在则不提供默认值；而toRef可以单独取出reactive中的单条数据，其值的变化不会影响原reactive对象。

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

1、功能概述

ref和reactive能够定义响应式的数据，当我们通过reactive定义了一个对象或者数组数据的时候，如果我们只希望这个对象或者数组中指定的数据响应，其他的不响应。这个时候我们就可以使用toRefs和toRef实现局部数据的响应。

toRefs是toRef的升级版本

如果不会使用ref和reactive数据响应，参照如下博客：

https://blog.youkuaiyun.com/tangshiyilang/article/details/134701103

两者的不同点在于：toRefs取的字段如果不存在，不会给默认值，而toRef取的字段如果不存在会给默认值。

两者的相同点子在于：当头toRefs和toRef值发生变化的时候，reactive中的值不会同步。

2、toRefs用法

说明1：const{name}=toRefs(testData);

toRefs如果从testData中取name,如果name不存在，不会给默认值。

通过toRefs导出的值，可以直接使用原名称获取如：{{name}}

说明2：下面的案例中从testData中取了两个值作为响应式数据，name和name1,其中name1是不存在，在页面中不做任何的显示。

说明3：通过toRefs取出的值name如果发生了变化，testData中的name不发生变化。

<!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>Document</title>
    <script src="https://unpkg.com/vue@3"></script>
</head>
<body>
  <div id="app">{{name}}--{{name1}}</div>
  <script type="module">
    const app=Vue.createApp({
       //创建setup
       setup(props,context){
        const {reactive,toRefs}=Vue;//从vue中引入toRefs和reactive
        //创建reactive设置响应式数据
        let testData=reactive({name:'小春',sex:"男"});
        //从testData中取出name的值响应，sex不参与响应
        const{name,name1}=toRefs(testData);
         return {name,name1}
        }
    });
    //vue实例只作用于app这个DOM节点中
    const vm=app.mount('#app');//viewModel是组件帮助我们完成的
  </script>
</body>
</html>

输出结果：

3、toRef的用法

说明1：toRef从reactive中引出单条数据

说明2：通过toRef取出的值name如果发生了变化，testData中的name不发生变化。

<!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>Document</title>
    <script src="https://unpkg.com/vue@3"></script>
</head>
<body>
  <div id="app">{{name}}</div>
  <script type="module">
    const app=Vue.createApp({

       //创建setup
       setup(props,context){
        const {reactive,toRef}=Vue;//从vue中引入toRef和reactive
        //创建reactive设置响应式数据
        let testData=reactive({name:'小春',sex:"男"});
        //从testData中取出name的值响应，sex不参与响应
        const name=toRef(testData,'name');
         return {name}
        }
    });
    //vue实例只作用于app这个DOM节点中
    const vm=app.mount('#app');//viewModel是组件帮助我们完成的
  </script>
</body>
</html>

输出结果：