Vue3中reactive函數toRef函數ref函數簡介

Posted on by

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函數簡介的詳細內容，更多關於Vue3函數的資料請關註WalkonNet其它相關文章！

推薦閱讀：