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用于定義響應式數(shù)據(jù)（可以理解成data的替代品）

用法：

導入 import {reactive} from ‘vue'

使用：

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

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

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

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

用法：

導入 import {toRef} from ‘vue'

使用：

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

訪問：num.value===0

注意點：

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

js中一定要寫value

ref函數(shù)

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

{
    value:值
}

直接定義使用

導入
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就是相應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函數(shù)toRef函數(shù)ref函數(shù)簡介的詳細內(nèi)容，更多關于Vue3函數(shù)的資料請關注腳本之家其它相關文章！

您可能感興趣的文章:

Vue中的element tabs點擊錨點定位,鼠標滾動定位
這篇文章主要介紹了Vue中的element tabs點擊錨點定位,鼠標滾動定位方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2024-07-07
Vuex中mutations的用法及說明
這篇文章主要介紹了Vuex中mutations的用法及說明,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2024-01-01
在elementui中Notification組件添加點擊事件實例
這篇文章主要介紹了在elementui中Notification組件添加點擊事件實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2020-11-11
vue2+elementUI實現(xiàn)下拉樹形多選框效果實例
這篇文章主要給大家介紹了關于vue2+elementUI實現(xiàn)下拉樹形多選框效果的相關資料,這是最近的工作中遇到的一個需求,對大家的學習或者工作具有一定的參考借鑒價值,需要的朋友可以參考下
2023-07-07
基于vue實現(xiàn)一個禪道主頁拖拽效果
最近在做一個基于vue的后臺管理項目。接下來通過本文給大家分析一款基于vue做一個禪道主頁拖拽效果,需要的朋友可以參考下
2019-05-05
Vue中插槽slot的使用方法
插槽就是子組件中的提供給父組件使用的一個占位符，用<slot></slot> 表示，父組件可以在這個占位符中填充任何模板代碼，如 HTML、組件等，填充的內(nèi)容會替換子組件的<slot></slot>標簽，這篇文章主要介紹了Vue插槽的理解和使用,需要的朋友可以參考下
2023-03-03
vue用復選框?qū)崿F(xiàn)組件且支持單選和多選操作方式
這篇文章主要介紹了vue用復選框?qū)崿F(xiàn)組件且支持單選和多選操作方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2024-04-04
Electron?store及shareObject進程間數(shù)據(jù)交互存儲功能封裝
這篇文章主要為大家介紹了Electron?store及shareObject進程間數(shù)據(jù)交互存儲功能封裝示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
2022-09-09
vue實現(xiàn)登錄數(shù)據(jù)的持久化的使用示例
在Vue.js中,實現(xiàn)登錄數(shù)據(jù)的持久化需要使用瀏覽器提供的本地存儲功能,Vue.js支持使用localStorage和sessionStorage來實現(xiàn)本地存儲,本文就來介紹一下如何實現(xiàn),感興趣的可以了解一下
2023-10-10
結(jié)合axios對項目中的api請求進行封裝操作
這篇文章主要介紹了結(jié)合axios對項目中的api請求進行封裝操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2020-09-09