Vue3中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ù)值 })
訪問: state.參數(shù)名
訪問: state.參數(shù)名
toRef函數(shù)(了解即可)
toRef:將響應(yīng)式數(shù)據(jù)中某個(gè)字段提取出來成單獨(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:值}
訪問: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} } }
訪問: 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)文章
Vue中的element tabs點(diǎn)擊錨點(diǎn)定位,鼠標(biāo)滾動(dòng)定位
這篇文章主要介紹了Vue中的element tabs點(diǎn)擊錨點(diǎn)定位,鼠標(biāo)滾動(dòng)定位方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-07-07在elementui中Notification組件添加點(diǎn)擊事件實(shí)例
這篇文章主要介紹了在elementui中Notification組件添加點(diǎn)擊事件實(shí)例,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-11-11vue2+elementUI實(shí)現(xiàn)下拉樹形多選框效果實(shí)例
這篇文章主要給大家介紹了關(guān)于vue2+elementUI實(shí)現(xiàn)下拉樹形多選框效果的相關(guān)資料,這是最近的工作中遇到的一個(gè)需求,對(duì)大家的學(xué)習(xí)或者工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-07-07基于vue實(shí)現(xiàn)一個(gè)禪道主頁拖拽效果
最近在做一個(gè)基于vue的后臺(tái)管理項(xiàng)目。接下來通過本文給大家分析一款基于vue做一個(gè)禪道主頁拖拽效果,需要的朋友可以參考下2019-05-05vue用復(fù)選框?qū)崿F(xiàn)組件且支持單選和多選操作方式
這篇文章主要介紹了vue用復(fù)選框?qū)崿F(xiàn)組件且支持單選和多選操作方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-04-04Electron?store及shareObject進(jìn)程間數(shù)據(jù)交互存儲(chǔ)功能封裝
這篇文章主要為大家介紹了Electron?store及shareObject進(jìn)程間數(shù)據(jù)交互存儲(chǔ)功能封裝示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-09-09vue實(shí)現(xiàn)登錄數(shù)據(jù)的持久化的使用示例
在Vue.js中,實(shí)現(xiàn)登錄數(shù)據(jù)的持久化需要使用瀏覽器提供的本地存儲(chǔ)功能,Vue.js支持使用localStorage和sessionStorage來實(shí)現(xiàn)本地存儲(chǔ),本文就來介紹一下如何實(shí)現(xiàn),感興趣的可以了解一下2023-10-10結(jié)合axios對(duì)項(xiàng)目中的api請(qǐng)求進(jìn)行封裝操作
這篇文章主要介紹了結(jié)合axios對(duì)項(xiàng)目中的api請(qǐng)求進(jìn)行封裝操作,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-09-09