Vue3中reactive函數、toRef函數和ref函數有什么用

這篇文章給大家分享的是有關Vue3中reactive函數、toRef函數和ref函數有什么用的內容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。

reactive函數

reactive用于定義響應式數據（可以理解 成data的替代品）

用法：

導入 import {reactive} from ‘vue'

使用：

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

訪問： state.參數名

訪問： state.參數名

toRef函數(了解即可)

toRef：將響應式數據中某個字段提取出來成單獨響應式數據

用法：

導入 import {toRef} from ‘vue'

使用：

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

訪問：num.value===0

注意點：

html：中使用響應式數據時可以不用寫value

js中一定要寫value

ref函數

定義響應式數據

{
    value:值
}

直接定義使用

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

訪問： num.value===0

reactive:適用于多個數據，ref適用于單個數據

獲取dom

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

獲取組件實例對象

ref用于原生標簽就是獲取dom

ref用于組件標簽就是獲取組件實例對象

用法和獲取dom一樣的

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

感謝各位的閱讀！關于“Vue3中reactive函數、toRef函數和ref函數有什么用”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，讓大家可以學到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！