快捷導(dǎo)航

vue3中reactive和ref函數(shù)及對(duì)比分析

更新時(shí)間：2024年01月19日 10:16:33 作者：香香愛(ài)編程

這篇文章主要介紹了vue3中reactive和ref函數(shù)及對(duì)比,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下

reactive和ref函數(shù)

1. reactive

接受對(duì)象類型數(shù)據(jù)的參數(shù)傳入并返回一個(gè)響應(yīng)式的對(duì)象

<script setup>
 // 導(dǎo)入
 import { reactive } from 'vue'
 // 執(zhí)行函數(shù) 傳入?yún)?shù) 變量接收
 const state = reactive({
   msg:'this is msg'
 })
 const setSate = ()=>{
   // 修改數(shù)據(jù)更新視圖
   state.msg = 'this is new msg'//不需要.value
 }
</script>
<template>
  {{ state.msg }}
  <button @click="setState">change msg</button>
</template>

2. ref

接收簡(jiǎn)單類型或者對(duì)象類型的數(shù)據(jù)傳入并返回一個(gè)響應(yīng)式的對(duì)象

<script setup>
 // 導(dǎo)入
 import { ref } from 'vue'
 // 執(zhí)行函數(shù) 傳入?yún)?shù) 變量接收
 const count = ref(0)
 const setCount = ()=>{
   // 修改數(shù)據(jù)更新視圖必須加上.value
   count.value++
 }
</script>
<template>
  <button @click="setCount">{{count}}</button>
</template>

注意：

ref函數(shù)創(chuàng)建響應(yīng)式數(shù)據(jù)，返回值是一個(gè)對(duì)象
模版中使用ref數(shù)據(jù),省略.value，js代碼中不能省略(特殊：js中watch監(jiān)聽(tīng)可以省)

3、reactive 對(duì)比 ref

都是用來(lái)生成響應(yīng)式數(shù)據(jù)
不同點(diǎn)：
- reactive不能處理簡(jiǎn)單類型的數(shù)據(jù)，只支持引用數(shù)據(jù)類型,ref支持基本和引用數(shù)據(jù)類型
- ref通過(guò).value獲取數(shù)據(jù)，reactive不需要.value
- ref創(chuàng)建響應(yīng)式引用數(shù)據(jù)類型低層依賴reactive

到此這篇關(guān)于vue3中reactive和ref函數(shù)及對(duì)比的文章就介紹到這了,更多相關(guān)vue3 reactive和ref函數(shù)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

解決Vue在Tomcat8下部署頁(yè)面不加載的問(wèn)題
今天小編就為大家分享一篇解決Vue在Tomcat8下部署頁(yè)面不加載的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2019-11-11
Vue2實(shí)現(xiàn)組件延遲加載的示例代碼
當(dāng)一個(gè)頁(yè)面需要加載較多個(gè)組件時(shí),并且組件自身又比較復(fù)雜,如果一次性加載,可能等待時(shí)間較長(zhǎng),體驗(yàn)不好,這個(gè)時(shí)候就需要延遲加載了,本文為大家介紹了Vue2實(shí)現(xiàn)組件延遲加載的示例代碼,需要的可以參考下
2024-01-01
vue中使用Animate.css的教程詳解
Animate.css這個(gè)動(dòng)畫庫(kù),很多的動(dòng)畫在這個(gè)庫(kù)里面都定義好了,我們用的時(shí)候可以直接使用里面的類名就可以,下面我們就來(lái)看看如何在vue項(xiàng)目中使用Animate.css吧
2023-08-08
vue中定義的data為什么是函數(shù)
這篇文章主要介紹了vue中定義的data為什么是函數(shù),vue中已經(jīng)幫我們控制臺(tái)輸出警告，并且不會(huì)讓組件中的data合并到options中去，那么，很友好的處理了開(kāi)發(fā)者的強(qiáng)行將data寫成對(duì)象的可能性，需要的朋友可以參考下
2022-09-09
vue自定義底部導(dǎo)航欄Tabbar的實(shí)現(xiàn)代碼
這篇文章主要介紹了vue自定義底部導(dǎo)航欄Tabbar的實(shí)現(xiàn)代碼,非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2018-09-09
vue3.x中emits的基本用法實(shí)例
emits是Vue3新增的選項(xiàng),emits主要作用在子組件中,用于接收在父組件中綁定的方法,這篇文章主要給大家介紹了關(guān)于vue3.x中emits的基本用法,需要的朋友可以參考下
2022-07-07
Vue中使用方法、計(jì)算屬性或觀察者的方法實(shí)例詳解
這篇文章主要介紹了Vue中如何使用方法、計(jì)算屬性或觀察者的相關(guān)知識(shí)，非常不錯(cuò)，具有一定的參考借鑒價(jià)值 ,需要的朋友可以參考下
2018-10-10
VUE實(shí)現(xiàn)Studio管理后臺(tái)之鼠標(biāo)拖放改變窗口大小
這篇文章主要介紹了VUE實(shí)現(xiàn)Studio管理后臺(tái)之鼠標(biāo)拖放改變窗口大小的相關(guān)知識(shí)，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的工作或?qū)W習(xí)具有一定的參考價(jià)值,需要的朋友可以參考下
2020-03-03
vue中進(jìn)入詳情頁(yè)記住滾動(dòng)位置的方法(keep-alive)
今天小編就為大家分享一篇vue中進(jìn)入詳情頁(yè)記住滾動(dòng)位置的方法(keep-alive)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2018-09-09
Vue源碼解讀之Component組件注冊(cè)的實(shí)現(xiàn)
這篇文章主要介紹了Vue源碼解讀之Component組件注冊(cè)的實(shí)現(xiàn)，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2018-08-08