簡(jiǎn)單聊聊Vue中的ref,toRef與toRefs
一、ref
ref 函數(shù),可以把簡(jiǎn)單數(shù)據(jù)類型包裹為響應(yīng)式數(shù)據(jù)(復(fù)雜類型也可以),注意 JS 中操作值的時(shí)候,需要加 .value 屬性,模板中正常使用即可。
舉個(gè)例子:
ref包裝基本類型數(shù)據(jù)
App.vue
<template> <div class="container"> <div>{{ name }}</div> <button @click="updateName">修改數(shù)據(jù)</button> </div> </template> <script> import { ref } from 'vue' export default { name: 'App', setup() { const name = ref('初映') const updateName = () => { name.value = '初映CY的前說(shuō)' } return { name, updateName } }, } </script>
可看見(jiàn)寫(xiě)法與reactive()一樣,不過(guò)是在js中書(shū)寫(xiě)的時(shí)候需要額外加一個(gè).value即可
ref包裝復(fù)雜類類型數(shù)據(jù)
注意:ref 其實(shí)也可以包裹復(fù)雜數(shù)據(jù)類型為響應(yīng)式數(shù)據(jù),一般對(duì)于數(shù)據(jù)類型未確定的情況下推薦使用 ref,例如后端返回的數(shù)據(jù)。
<template> <div class="container"> <div>{{ data?.name }}</div> <button @click="updateName">修改數(shù)據(jù)</button> </div> </template> <script> import { ref } from 'vue' export default { name: 'App', setup() { // 初始值是 null const data = ref(null) setTimeout(() => { // 右邊的對(duì)象可能是后端返回的 data.value = { name: '初映', } }, 1000) const updateName = () => { data.value.name = 'CY' } return { data, updateName } }, } </script>
如何選擇?
ref()和reactive()都是Vue.js3.0中提供的兩個(gè)響應(yīng)式API。
ref()主要用于創(chuàng)建一個(gè)響應(yīng)式數(shù)據(jù),它會(huì)將一個(gè)普通的JavaScript對(duì)象轉(zhuǎn)換為一個(gè)響應(yīng)式的對(duì)象,從而使數(shù)據(jù)的變化可以被Vue實(shí)例所追蹤,當(dāng)數(shù)據(jù)發(fā)生變化時(shí),Vue會(huì)自動(dòng)更新相關(guān)視圖。ref()創(chuàng)建的響應(yīng)式數(shù)據(jù)可以通過(guò).value屬性來(lái)訪問(wèn)和修改。
reactive()則主要用于創(chuàng)建一個(gè)響應(yīng)式對(duì)象,可以用作包含多個(gè)值的狀態(tài)對(duì)象,通常用于管理復(fù)雜的狀態(tài)。它可以將一個(gè)普通的JavaScript對(duì)象轉(zhuǎn)換為一個(gè)響應(yīng)式對(duì)象,并且支持嵌套屬性,即使嵌套屬性發(fā)生變化也會(huì)被Vue實(shí)例所追蹤。當(dāng)響應(yīng)式對(duì)象中有任何一個(gè)屬性發(fā)生變化時(shí),Vue也會(huì)自動(dòng)更新相關(guān)的視圖。
當(dāng)你明確知道需要包裹的是一個(gè)對(duì)象,那么推薦使用 reactive,其他情況使用 ref 即可。
Vue3.2 之后,更推薦使用 ref,性能得到了很大的提升。
二、toRef
toRef 函數(shù)的作用:轉(zhuǎn)換響應(yīng)式對(duì)象中某個(gè)屬性為單獨(dú)響應(yīng)式數(shù)據(jù),并且轉(zhuǎn)換后的值和之前是關(guān)聯(lián)的(ref 函數(shù)也可以轉(zhuǎn)換,但值非關(guān)聯(lián))。
先看下面這個(gè)例子:
<template> <div class="container"> <h2>name: {{ obj.name }} age: {{obj.age}}</h2> <button @click="updateName">修改數(shù)據(jù)</button> </div> </template> <script> import { reactive } from 'vue' export default { name: 'App', setup() { const obj = reactive({ name: '初映', age: 18, address: '江西', sex: '男', }) const updateName = () => { obj.name = '初映CY的前說(shuō)' } return { obj, updateName } }, } </script>
這樣寫(xiě)也可以將數(shù)據(jù)進(jìn)行更改成為響應(yīng)式的數(shù)據(jù),但是帶來(lái)了兩個(gè)問(wèn)題:
問(wèn)題 1:模板中都要使用 obj. 進(jìn)行獲取數(shù)據(jù),麻煩。
問(wèn)題 2:明明模板中只用到了 name 和 age,卻把整個(gè) obj 進(jìn)行了導(dǎo)出,沒(méi)必要,性能浪費(fèi)。
<template> <div class="container"> <h2>name: {{ name }} </h2> <button @click="updateName">修改數(shù)據(jù)</button> </div> </template> <script> import { reactive,toRef } from 'vue' export default { name: 'App', setup() { const obj = reactive({ name: '初映', age: 18, address: '江西', sex: '男', }) const name = toRef(obj, 'name') const updateName = () => { obj.name = '初映CY的前說(shuō)' } return { name, updateName } }, } </script>
這樣把我們需要的數(shù)據(jù)放進(jìn)return即可,節(jié)約了性能與在模板中的寫(xiě)法,有點(diǎn)點(diǎn)了‘按需導(dǎo)入’的意思
三、torefs
toRefs 函數(shù)的作用:轉(zhuǎn)換響應(yīng)式對(duì)象中所有屬性為單獨(dú)響應(yīng)式數(shù)據(jù),并且轉(zhuǎn)換后的值和之前是關(guān)聯(lián)的。
<template> <div class="container"> <h2>{{ name }} {{ age }}</h2> <button @click="updateName">修改數(shù)據(jù)</button> </div> </template> <script> import { reactive, toRefs } from 'vue' export default { name: 'App', setup() { const obj = reactive({ name: '初映', age: 10, }) const updateName = () => { obj.name = '初映CY的前說(shuō)' obj.age = 18 } return { ...toRefs(obj), updateName } }, } </script>
toRefs將我們所有的響應(yīng)式數(shù)據(jù)都進(jìn)行return出去了,屆時(shí)直接用上數(shù)據(jù)名稱即可,記得加上…喔
到此這篇關(guān)于簡(jiǎn)單聊聊Vue中的ref,toRef與toRefs的文章就介紹到這了,更多相關(guān)Vue ref toRef toRefs內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
前端項(xiàng)目中如何使用百度地圖api(含實(shí)例)
當(dāng)我們遇到定位展示的時(shí)候會(huì)出現(xiàn)使用地圖展示的需求,下面這篇文章主要給大家介紹了關(guān)于前端項(xiàng)目中如何使用百度地圖api(含實(shí)例)的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-06-06vue實(shí)現(xiàn)標(biāo)簽云效果的示例
這篇文章主要介紹了vue實(shí)現(xiàn)標(biāo)簽云效果的示例,幫助大家更好的理解和使用vue框架,感興趣的朋友可以了解下2020-11-11antv完成區(qū)間柱形圖一列多柱配置實(shí)現(xiàn)詳解
這篇文章主要為大家介紹了antv完成區(qū)間柱形圖一列多柱配置實(shí)現(xiàn)詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-10-10Vue?Router動(dòng)態(tài)路由實(shí)現(xiàn)實(shí)現(xiàn)更靈活的頁(yè)面交互
Vue?Router是Vue.js官方的路由管理器,用于構(gòu)建SPA(單頁(yè)應(yīng)用程序),本文將深入探討Vue?Router的動(dòng)態(tài)路由功能,希望可以幫助大家更好地理解和應(yīng)用Vue.js框架2024-02-02ant design vue 清空upload組件圖片緩存的問(wèn)題
這篇文章主要介紹了ant design vue 清空upload組件圖片緩存的問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-10-10vue3.0自定義指令(drectives)知識(shí)點(diǎn)總結(jié)
在本篇文章里小編給大家整體了一篇關(guān)于vue3.0自定義指令(drectives)知識(shí)點(diǎn)總結(jié),有興趣的朋友們可以學(xué)習(xí)下。2020-12-12淺談實(shí)現(xiàn)在線預(yù)覽PDF的幾種解決辦法
這篇文章主要介紹了淺談實(shí)現(xiàn)在線預(yù)覽PDF的幾種解決辦法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-08-08vue3中使用Apache?ECharts的詳細(xì)方法
最近在做一些數(shù)據(jù)透析的項(xiàng)目需要用到報(bào)表圖,那么報(bào)表圖好用的有老牌的ECharts,比較新意的AntV,思前馬后的想了一下還是用了Echarts,這篇文章主要介紹了vue3中使用Apache?ECharts,需要的朋友可以參考下2022-11-11vue-cli腳手架創(chuàng)建項(xiàng)目遇到的坑及解決
這篇文章主要介紹了vue-cli腳手架創(chuàng)建項(xiàng)目遇到的坑及解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-01-01