快捷導(dǎo)航

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

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

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

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

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

首先，我們來看看如何在組合式API中使用ref()函數(shù)創(chuàng)建一個響應(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>

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

接下來，我們來看看如何在組合式API中使用ref()函數(shù)來創(chuàng)建一個數(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>

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

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

<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)式對象

<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)式變量，并使用它來初始化一個變量，然后在模板中使用這個變量。這種用法可以讓你更加方便地使用變量，而不需要手動打上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)式變量，并使用它來初始化一個數(shù)組，然后在模板中使用v-for指令遍歷這個數(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>

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

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

您可能感興趣的文章: