快捷導(dǎo)航

Vue3使用ref與reactive創(chuàng)建響應(yīng)式對(duì)象的示例代碼

更新時(shí)間：2024年02月22日 09:43:54 作者：小饅頭學(xué)python

這篇文章主要詳細(xì)介紹了Vue3使用ref與reactive創(chuàng)建響應(yīng)式對(duì)象的方法步驟,文中通過代碼示例和圖文結(jié)合的方式給大家介紹的非常詳細(xì),具有一定的參考價(jià)值,需要的朋友可以參考下

介紹ref

先來簡單介紹一下ref，它可以定義響應(yīng)式的變量

語法：let xxx = ref(初始值)。
**返回值：**一個(gè)RefImpl的實(shí)例對(duì)象，簡稱ref對(duì)象或ref，ref對(duì)象的value屬性是響應(yīng)式的。
注意點(diǎn)：
- JS中操作數(shù)據(jù)需要：xxx.value，但模板中不需要.value，直接使用即可。
- 對(duì)于let name = ref('張三')來說，name不是響應(yīng)式的，name.value是響應(yīng)式的。

下面我們看一看

在這里插入圖片描述

上圖紅框中代表的意思是，我們哪里需要響應(yīng)就在哪個(gè)里面導(dǎo)入上述代碼即可

在這里插入圖片描述

同時(shí)我們要在js中為變量添加value，否則不會(huì)更新，如下圖所示

請(qǐng)?zhí)砑訄D片描述

<template>
   <div class="person">
     <h2>姓名：{{name}}</h2>
     <h2>年齡：{{age}}</h2>
     <h2>地址：{{address}}</h2>
     <button @click="changeName">修改名字</button>
     <button @click="changeAge">修改年齡</button>
     <button @click="showTel">查看聯(lián)系方式</button>
   </div>
 </template>
 
 <script lang="ts" setup name="Person11">
   import {ref} from 'vue'
   let name = ref('饅頭')
   let age = ref(18)
   let tel = '11514611254'
   let address = '北京市'
 

   function changeName() {
     name.value = 'zhang-san' 
     console.log(name) 
   }
   function changeAge() {
     age.value += 1 
     console.log(age) 
   }
   function showTel() {
     alert(tel)
   }
 </script>
 
 <style scoped>
   .person {
     background-color: skyblue;
     box-shadow: 0 0 10px;
     border-radius: 10px;
     padding: 20px;
   }
   button {
     margin: 0 5px;
   }
 </style>

介紹reactive

相對(duì)比ref，reactive針對(duì)自定義的對(duì)象數(shù)組等

語法：let 響應(yīng)式對(duì)象= reactive(源對(duì)象)。
**返回值：**一個(gè)Proxy的實(shí)例對(duì)象，簡稱：響應(yīng)式對(duì)象。
注意點(diǎn)：reactive定義的響應(yīng)式數(shù)據(jù)是“深層次”的。

實(shí)際例子如下

<template>
   <div class="person">
     <h2>{{Handmade.name}}手辦，價(jià)值{{ Handmade.price }}元</h2>
     <button @click="changePrice">修改價(jià)格</button>
   </div>
 </template>
 
 <script lang="ts" setup name="Person11">
   import {reactive} from 'vue'
   let Handmade = reactive({name:'小舞',price:888})

   function changePrice() {
     Handmade.price += 50
   }
  
 </script>

如果是數(shù)組呢

<template>
   <div class="person">
     <h2>{{Handmade.name}}手辦，價(jià)值{{ Handmade.price }}元</h2>
     <button @click="changePrice">修改價(jià)格</button>
     <br>
     <h2>運(yùn)動(dòng)：</h2>
      <ul>
        <li v-for="i in sports" :key="i.id">{{i.name}}</li>
      </ul>
      <button @click="changeFirstGame">修改第一個(gè)運(yùn)動(dòng)的名字</button>
   </div>
 </template>
 
 <script lang="ts" setup name="Person11">
  import {reactive} from 'vue'
  let Handmade = reactive({name:'小舞',price:888})
  let sports = reactive([
    {id:'a',name:'足球'},
    {id:'b',name:'籃球'},
    {id:'c',name:'乒乓球'}
  ])
   function changePrice() {
     Handmade.price += 50
   }
   function changeFirstGame(){
    sports[0].name = '羽毛球'
  }
  
 </script>

運(yùn)行結(jié)果如下

請(qǐng)?zhí)砑訄D片描述

==注意：==深層次的數(shù)據(jù)也行可以的

let obj = reactive({
    a:{
      b:{
        c:666
      }
    }
  })

下面再進(jìn)行擴(kuò)展一下知識(shí)點(diǎn)

在這里插入圖片描述

ref擴(kuò)展

前面說ref可以定義基本類型，但是這里我再說明一下，其實(shí)ref也可以創(chuàng)建對(duì)象類型，但是reactive確實(shí)不可以定義基本類型

 <script lang="ts" setup name="Person11">
  import {ref} from 'vue'
  let Handmade = ref({name:'小舞',price:888})
  let sports = ref([
    {id:'a',name:'足球'},
    {id:'b',name:'籃球'},
    {id:'c',name:'乒乓球'}
  ])
   function changePrice() {
     Handmade.value.price += 50
   }
   function changeFirstGame(){
    sports.value[0].name = '羽毛球'
  }
  
 </script>

其實(shí)只需要注意一點(diǎn)，別忘了ref在js中的書寫要求要加.value

若ref接收的是對(duì)象類型，內(nèi)部其實(shí)也是調(diào)用了reactive函數(shù)。

ref和reactive對(duì)比

宏觀角度看：

ref用來定義：基本類型數(shù)據(jù)、對(duì)象類型數(shù)據(jù)；

reactive用來定義：對(duì)象類型數(shù)據(jù)。

區(qū)別：

ref創(chuàng)建的變量必須使用.value（可以使用volar插件自動(dòng)添加.value）。
在設(shè)置–》擴(kuò)展–》Volar

在這里插入圖片描述

reactive重新分配一個(gè)新對(duì)象，會(huì)失去響應(yīng)式（可以使用Object.assign去整體替換）。
其實(shí)就是不能重復(fù)寫同一個(gè)對(duì)象

使用原則：

若需要一個(gè)基本類型的響應(yīng)式數(shù)據(jù)，必須使用ref。
若需要一個(gè)響應(yīng)式對(duì)象，層級(jí)不深，ref、reactive都可以。
若需要一個(gè)響應(yīng)式對(duì)象，且層級(jí)較深，推薦使用reactive。