快捷導(dǎo)航

Vue3的組合式API中使用ref()函數(shù)的例子

更新時(shí)間：2023年06月24日 10:11:34 作者：2301_77795034

你們是否聽說(shuō)過(guò)Vue3的組合式API？它可是Vue3的新玩法，把以前的Vue2組件函數(shù)轉(zhuǎn)化為了函數(shù)組件。好了，今天我要和大家分享的是如何在組合式API中使用ref()函數(shù)，感興趣的朋友跟隨小編一起看看吧

你們是否聽說(shuō)過(guò)Vue3的組合式API？它可是Vue3的新玩法，把以前的Vue2組件函數(shù)轉(zhuǎn)化為了函數(shù)組件。好了，今天我要和大家分享的是如何在組合式API中使用ref()函數(shù)。

首先，ref()函數(shù)是用來(lái)創(chuàng)建響應(yīng)式數(shù)據(jù)的，它的作用就像是你給一個(gè)變量打上了一個(gè)標(biāo)簽，這樣Vue就能知道這個(gè)變量的位置了。接下來(lái)，我們來(lái)看幾個(gè)例子吧！

首先，我們來(lái)看看如何在組合式API中使用ref()函數(shù)創(chuàng)建一個(gè)響應(yīng)式變量。代碼如下：

<template>  
  <div>  
    <p>{{ message }}</p>  
    <button @click="changeMessage">Change message</button>  
  </div>  
</template>  
<script>  
import { ref } from 'vue';  
export default {  
  setup() {  
    const message = ref('Hello, world!');  
    function changeMessage() {  
      message.value = 'Hello, Vue3!';  
    }  
    return {  
      message,  
      changeMessage,  
    };  
  },  
};  
</script>

在這個(gè)例子中，我們使用了ref()函數(shù)創(chuàng)建了一個(gè)名為message的響應(yīng)式變量，并在組件的setup函數(shù)中進(jìn)行了定義。然后，我們?cè)谀０逯惺褂脅{ message }}來(lái)顯示這個(gè)變量的值。當(dāng)點(diǎn)擊按鈕時(shí)，我們調(diào)用changeMessage函數(shù)來(lái)改變message的值。這就是ref()函數(shù)的基本用法。

接下來(lái)，我們來(lái)看看如何在組合式API中使用ref()函數(shù)來(lái)創(chuàng)建一個(gè)數(shù)組。代碼如下：

<template>  
  <div>  
    <ul>  
      <li v-for="item in items" :key="item.id">{{ item.name }}</li>  
    </ul>  
    <button @click="addItem">Add item</button>  
  </div>  
</template>  
<script>  
import { ref } from 'vue';  
export default {  
  setup() {  
    const items = ref([  
      { id: 1, name: 'Apple' },  
      { id: 2, name: 'Banana' },  
      { id: 3, name: 'Orange' },  
    ]);  
    function addItem() {  
      items.value.push({ id: items.value.length + 1, name: 'Vue3' });  
    }  
    return {  
      items,  
      addItem,  
    };  
  },  
};  
</script>

在這個(gè)例子中，我們使用了ref()函數(shù)創(chuàng)建了一個(gè)名為items的響應(yīng)式數(shù)組，并在組件的setup函數(shù)中進(jìn)行了定義。然后，我們?cè)谀０逯惺褂胿-for指令來(lái)遍歷這個(gè)數(shù)組，并顯示每個(gè)元素的名稱。當(dāng)點(diǎn)擊按鈕時(shí)，我們調(diào)用addItem函數(shù)來(lái)向數(shù)組中添加一個(gè)新的元素。這就是在組合式API中使用ref()函數(shù)來(lái)創(chuàng)建數(shù)組的方法。

最后，我們來(lái)看看如何在組合式API中使用ref()函數(shù)來(lái)創(chuàng)建一個(gè)對(duì)象。代碼如下：

<template>  
  <div>  
    <p>{{ person.name }}</p>  
    <p>{{ person.age }}</p>  
    <button @click="changePerson">Change person</button>  
  </div>  
</template>  
<script>  
import { ref } from 'vue';  
export default {  
  setup() {  
    const person = ref({ name: 'Vue2', age: 2 });  
    function changePerson() {  
      person.value.age = 3;  
      person.value.name = 'Vue3';  
    }  
    return {  
      person,  
      changePerson,  
    };  
  },  
};  
</script>

除了上面那些，還有一些其他的用法，比如：

在setup函數(shù)中使用ref函數(shù)創(chuàng)建響應(yīng)式對(duì)象

<template>  
  <div>  
    <p>{{ person.name }}</p>  
    <p>{{ person.age }}</p>  
    <button @click="changePerson">Change person</button>  
  </div>  
</template>  
<script>  
import { ref } from 'vue';  
export default {  
  setup() {  
    const person = ref({ name: 'Vue2', age: 2 });  
    function changePerson() {  
      person.value.age = 3;  
      person.value.name = 'Vue3';  
    }  
    return {  
      person,  
      changePerson,  
    };  
  },  
};  
</script>

在組件的setup函數(shù)中，使用ref函數(shù)創(chuàng)建響應(yīng)式變量，并使用它來(lái)初始化一個(gè)變量，然后在模板中使用這個(gè)變量。這種用法可以讓你更加方便地使用變量，而不需要手動(dòng)打上ref標(biāo)簽。

<template>  
  <div>  
    <p>{{ message }}</p>  
    <button @click="changeMessage">Change message</button>  
  </div>  
</template>  
<script>  
import { ref } from 'vue';  
export default {  
  setup() {  
    const message = ref('Hello, world!');  
    function changeMessage() {  
      message.value = 'Hello, Vue3!';  
    }  
    return {  
      message,  
      changeMessage,  
    };  
  },  
};  
</script>

在組件的setup函數(shù)中，使用ref函數(shù)創(chuàng)建響應(yīng)式變量，并使用它來(lái)初始化一個(gè)數(shù)組，然后在模板中使用v-for指令遍歷這個(gè)數(shù)組。這種用法可以讓你的代碼更加簡(jiǎn)潔明了。

<template>  
  <div>  
    <ul>  
      <li v-for="item in items" :key="item.id">{{ item.name }}</li>  
    </ul>  
    <button @click="addItem">Add item</button>  
  </div>  
</template>

在Vue3的組合式API中，使用ref()函數(shù)創(chuàng)建響應(yīng)式變量、數(shù)組、對(duì)象等，可以在組件的setup函數(shù)中完成，然后返回給模板使用。使用ref()函數(shù)可以讓變量、數(shù)組、對(duì)象等在組件中更加方便地使用，同時(shí)也能保證它們是響應(yīng)式的。

到此這篇關(guān)于Vue3的組合式API中如何使用ref()函數(shù)的文章就介紹到這了,更多相關(guān)Vue3組合式API使用ref()函數(shù)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: