Vue3中使用ref與reactive創(chuàng)建響應(yīng)式數(shù)據(jù)的示例代碼

更新時間：2024年08月12日 09:21:37 作者：布吶吶na

這篇文章主要介紹了Vue3中使用ref與reactive創(chuàng)建響應(yīng)式數(shù)據(jù)的方法,文中通過代碼示例講解的非常詳細(xì),對大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下

1 ref創(chuàng)建：基本類型的響應(yīng)式數(shù)據(jù)

使用ref將基本類型的數(shù)據(jù)變成一個RefImpl的實例對象，對象的value屬性即為具體數(shù)值，函數(shù)修改時需要修改value屬性，但是在模板中直接使用，不需要value：

<template>
  <h1 class="home">首頁</h1>
  // 基本數(shù)據(jù)類型
  <p>{{name}}</p>
  <p>{{age}}</p>
  <button @click="addAge">增加年齡</button>
</template>
 
<script setup lang="ts">
  import {ref} from "vue";
 
  let name = ref("張三")
  let age = ref(18)
 
  function addAge(){
    age.value += 1
  }
</script>

2 ref創(chuàng)建：對象類型的響應(yīng)式數(shù)據(jù)

ref既可以定義基礎(chǔ)類型的數(shù)據(jù)，也可以定義對象類型的響應(yīng)式數(shù)據(jù)，但是都必須加上.value：

<template>
  <h1 class="home">首頁</h1>
  <p>我喜歡開{{car.name}}</p>
  <button @click="changeCar">修改汽車</button>
</template>
 
<script setup lang="ts">
  import {ref} from "vue";
 
  // 數(shù)據(jù)
  let car = ref({name: "AuDi", price: 1000000})
  // 方法
  function changeCar(){
    car.value.name = car.value.name === "AuDi" ? "YaDi" : "AuDi"
  }
</script>

3 reactive創(chuàng)建：對象類型的響應(yīng)式數(shù)據(jù)

使用reactive將對象類型數(shù)據(jù)變成一個Proxy的實例對象，將其變成響應(yīng)式數(shù)據(jù)，其實不僅僅是對象類型，數(shù)組、集合等類型均可：

注：reactive只能創(chuàng)建對象類型的響應(yīng)式數(shù)據(jù)

<template>
  <h1 class="home">首頁</h1>
  // 對象數(shù)據(jù)類型
  <p>我喜歡開{{car.name}}</p>
  <button @click="changeCar">修改汽車</button>
  <hr>
  <h3>我喜歡的游戲：</h3>
  // 數(shù)組數(shù)據(jù)類型
  <ul>
    <li v-for="item in games" :key="item.id">{{item.name}}</li>
  </ul>
  <button @click="changeFirstGame">改變第一個游戲</button>
  <hr>
</template>
 
<script setup lang="ts">
  import {ref} from "vue";
  import {reactive} from "vue";
 
  // 數(shù)據(jù)
  let car = reactive({name: "AuDi", price: 1000000})
  let games = reactive([
    {id: "001", name: "英雄聯(lián)盟"},
    {id: "002", name: "穿越火線"},
    {id: "003", name: "洛克王國"}
  ])
  // 方法
  function changeCar(){
    car.name = car.name === "AuDi" ? "YaDi" : "AuDi"
  }
  function changeFirstGame(){
    games[0].name = "LOL"
  }
</script>

4 ref與reactive

當(dāng)修改使用reactive創(chuàng)建的對象屬性時，如果只修改對象的某個屬性，則不會出現(xiàn)問題。如果修改整個對象比如：

  function changeCar(){
    car = {name: "YaDi", price: 1000}
  }

  function changeCar(){
    car = reactive({name: "YaDi", price: 1000})
  }

上面兩種寫法均無法修改數(shù)據(jù)，頁面不會更新，數(shù)據(jù)失去了響應(yīng)式。正確修改方式：

<template>
  <h1 class="home">首頁</h1>
  <p>我喜歡開{{car.name}}，價值{{car.price}}元</p>
  <button @click="changeCar">修改汽車</button>
</template>
 
<script setup lang="ts">
  import {reactive} from "vue";
 
  // 數(shù)據(jù)
  let car = reactive({name: "AuDi", price: 1000000})
  // 方法
  function changeCar(){
    Object.assign(car, {name: "YaDi", price: 1000})
  }
</script>

但是，使用ref創(chuàng)建的對象可以直接修改：

<template>
  <h1 class="home">首頁</h1>
  <p>我喜歡開{{car.name}}，價值{{car.price}}元</p>
  <button @click="changeCar">修改汽車</button>
</template>
 
<script setup lang="ts">
  import {ref} from "vue";
 
  // 數(shù)據(jù)
  let car = ref({name: "AuDi", price: 1000000})
  // 方法
  function changeCar(){
    car.value = {name: "YaDi", price: 1000}
  }
</script>

使用原則：

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

5 ref的另一個作用

ref標(biāo)簽屬性

ref標(biāo)簽加到html標(biāo)簽上，可以直接拿到DOM元素：

<template>
  <div>
    <p ref="title">hello vue3</p>
    <button @click="showTag">輸出title標(biāo)簽的組件</button>
  </div>
</template>
 
<script setup lang="ts">
  import {ref} from 'vue';
 
  // 創(chuàng)建一個title，用于存儲ref標(biāo)記的內(nèi)容
  let title = ref()
 
  function showTag(){
    console.log(title.value)
  }
</script>

當(dāng)ref標(biāo)簽加到組件上，也可以拿到組件元素，但是vue3對其進(jìn)行了保護(hù)措施：

<template>
  <Home ref="qwe"/>
  <button @click="showTag">獲取組件</button>
</template>
 
<script setup lang="ts">
  import Home from "./components/Home.vue"
  import {ref} from "vue";
 
  let qwe = ref()
 
  function showTag(){
    console.log(qwe.value)
  }
</script>

獲取的內(nèi)容里并沒有可用信息，需要Home組件暴露出信息，使用defineExpose指出可訪問的信息：

<template>
  <div>
    <p ref="title">hello vue3</p>
    <button @click="showTag">輸出title標(biāo)簽的組件</button>
  </div>
</template>
 
<script setup lang="ts">
  import {ref,defineExpose} from 'vue';
 
  // 創(chuàng)建一個title，用于存儲ref標(biāo)記的內(nèi)容
  let title = ref()
 
  function showTag(){
    console.log(title.value)
  }
  defineExpose({title})
</script>

6 toRefs與toRef

toRefs可以用來將對象類型數(shù)據(jù)解構(gòu)，解構(gòu)后的數(shù)據(jù)也是響應(yīng)式數(shù)據(jù)：

注：原對象的數(shù)據(jù)也會跟隨結(jié)構(gòu)的數(shù)據(jù)的改變而改變?。?！

<template>
  <h1 class="home">首頁</h1>
  <p>{{name}}</p>
  <p>{{price}}</p>
  <button @click="changeCarName">修改車名</button>
  <button @click="changeCarPrice">修改價格</button>
 
</template>
 
<script setup lang="ts">
  import {reactive, toRefs} from "vue";
 
  // 數(shù)據(jù)
  let car = reactive({name: "AuDi", price: 1000000})
  let {name,price} = toRefs(car)
  // 方法
  function changeCarName(){
    name.value = "YaDi"
  }
  function changeCarPrice(){
    price.value = 1000
  }
</script>

toRef的解構(gòu)方式：

  let car = reactive({name: "AuDi", price: 1000000})
  let carName = toRef(car, 'name')
  let carPrice = toRef(car, 'price')

7 小貼士：

條件渲染的兩種方式v-if和v-show的對比，兩種方式實現(xiàn)的效果相同，但是渲染原理不同：

v-if：指令用于條件性地渲染一個元素。如果條件為真，元素將會被渲染到 DOM 中；如果條件為假，元素將不會被渲染。

v-show：它與v-if不同，在渲染時不管條件為真還是為假，都會渲染。但是會根據(jù)條件真假去決定顯示還是隱藏。

v-if具有更高的切換開銷，v-show具有更高的初始渲染開銷。v-if 適用于條件不經(jīng)常改變的場景，切換條件時的開銷較大，因為需要重新渲染元素。v-show適用于條件經(jīng)常改變的場景，切換條件時的開銷較小，因為只是改變樣式屬性。

以上就是Vue3中使用ref與reactive創(chuàng)建響應(yīng)式數(shù)據(jù)的示例代碼的詳細(xì)內(nèi)容，更多關(guān)于Vue3 ref與reactive創(chuàng)建響應(yīng)式數(shù)據(jù)的資料請關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: