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张图片 

 

你可能感兴趣的:(vue.js,javascript,前端)