快捷導(dǎo)航

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

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

這篇文章主要介紹了vue3中reactive和ref函數(shù)及對(duì)比,本文通過實(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)聽可以省)

3、reactive 對(duì)比 ref

都是用來生成響應(yīng)式數(shù)據(jù)
不同點(diǎn)：
- reactive不能處理簡(jiǎn)單類型的數(shù)據(jù)，只支持引用數(shù)據(jù)類型,ref支持基本和引用數(shù)據(jù)類型
- ref通過.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)文章

element-ui 遠(yuǎn)程搜索組件el-select在項(xiàng)目中組件化的實(shí)現(xiàn)代碼
這篇文章主要介紹了element-ui 遠(yuǎn)程搜索組件el-select在項(xiàng)目中組件化，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2019-12-12
Nuxt3項(xiàng)目搭建過程(Nuxt3+element-plus+scss詳細(xì)步驟)
這篇文章主要介紹了Nuxt3項(xiàng)目搭建（Nuxt3+element-plus+scss詳細(xì)步驟）,本次記錄一次使用Nuxt3搭建前端項(xiàng)目的過程，內(nèi)容包含Nuxt3的安裝，基于Vite腳手架（默認(rèn)）構(gòu)建的vue3項(xiàng)目，element-plus的安裝配置，scss的安裝，目錄結(jié)構(gòu)的創(chuàng)建和解釋，需要的朋友可以參考下
2022-12-12
VUE 3D輪播圖封裝實(shí)現(xiàn)方法
這篇文章主要為大家詳細(xì)介紹了VUE 3D輪播圖封裝實(shí)現(xiàn)方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2018-07-07
Vue + element 實(shí)現(xiàn)多選框組并保存已選id集合的示例代碼
這篇文章主要介紹了Vue + element 實(shí)現(xiàn)多選框組并保存已選id集合,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2020-06-06
vue2中filter()的實(shí)現(xiàn)代碼
vue2.0里，不再有自帶的過濾器，需要自己定義過濾器。下面通過實(shí)例代碼給大家介紹vue2中filter()的相關(guān)知識(shí)，感興趣的朋友一起看看吧
2017-07-07
el-table表頭添加勾選框的實(shí)現(xiàn)示例
本文主要介紹了el-table表頭添加勾選框的實(shí)現(xiàn)示例，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2023-01-01
詳解vue事件對(duì)象、冒泡、阻止默認(rèn)行為
本篇文章主要介紹了詳解vue事件對(duì)象、冒泡、阻止默認(rèn)行為，這里整理了詳細(xì)的代碼,有需要的小伙伴可以參考下。
2017-03-03
vue-preview動(dòng)態(tài)獲取圖片寬高并增加旋轉(zhuǎn)功能的實(shí)現(xiàn)
這篇文章主要介紹了vue-preview動(dòng)態(tài)獲取圖片寬高并增加旋轉(zhuǎn)功能的實(shí)現(xiàn)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
2020-07-07
vue3?ref和reactive的區(qū)別解析
這篇文章主要介紹了在Vue3中,ref用于創(chuàng)建簡(jiǎn)單數(shù)據(jù)的響應(yīng)式包裝,通過.value訪問和修改；reactive用于創(chuàng)建復(fù)雜對(duì)象的響應(yīng)式對(duì)象,可以直接訪問和修改屬性,兩者各有適用場(chǎng)景,ref更適合單個(gè)值,reactive更適合復(fù)雜對(duì)象,本文介紹vue3?ref和reactive區(qū)別,感興趣的朋友一起看看吧
2025-02-02
element ui表格實(shí)現(xiàn)下拉篩選功能
這篇文章主要為大家詳細(xì)介紹了element ui表格實(shí)現(xiàn)下拉篩選功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-11-11