一文带你了解Vue3中toRef和toRefs的用法

toRef 顾名思义,不是ref 响应式数据,给它转成ref 响应式数据

通俗易懂的理解:

 
 

 

首先实现功能没问题,接下来考虑到代码优化:

一文带你了解Vue3中toRef和toRefs的用法_第1张图片

那可能会想到 我在return的时候,麻烦一些,

 return {
      name: person.name,
      age: person.age,
      job: person.job.j1.salary,
    }; 

但是,这样操作你会发现页面不是响应式的,数据修改页面不发生变化,如下:

一文带你了解Vue3中toRef和toRefs的用法_第2张图片

接下来看 toRef的用法: 很明显实现了效果

 
 

 

一文带你了解Vue3中toRef和toRefs的用法_第3张图片

介绍完toRef的用法之后,接下来来看一下toRefs的用法吧

一文带你了解Vue3中toRef和toRefs的用法_第4张图片

到此这篇关于一文带你了解Vue3中toRef和toRefs的用法的文章就介绍到这了,更多相关Vue3 toRef toRefs用法内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

你可能感兴趣的:(一文带你了解Vue3中toRef和toRefs的用法)