??????歡迎來到我的博客，你將找到有關如何使用技術解決問題的文章，也會找到某個技術的學習路線。無論你是何種職業(yè)，我都希望我的博客對你有所幫助。最后不要忘記訂閱我的博客以獲取最新文章，也歡迎在文章下方留下你的評論和反饋。我期待著與你分享知識、互相學習和建立一個積極的社區(qū)。謝謝你的光臨，讓我們一起踏上這個知識之旅！

??介紹ref

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

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

下面我們看一看

上圖紅框中代表的意思是，我們哪里需要響應就在哪個里面導入上述代碼即可

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

<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 響應式對象= reactive(源對象)。
• **返回值：**一個Proxy的實例對象，簡稱：響應式對象。
• 注意點：reactive定義的響應式數(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>

運行結果如下

==注意：==深層次的數(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ù)。

??ref和reactive對比

宏觀角度看：

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

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

• 區(qū)別：

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

2. reactive重新分配一個新對象，會失去響應式（可以使用Object.assign去整體替換）。
   其實就是不能重復寫同一個對象

• 使用原則：

1. 若需要一個基本類型的響應式數(shù)據(jù)，必須使用ref。
2. 若需要一個響應式對象，層級不深，ref、reactive都可以。
3. 若需要一個響應式對象，且層級較深，推薦使用reactive。

??總結

本文根據(jù)禹神課程進行總結，本節(jié)主要介紹ref和reactive

挑戰(zhàn)與創(chuàng)造都是很痛苦的，但是很充實。文章來源地址http://www.zghlxwxcb.cn/news/detail-833539.html

到了這里，關于【Vue3】使用ref與reactive創(chuàng)建響應式對象的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網(wǎng)！