您好,登錄后才能下訂單哦!
本篇內(nèi)容主要講解“Vue3中ref與toRef的區(qū)別是什么”,感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷,實(shí)用性強(qiáng)。下面就讓小編來帶大家學(xué)習(xí)“Vue3中ref與toRef的區(qū)別是什么”吧!
如果利用ref將某一個(gè)對象中的某一個(gè)屬性值變成響應(yīng)式數(shù)據(jù)
我們修改響應(yīng)式數(shù)據(jù)是不會(huì)影響原始數(shù)據(jù)的;
同時(shí)視圖會(huì)跟新。
ref就是復(fù)制 復(fù)制是不會(huì)影響原始數(shù)據(jù)的
<template> <div> <div> <div>{{stateObj}}</div> <button @click="func1">按鈕</button> </div> </div> </template> <script> import {ref} from 'vue' export default { name: 'App', setup(){ let obj={name:"張三",age:22} //將對象中的某一個(gè)屬性 //變成響應(yīng)式數(shù)據(jù) //而不是將對象變成響應(yīng)式數(shù)據(jù) let stateObj=ref(obj.name) function func1(){ stateObj.value="張三變成李四"; //原始數(shù)據(jù)沒有發(fā)生改變 原始數(shù)據(jù)obj {name: "張三", age: 22} console.log("原始數(shù)據(jù)obj",obj) //響應(yīng)式數(shù)據(jù)發(fā)生改變了 /** 響應(yīng)式stateObj RefImpl { _rawValue: "張三變成李四", _shallow: false, __v_isRef: true, _value: "張三變成李四" } **/ //變成了一個(gè)ref的對象 console.log("響應(yīng)式stateObj",stateObj) } return {stateObj,func1} }, } </script>
如果利用toRef將某一個(gè)對象中的屬性變成了響應(yīng)式的數(shù)據(jù)
我們修改響應(yīng)式的數(shù)據(jù)是會(huì)影響原始數(shù)據(jù)的
如果數(shù)據(jù)是通過toRef創(chuàng)建的,修改值后,數(shù)據(jù)不會(huì)觸發(fā)視圖
toRef是引用;它引用的是以前那個(gè)對象中的屬性
所以你修改后,會(huì)影響到原始數(shù)據(jù)終中的值
<template> <div> <div> <div>{{state}}</div> <button @click="func1">按鈕</button> </div> </div> </template> <script> import {toRef} from 'vue' export default { name: 'App', setup(){ let obj={name:"張三",age:22} //將對象中的某一個(gè)屬性name變成響應(yīng)式數(shù)據(jù) //而不是將對象變成響應(yīng)式數(shù)據(jù) let state=toRef(obj, 'name'); console.log('toRef',state) function func1(){ state.value="我是李四"; console.log('obj',obj) console.log('state',state) } return {state,func1} }, } </script>
ref復(fù)制, 修改響應(yīng)式數(shù)據(jù),不會(huì)影響以前的數(shù)據(jù),界面會(huì)更改。
toRef引用, 修改響應(yīng)式的數(shù)據(jù),會(huì)影響以前的數(shù)據(jù),界面不會(huì)更新。
toRef的使用場景
如果想讓響應(yīng)式數(shù)據(jù)和原始數(shù)據(jù)關(guān)聯(lián)起來。
并且更新響應(yīng)式數(shù)據(jù)后,不想視圖更新;那么就可以使用toRef
ref和toRef的區(qū)別
(1). ref本質(zhì)是拷貝,修改響應(yīng)式數(shù)據(jù)不會(huì)影響原始數(shù)據(jù);toRef的本質(zhì)是引用關(guān)系,修改響應(yīng)式數(shù)據(jù)會(huì)影響原始數(shù)據(jù)
(2). ref數(shù)據(jù)發(fā)生改變,界面會(huì)自動(dòng)更新;toRef當(dāng)數(shù)據(jù)發(fā)生改變是,界面不會(huì)自動(dòng)更新
(3). toRef傳參與ref不同;toRef接收兩個(gè)參數(shù),第一個(gè)參數(shù)是哪個(gè)對象,第二個(gè)參數(shù)是對象的哪個(gè)屬性
到此,相信大家對“Vue3中ref與toRef的區(qū)別是什么”有了更深的了解,不妨來實(shí)際操作一番吧!這里是億速云網(wǎng)站,更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢,關(guān)注我們,繼續(xù)學(xué)習(xí)!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。