vue3前端開發(fā)，自學(xué)，學(xué)習(xí)一下，reactive和ref的差別。以及基礎(chǔ)用法。

前言，這2個東西，都能對外輸出動態(tài)的數(shù)據(jù)對象。但是，有點(diǎn)區(qū)別，是，reactive只支持輸入一個對象作為參數(shù)，ref則還可以支持簡單的數(shù)據(jù)信息作為參數(shù)。待會有案例代碼展示。

下面看看代碼內(nèi)容。第一個先看看reactive的練習(xí)代碼。

<template>

  <h3>入口文件</h3>
  <!-- <Base /> -->
  <!-- <SetupDemo /> -->
  <ReactiveDemo />

</template>

<script setup>
import Base from './components/Base.vue'
import SetupDemo from './components/SetupDemo.vue'
import ReactiveDemo from './components/ReactiveDemo.vue';
</script>

這個是入口文件，里面調(diào)用了一個自定義組件，ReactiveDemo.vue.

<script setup>
//reactive基礎(chǔ)練習(xí)步驟
//1：導(dǎo)入
import { reactive } from 'vue';
//2:調(diào)用 -只能支持傳入一個傳統(tǒng)的對象，作為reactive的參數(shù)。
const count = reactive({
    price:10
})
</script>

<template>
    <h3>reactive基礎(chǔ)學(xué)習(xí)</h3>
    <p>草莓單價:{{ count.price }}</p>
</template>

這個ReactiveDemo.vue里面的代碼內(nèi)容。

如圖，可以正常獲取到，經(jīng)過reactive包裝后的動態(tài)對象的內(nèi)容。因為它是一個對象，所以我們需要使用“.”[點(diǎn)]的形式，把里面的數(shù)據(jù)調(diào)用出來。

下面展示的是ref，接收對象形式的參數(shù)內(nèi)容。案例代碼。

<script setup>
//reactive基礎(chǔ)練習(xí)步驟
//1：導(dǎo)入
// import { reactive } from 'vue';
//2:調(diào)用 -只能支持傳入一個傳統(tǒng)的對象，作為reactive的參數(shù)。
// const count = reactive({
//     price:10
// })

/**
 * ref ,既可以支持對象作參數(shù)，又支持簡單的數(shù)據(jù)內(nèi)容作參數(shù)
 */
//1:導(dǎo)入
import { ref } from 'vue';
//2:調(diào)用
const count = ref({
    price:99
})
</script>

<template>
    <h3>reactive基礎(chǔ)學(xué)習(xí)</h3>
    <p>草莓單價:{{ count.price }}</p>
</template>

如圖，是可以正常獲取到草莓的單價為99元。

這個效果，可以使用reactice一樣的。

下面展示一下，ref接收一個簡單的數(shù)據(jù)類型的案例效果。以及，如果你想在腳本區(qū)域內(nèi)修改它的數(shù)據(jù)，需要借助于（*.value）才能修改。

<script setup>
//reactive基礎(chǔ)練習(xí)步驟
//1：導(dǎo)入
// import { reactive } from 'vue';
//2:調(diào)用 -只能支持傳入一個傳統(tǒng)的對象，作為reactive的參數(shù)。
// const count = reactive({
//     price:10
// })

/**
 * ref ,既可以支持對象作參數(shù)，又支持簡單的數(shù)據(jù)內(nèi)容作參數(shù)
 */
//1:導(dǎo)入
import { ref } from 'vue'
//2:調(diào)用
// const count = ref({
//     price:99
// })
//3:ref接收 簡單的數(shù)據(jù)類型。
const count = ref(66)

</script>

<template>
    <h3>reactive基礎(chǔ)學(xué)習(xí)</h3>
    <p>草莓單價:{{ count }}</p>
</template>

這個代碼顯示的是，我們僅僅是調(diào)用了。并未去修改它。所以，直接使用count就能調(diào)取成功了。

如圖，草莓單價是66元。正常顯示了。

如果想更改這個單價，就得借助于，.value了。

<script setup>
//reactive基礎(chǔ)練習(xí)步驟
//1：導(dǎo)入
// import { reactive } from 'vue';
//2:調(diào)用 -只能支持傳入一個傳統(tǒng)的對象，作為reactive的參數(shù)。
// const count = reactive({
//     price:10
// })

/**
 * ref ,既可以支持對象作參數(shù)，又支持簡單的數(shù)據(jù)內(nèi)容作參數(shù)
 */
//1:導(dǎo)入
import { ref } from 'vue'
//2:調(diào)用
// const count = ref({
//     price:99
// })
//3:ref接收 簡單的數(shù)據(jù)類型。
const count = ref(66)
const btnHandle = ()=>{
    count.value++
}
</script>

<template>
    <h3>reactive基礎(chǔ)學(xué)習(xí)</h3>
    <p>草莓單價:{{ count }}</p>
    <button @click="btnHandle">單價+1</button>
</template>

如圖，價格確實(shí)可以靠點(diǎn)擊增加了。文章來源地址http://www.zghlxwxcb.cn/news/detail-801937.html

到了這里，關(guān)于vue3前端開發(fā)，自學(xué)一下reactive,ref的差異是什么。的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！