Vue3中reactive函數(shù)toRef函數(shù)ref函數(shù)簡介

更新時間：2021年09月23日 16:49:39 作者：SpringSir

這篇文章主要介紹了Vue3中的三種函數(shù)，分別對reactive函數(shù)toRef函數(shù)以及ref函數(shù)原理及使用作了簡單介紹，有需要的朋友可以借鑒參考下

reactive函數(shù)

reactive用于定義響應(yīng)式數(shù)據(jù)（可以理解成data的替代品）

用法：

導(dǎo)入 import {reactive} from ‘vue'

使用：

const state=reactive({
    參數(shù)名:參數(shù)值
})

訪問： state.參數(shù)名

toRef函數(shù)(了解即可)

toRef：將響應(yīng)式數(shù)據(jù)中某個字段提取出來成單獨(dú)響應(yīng)式數(shù)據(jù)

用法：

導(dǎo)入 import {toRef} from ‘vue'

使用：

const state=reactive({
    num:0
})
const num=toRef(state（響應(yīng)式數(shù)據(jù)）,'num屬性名')
num:{
    value:0
}
Ref實際可以理解成一種數(shù)據(jù)類型：{value:值}

訪問：num.value===0

注意點(diǎn)：

html：中使用響應(yīng)式數(shù)據(jù)時可以不用寫value

js中一定要寫value

ref函數(shù)

定義響應(yīng)式數(shù)據(jù)

{
    value:值
}

直接定義使用

導(dǎo)入
import {ref} from 'vue'
setup(){
定義
    const num=ref({a:1,b:2})  
    num:{
       value:{a:1,b:2}
    }
}

訪問： num.value===0

reactive:適用于多個數(shù)據(jù)，ref適用于單個數(shù)據(jù)

獲取dom

<template>
  <div ref="target">123</div>
</template>
scripte
import {ref} from 'vue'
setup(){
   const target=ref(null)   
   return {target} 
   target.value就是相應(yīng)dom   
}

獲取組件實例對象

ref用于原生標(biāo)簽就是獲取dom

ref用于組件標(biāo)簽就是獲取組件實例對象

用法和獲取dom一樣的

<template>
  <組件標(biāo)簽 ref="target">123</組件標(biāo)簽>
</template>
script
import {ref} from 'vue'
setup(){
   const target=ref(null)   
   return {target} 
   target.value就是組件實例對象
}

以上就是Vue3中reactive函數(shù)toRef函數(shù)ref函數(shù)簡介的詳細(xì)內(nèi)容，更多關(guān)于Vue3函數(shù)的資料請關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章:

相關(guān)文章

Vue實現(xiàn)固定底部組件的示例
本文主要介紹了Vue實現(xiàn)固定底部組件的示例，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2021-07-07
Vue3項目中使用自適應(yīng)Rem示例
這篇文章主要為大家介紹了Vue3項目中使用自適應(yīng)Rem示例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2023-08-08
uniapp中使用lottie實現(xiàn)JSON動畫的操作步驟
這篇文章主要介紹了如何在項目中使用JSON動畫組件,包括創(chuàng)建目錄結(jié)構(gòu)、下載JSON文件、編寫自定義組件代碼以及組件的使用方法,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下
2025-01-01
vue $mount 和 el的區(qū)別說明
這篇文章主要介紹了vue $mount 和 el的區(qū)別說明，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2020-09-09
在Echarts圖中給坐標(biāo)軸加一個標(biāo)識線markLine
這篇文章主要介紹了在Echarts圖中給坐標(biāo)軸加一個標(biāo)識線markLine，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2020-07-07
詳解Vue新增內(nèi)置組件的使用
這篇文章主要為大家介紹了Vue新增內(nèi)置組件的使用，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助
2021-12-12
vue的props實現(xiàn)子組件隨父組件一起變化
這篇文章主要為大家詳細(xì)介紹了vue的props如何實現(xiàn)子組件隨父組件一起變化,具有一定的參考價值，感興趣的小伙伴們可以參考一下
2016-10-10
記一次vuex的mapGetters無效原因及解決
這篇文章主要介紹了vuex的mapGetters無效原因及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-08-08
部署vue+Springboot前后端分離項目的步驟實現(xiàn)
這篇文章主要介紹了部署vue+Springboot前后端分離項目的步驟實現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2020-05-05
ElementUI級聯(lián)選擇器實現(xiàn)同一父級下最多只能選中一個子級
本文主要介紹了ElementUI級聯(lián)選擇器實現(xiàn)同一父級下最多只能選中一個子級,同一父級下的子節(jié)點(diǎn)單選,又可以選擇多個不同父級下的節(jié)點(diǎn),具有一定參考價值,感興趣的可以了解一下
2023-10-10