詳解Vue3中ref和reactive函數的使用

更新時間：2022年07月04日 08:27:22 作者：ed。

這篇文章主要為大家詳細介紹了Vue3中ref和reactive函數的使用教程，文中的示例代碼講解詳細，對我們學習Vue有一定的幫助，需要的可以參考一下

前言

上一篇博文介紹 setup 函數的時候，最后出現一個問題，就是在 setup 函數中，編寫一個事件，直接去修改定義的變量，發(fā)現頁面上沒有更新成功，并且控制臺報錯，那這篇博客就是講解遇到的這個問題應該如何處理。

ref 函數介紹

ref 作用就是將基礎數據轉換為響應式數據，把數據包裝成響應式的引用數據類型的數據。
通過對參數返回值的 value 屬性獲取響應式的值，并且修改的時候也需要對 value 進行修改。
在 vue2 當中，通過給元素添加 ref='xxx' ，然后使用 refs.xxx 的方式來獲取元素，vue3 也可以。
當 ref 里面的值發(fā)生變化的時候，視圖會自動更新數據。
ref 可以操作基本數據類型和復雜數據類型，建議使用 ref 操作只對基本數據類型進行操作。

ref 函數使用

使用 ref 函數很簡單，首先要在頁面引用，然后就可以直接使用了，具體怎么使用呢，下面為了方便介紹，簡單來幾個案例。

ref 函數處理基本數據類型

首先提一個需求：頁面有一個名稱需要顯示，有一個按鈕，點擊按鈕的時候修改頁面展示的這個名字。

<template>
  <div>
    <h1>ref reactive 函數</h1>
    <h1>姓名：{{name_ref}}</h1>
    <el-button type="primary" @click="btn">修改名字</el-button>
  </div>
</template>
<script>
  import { ref } from 'vue'  // 引入 ref
  export default {
    setup() {
      const name = '????.'   // 創(chuàng)建一個變量為 ????.
      const name_ref = ref(name)   // ref 將參數包裹轉換成響應式數據
      const btn = () => {   // 按鈕點擊修改名字
        name_ref = '我是????.'   // 將名字內容改為 我是????. 
      }
      return { name_ref, btn }  // 把頁面需要使用的參數和方法拋出去
    }
  }
</script>

編寫完上面的代碼保存刷新，可以正常渲染數據，但是點擊按鈕修改名字的時候，出現問題！

為什么使用過 ref 將數據映射為響應式數據還是報錯呢？我們可以先打印一下 ref 包裹后，也就是 name_ref 這個參數，看一下他的結構。

所以說修改代碼：

<template>
  <div>
    <h1>ref reactive 函數</h1>
    <h1>姓名：{{name_ref}}</h1>
    <el-button type="primary" @click="btn">修改名字</el-button>
  </div>
</template>
<script>
  import { ref } from 'vue'
  export default {
    setup() {
      const name = '????.'
      const name_ref = ref(name)
      console.log(name_ref)
      const btn = () => {
        name_ref.value = '我是????.'  // 對響應式數據的value進行操作
      }
      return { name_ref, btn }
    }
  }
</script>

然后在保存代碼刷新頁面查看效果。

非常棒，數據完美的修改了。

有一點需要說一下哈，就是在單文件組件中，不必寫value，因為setup方法會自動解析，簡單的可以理解成 html 代碼不需要額外操作 value，但是邏輯層需要。

ref 函數處理復雜數據類型

首先聲明：不建議使用 ref 函數處理復雜數據類型（數組、對象等），用 ref 函數處理基本數據類型（數字、字符串等）就可以了。

例如我們寫一個案例，創(chuàng)建一個個人信息，放到對象里面展示。

<template>
  <div>
    <h1>ref reactive 函數</h1>
    <h1>姓名：{{name_ref.name}}</h1>
    <h1>年齡：{{name_ref.age}}</h1>
  </div>
</template>
<script>
  import { ref } from 'vue'
  export default {
    setup() {
      const boy = {
        name: '????.',
        age: 10
      }
      const name_ref = ref(boy)
      console.log(name_ref)
      return { name_ref }
    }
  }
</script>

我們先看一下對象被 ref 函數包裹后的數據結構。

所以說，對象而言，我們修改也是通過 value 進行操作。

<template>
  <div>
    <h1>ref reactive 函數</h1>
    <h1>姓名：{{name_ref.name}}</h1>
    <h1>年齡：{{name_ref.age}}</h1>
    <el-button type="primary" @click="btn">修改名字</el-button>
  </div>
</template>
<script>
  import { ref } from 'vue'
  export default {
    setup() {
      const boy = {
        name: '????.',
        age: 10
      }
      const name_ref = ref(boy)
      console.log(name_ref)
      const btn = () => {
        name_ref.value.name = '我是????.'  // 對響應式數據的value進行操作
        name_ref.value.age = 11  // 對響應式數據的value進行操作
      }
      return { name_ref, btn }
    }
  }
</script>

保存代碼，刷新頁面，查看效果。

看到名稱和年齡都被成功修改了。

當然了，對于數組的操作也是一樣的啦！

<template>
  <div>
    <h1>ref reactive 函數</h1>
    <h1>姓名：{{name_ref[0]}}</h1>
    <h1>年齡：{{name_ref[1]}}</h1>
    <el-button type="primary" @click="btn">修改名字</el-button>
  </div>
</template>
<script>
  import { ref } from 'vue'
  export default {
    setup() {
      const boy = ['????.', 10]
      const name_ref = ref(boy)
      const btn = () => {
        name_ref.value[0] = '我是????.'  // 對響應式數據的value進行操作
        name_ref.value[1] = 11  // 對響應式數據的value進行操作
      }
      return { name_ref, btn }
    }
  }
</script>

保存查看，一樣的效果。

ref 函數獲取單個DOM元素

和 vue2 一樣，可以使用 ref 獲取元素，用法和操作數據類型相似。

頁面上有一個標簽，點擊按鈕，獲取標簽的相關數據。

<template>
  <div>
    <h1>ref reactive 函數</h1>
    <p style="color: blue;" ref="boy">我是????.</p>
    <el-button type="primary" @click="btn">獲取元素</el-button>
  </div>
</template>
<script>
  import { ref, onMounted } from 'vue'
  export default {
    setup() {
      let boy = ref();
      const btn = () => {
        console.log(boy)
        console.log(boy.value)
        console.log(boy.value.innerText)
        console.log(boy.value.style.color)
      }
      return {boy, btn }
    }
  }
</script>

刷新查看運行效果。

其他相關方法

isRef

判斷是否為 ref 對象。

<script>
  import { ref, isRef } from 'vue'
  export default {
    setup() {
      const a = ref('a')
      const b = 'b' 
      console.log(isRef(a))   // true
      console.log(isRef(b))   // false
    }
  }
</script>

unref

如果參數為 ref，則返回內部值，否則返回參數本身。

val = isRef(val) ? val.value : val

上邊代碼可以看懂吧？

<script>
  import { ref, unref } from 'vue'
  export default {
    setup() {
      const temp = ref(3)
      const newTemp = unref(temp) // newTemp 確?，F在是數字類型 3
      const a = unref(1) // a 確保現在是數字類型 1
      console.log(newTemp, a)
    }
  }
</script>

好了，這是 ref 函數和與其常見的相關的其他函數相關的知識點內容，到此為止吧，有其他的可以自己在研究一下。

reactive 函數介紹

上面說了 ref 函數的基本用法，接下來是 reactive 函數，它的用法與 ref 函數的用法相似，也是將數據變成響應式數據，當數據發(fā)生變化時UI也會自動更新。不同的是 ref 用于基本數據類型，而 reactive 是用于復雜數據類型，所以說，不建議用 ref 函數來處理復雜數據類型的原因就是，有 reactive 來處理復雜類型數據。

reactive 函數使用

用完了 ref 函數，那 reactive 函數就很好理解了哈。

ref 函數處理對象

還是， reactive 函數用來處理數組或者是對象，我們還是寫一個案例，操作人的基本信息。

我們還是先打印一下用 reactive 函數包裹后的數據結構。

<template>
  <div>
    <h1>ref reactive 函數</h1>
    <p>姓名：{{boy_reactive.name}}</p>
    <p>年齡：{{boy_reactive.age}}</p>
  </div>
</template>
<script>
  import { reactive } from 'vue'
  export default {
    setup() {
      const boy = {
        name: '我是????.',
        age: 10
      }
      const boy_reactive = reactive(boy)
      console.log(boy_reactive)
      return { boy_reactive }
    }
  }
</script>

有打印的結果我們可以看見，這時候的數據就不是被包裹在 value 下面了，所以說我們可以直接獲取到。

<template>
  <div>
    <h1>ref reactive 函數</h1>
    <p>姓名：{{boy_reactive.name}}</p>
    <p>年齡：{{boy_reactive.age}}</p>
    <el-button type="primary" @click="btn">修改信息</el-button>
  </div>
</template>
<script>
  import { reactive } from 'vue'
  export default {
    setup() {
      const boy = {
        name: '我是????.',
        age: 10
      }
      const boy_reactive = reactive(boy)
      const btn = () => {
        boy_reactive.name = '????.'
        boy_reactive.age = 11
      }
      return { boy_reactive, btn }
    }
  }
</script>

保存刷新，查看效果。

ref 函數處理數組

處理數組的方式和處理對象的方式是一樣一樣的。

直接上代碼：

<template>
  <div>
    <h1>ref reactive 函數</h1>
    <p>姓名：{{boy_reactive[0]}}</p>
    <p>年齡：{{boy_reactive[1]}}</p>
    <el-button type="primary" @click="btn">修改信息</el-button>
  </div>
</template>
<script>
  import { reactive } from 'vue'
  export default {
    setup() {
      const boy = ['我是????.', 10]
      const boy_reactive = reactive(boy)
      const btn = () => {
        boy_reactive[0] = '????.'
        boy_reactive[1] = 11
      }
      return { boy_reactive, btn }
    }
  }
</script>

我們可以看到效果是一樣的。

以上就是詳解Vue3中ref和reactive函數的使用的詳細內容，更多關于Vue3 ref reactive的資料請關注腳本之家其它相關文章！

您可能感興趣的文章:

解決vue打包后vendor.js文件過大問題
這篇文章主要介紹了解決vue打包后vendor.js文件過大問題，本文給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下
2019-07-07
mpvue微信小程序開發(fā)之實現一個彈幕評論
這篇文章主要介紹了mpvue小程序開發(fā)之實現一個彈幕評論功能，本文通過實例講解的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下
2019-11-11
vue中的rem如何配置
這篇文章主要介紹了vue中的rem如何配置，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-08-08
Vue $nextTick 為什么能獲取到最新Dom源碼解析
這篇文章主要為大家介紹了Vue $nextTick 為什么能獲取到最新Dom源碼解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
2022-10-10
深入理解vue2.0路由如何配置問題
本篇文章主要介紹了vue2.0路由配置問題，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-07-07
Vue前端整合Element?Ui的教程詳解
這篇文章主要介紹了Vue前端整合Element?Ui,本節(jié)內容服務于SpringBoot?+?Vue?搭建?JavaWeb?增刪改查項目，本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下
2022-07-07
基于Vue實現微信小程序的圖文編輯器
這篇文章主要介紹了基于Vue實現微信小程序的圖文編輯器,由于微信小程序不能使用常規(guī)的圖文編輯器(比如百度的UEditor )編輯新聞內容之類的，所以用vue寫了個針對小程序用的圖文編輯器需要的朋友可以參考下
2018-07-07
webpack轉vite的詳細操作流程與問題總結
Vite是新一代的前端開發(fā)與構建工具,相比于傳統的webpack,Vite 有著極速的本地項目啟動速度(通常不超過5s)以及極速的熱更新速度(幾乎無感知),下面這篇文章主要給大家介紹了關于webpack轉vite的詳細操作流程與問題總結的相關資料,需要的朋友可以參考下
2023-03-03
一文帶你掌握Vue中的路由守衛(wèi)
路由守衛(wèi)（Route?Guards）是?Vue?Router?的一個功能,它允許我們在路由發(fā)生之前執(zhí)行邏輯判斷,這篇文章主要為大家介紹了Vue中路由守衛(wèi)的具體應用,需要的可以了解下
2024-03-03
vue使用路由router-view的詳細代碼
這篇文章主要介紹了vue使用路由router-view的相關知識,其原理就是采用?SPA(single-page-application)?模式,就是只有一個?Web?頁面的應用,通過?router?來控制頁面的刷新和迭代,感興趣的朋友一起看看吧
2023-12-12