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

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

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

1 ref創(chuàng)建：基本類型的響應(yīng)式數(shù)據(jù)
2 ref創(chuàng)建：對(duì)象類型的響應(yīng)式數(shù)據(jù)
3 reactive創(chuàng)建：對(duì)象類型的響應(yīng)式數(shù)據(jù)
4 ref與reactive
5 ref的另一個(gè)作用
6 toRefs與toRef
7 小貼士：

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

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

<template>
  <h1 class="home">首頁(yè)</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)建：對(duì)象類型的響應(yīng)式數(shù)據(jù)

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

<template>
  <h1 class="home">首頁(yè)</h1>
  <p>我喜歡開(kāi){{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)建：對(duì)象類型的響應(yīng)式數(shù)據(jù)

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

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

<template>
  <h1 class="home">首頁(yè)</h1>
  // 對(duì)象數(shù)據(jù)類型
  <p>我喜歡開(kāi){{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">改變第一個(gè)游戲</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: "洛克王國(guó)"}
  ])
  // 方法
  function changeCar(){
    car.name = car.name === "AuDi" ? "YaDi" : "AuDi"
  }
  function changeFirstGame(){
    games[0].name = "LOL"
  }
</script>

4 ref與reactive

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

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

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

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

<template>
  <h1 class="home">首頁(yè)</h1>
  <p>我喜歡開(kāi){{car.name}}，價(jià)值{{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)建的對(duì)象可以直接修改：

<template>
  <h1 class="home">首頁(yè)</h1>
  <p>我喜歡開(kāi){{car.name}}，價(jià)值{{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>

使用原則：

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

5 ref的另一個(gè)作用

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)建一個(gè)title，用于存儲(chǔ)ref標(biāo)記的內(nèi)容
  let title = ref()
 
  function showTag(){
    console.log(title.value)
  }
</script>

當(dāng)ref標(biāo)簽加到組件上，也可以拿到組件元素，但是vue3對(duì)其進(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)容里并沒(méi)有可用信息，需要Home組件暴露出信息，使用defineExpose指出可訪問(wèn)的信息：

<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)建一個(gè)title，用于存儲(chǔ)ref標(biāo)記的內(nèi)容
  let title = ref()
 
  function showTag(){
    console.log(title.value)
  }
  defineExpose({title})
</script>

6 toRefs與toRef

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

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

<template>
  <h1 class="home">首頁(yè)</h1>
  <p>{{name}}</p>
  <p>{{price}}</p>
  <button @click="changeCarName">修改車名</button>
  <button @click="changeCarPrice">修改價(jià)格</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的對(duì)比，兩種方式實(shí)現(xiàn)的效果相同，但是渲染原理不同：

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

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

v-if具有更高的切換開(kāi)銷，v-show具有更高的初始渲染開(kāi)銷。v-if 適用于條件不經(jīng)常改變的場(chǎng)景，切換條件時(shí)的開(kāi)銷較大，因?yàn)樾枰匦落秩驹?。v-show適用于條件經(jīng)常改變的場(chǎng)景，切換條件時(shí)的開(kāi)銷較小，因?yàn)橹皇歉淖儤邮綄傩浴?/p>

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

您可能感興趣的文章: