欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時(shí)間：2021年09月23日 16:49:39   作者：SpringSir  
這篇文章主要介紹了Vue3中的三種函數(shù)，分別對(duì)reactive函數(shù)toRef函數(shù)以及ref函數(shù)原理及使用作了簡(jiǎn)單介紹，有需要的朋友可以借鑒參考下

reactive函數(shù)

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

用法：

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

使用：

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

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

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

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

toRef：將響應(yīng)式數(shù)據(jù)中某個(gè)字段提取出來(lái)成單獨(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í)際可以理解成一種數(shù)據(jù)類型：{value:值}

訪問(wèn)：num.value===0

注意點(diǎn)：

html：中使用響應(yīng)式數(shù)據(jù)時(shí)可以不用寫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}
    }
}

訪問(wèn)： num.value===0

reactive:適用于多個(gè)數(shù)據(jù)，ref適用于單個(gè)數(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   
}

獲取組件實(shí)例對(duì)象

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

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

用法和獲取dom一樣的

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

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

相關(guān)文章

最新評(píng)論