建设部标准定额司网站,财务软件单机版,织梦cms怎么做网站地图,广州网站快速制作1、功能概述
ref和reactive能够定义响应式的数据#xff0c;当我们通过reactive定义了一个对象或者数组数据的时候#xff0c;如果我们只希望这个对象或者数组中指定的数据响应#xff0c;其他的不响应。这个时候我们就可以使用toRefs和toRef实现局部数据的响应。
toRefs是…1、功能概述
ref和reactive能够定义响应式的数据当我们通过reactive定义了一个对象或者数组数据的时候如果我们只希望这个对象或者数组中指定的数据响应其他的不响应。这个时候我们就可以使用toRefs和toRef实现局部数据的响应。
toRefs是toRef的升级版本
如果不会使用ref和reactive数据响应参照如下博客
https://blog.csdn.net/tangshiyilang/article/details/134701103
两者的不同点在于toRefs取的字段如果不存在不会给默认值而toRef取的字段如果不存在会给默认值。
两者的相同点子在于当头toRefs和toRef值发生变化的时候reactive中的值不会同步。
2、toRefs用法
说明1const{name}toRefs(testData);
toRefs如果从testData中取name,如果name不存在不会给默认值。
通过toRefs导出的值可以直接使用原名称获取如{{name}}
说明2下面的案例中从testData中取了两个值作为响应式数据name和name1,其中name1是不存在在页面中不做任何的显示。
说明3通过toRefs取出的值name如果发生了变化testData中的name不发生变化。
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlescript srchttps://unpkg.com/vue3/script
/head
bodydiv idapp{{name}}--{{name1}}/divscript typemoduleconst appVue.createApp({//创建setupsetup(props,context){const {reactive,toRefs}Vue;//从vue中引入toRefs和reactive//创建reactive设置响应式数据let testDatareactive({name:小春,sex:男});//从testData中取出name的值响应sex不参与响应const{name,name1}toRefs(testData);return {name,name1}}});//vue实例只作用于app这个DOM节点中const vmapp.mount(#app);//viewModel是组件帮助我们完成的/script
/body
/html输出结果
3、toRef的用法
说明1toRef从reactive中引出单条数据
说明2通过toRef取出的值name如果发生了变化testData中的name不发生变化。
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlescript srchttps://unpkg.com/vue3/script
/head
bodydiv idapp{{name}}/divscript typemoduleconst appVue.createApp({//创建setupsetup(props,context){const {reactive,toRef}Vue;//从vue中引入toRef和reactive//创建reactive设置响应式数据let testDatareactive({name:小春,sex:男});//从testData中取出name的值响应sex不参与响应const nametoRef(testData,name);return {name}}});//vue实例只作用于app这个DOM节点中const vmapp.mount(#app);//viewModel是组件帮助我们完成的/script
/body
/html输出结果
