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

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

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

reactive和ref函數(shù)

1. reactive

接受對象類型數(shù)據(jù)的參數(shù)傳入并返回一個響應式的對象

<script setup>
 // 導入
 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

接收簡單類型或者對象類型的數(shù)據(jù)傳入并返回一個響應式的對象

<script setup>
 // 導入
 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)建響應式數(shù)據(jù)，返回值是一個對象
模版中使用ref數(shù)據(jù),省略.value，js代碼中不能省略(特殊：js中watch監(jiān)聽可以省)

3、reactive 對比 ref

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

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

您可能感興趣的文章:

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