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

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

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

介紹ref

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

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

下面我們看一看

在這里插入圖片描述

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

在這里插入圖片描述

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

請?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

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

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

實際例子如下

<template>
   <div class="person">
     <h2>{{Handmade.name}}手辦，價值{{ Handmade.price }}元</h2>
     <button @click="changePrice">修改價格</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}}手辦，價值{{ Handmade.price }}元</h2>
     <button @click="changePrice">修改價格</button>
     <br>
     <h2>運動：</h2>
      <ul>
        <li v-for="i in sports" :key="i.id">{{i.name}}</li>
      </ul>
      <button @click="changeFirstGame">修改第一個運動的名字</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>

運行結(jié)果如下

請?zhí)砑訄D片描述

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

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

下面再進行擴展一下知識點

在這里插入圖片描述

ref擴展

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

 <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>

其實只需要注意一點，別忘了ref在js中的書寫要求要加.value

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