vue3 Composition API使用示例教程
Vue3新增了Composition API。我們只需將實(shí)現(xiàn)某一功能的相關(guān)代碼全部放進(jìn)一個函數(shù)中,然后return需要對外暴露的對象。不同功能的代碼都是一個個函數(shù),最終在setup()函數(shù)中導(dǎo)入這些函數(shù)API,來使用這些功能。
在Vue3中,我們在小型組件仍可以繼續(xù)沿用Options API,而對于大型組件則推薦使用Composition API。
Composition API沒有this,如果要獲取實(shí)例可以通過gitCurrentInstance這個函數(shù),要使用它,需要手動引入,Composition API的生命周期,ref,toRef等要使用的話也是需要手動引入的。
<script> import { useStore } from "vuex"; import { getCurrentInstance } from 'vue' export default { name: "ChildA", setup() { const instance = getCurrentInstance(); console.log('instance--',instance); return {}; }, }; </script>
用reactive定義響應(yīng)數(shù)據(jù),reactive作用將一個普通對象轉(zhuǎn)換成響應(yīng)式對象,和vue2里面的Options里面的data一樣里面的數(shù)據(jù)都是響應(yīng)式的。
生命周期也發(fā)生了一些變化,setup是beforeCreate和created的組合,vue3中的生命周期除了卸載階段名稱變了,變成onbeforeUnmount和onUnmounted,其它的只是在前面添加了一個on。
vuex在Composition中使用,手動移入vuex,用reactive定義響應(yīng)式數(shù)據(jù),該數(shù)據(jù)有屬性goods,函數(shù)在onMounted生命周期中調(diào)用,生命周期中傳入的是一個函數(shù)。調(diào)用vuex的方法,執(zhí)行后直接給響應(yīng)式數(shù)據(jù)屬性賦值就行了。
最后在調(diào)用toRef或者toRefs對響應(yīng)式數(shù)據(jù)屬性做個處理,做個處理就可以直接使用這個屬性(直接goods),不需要再去用“state.goods"的方式使用了。toRef或toRefs變量命名建議用xxx.Ref和xxx.Refs。
ref生成一個響應(yīng)式數(shù)據(jù),可用于模板和reactive(用于模板和reactive不需要通過.value),通過.value修改值。
toRef針對響應(yīng)式對象的一個屬性生成一個ref,ref具有響應(yīng)式,二者保持引用關(guān)系。
toRefs將響應(yīng)式對象轉(zhuǎn)換成普通對象,對象的每個屬性都是一個ref,二者保持引用關(guān)系。
要使用Composition中的方法也需要通過renturn導(dǎo)出。
<script> import { useStore } from "vuex"; import { reactive, onMounted, toRef, toRefs } from 'vue' export default { name: "ChildA", setup() { const store = useStore(); const state = reactive({ goods:[] }); const getData = () => { store.dispatch("products/getProducts").then((res) => { state.goods = res }); }; const addData = () => { store.dispatch("products/setProducts"); getData(); }; onMounted(() => { getData(); }); //以toRef形式返回 const goodsRef = toRef(state,'goods'); return { goodsRef, addData }; //以toRefs形式返回 /* const goodsRefs = toRefs(state); return goodsRefs */ }, }; </script>
模板中使用
<template> <div class="child-a"> ChildA: <ul> <!-- 以toRefs形式返回直接取響應(yīng)式對象屬性 --> <!-- <li v-for="item in goods" :key="item.id">{{ item.name }}</li> --> <!-- 以toRef形式返回 --> <li v-for="item in goodsRef" :key="item.id">{{ item.name }}</li> </ul> <button @click="addData">ChildA-Add</button> </div> </template>
到此這篇關(guān)于vue3 Composition API使用的文章就介紹到這了,更多相關(guān)vue3 Composition API使用內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
Vue實(shí)現(xiàn)驗(yàn)證碼登錄的方法實(shí)例
最近在自己寫頁面,然后寫登錄注冊UI的時候需要一個驗(yàn)證碼組件,去搜一下沒找到什么合適的,于是自己寫一個,這篇文章主要給大家介紹了關(guān)于Vue實(shí)現(xiàn)驗(yàn)證碼登錄的相關(guān)資料,需要的朋友可以參考下2022-03-03element?plus如何為表格某列數(shù)據(jù)文字設(shè)置顏色樣式
實(shí)習(xí)工作需要根據(jù)表格的狀態(tài)字段來設(shè)置列的樣式,所以這篇文章主要給大家介紹了關(guān)于element?plus如何為表格某列數(shù)據(jù)文字設(shè)置顏色樣式的相關(guān)資料,需要的朋友可以參考下2023-10-10vue中實(shí)現(xiàn)圖片壓縮 file文件的方法
這篇文章主要介紹了vue中實(shí)現(xiàn)圖片壓縮 file文件的方法,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-05-05vue項(xiàng)目嵌套iframe實(shí)現(xiàn)發(fā)送、接收數(shù)據(jù)
這篇文章主要介紹了vue項(xiàng)目嵌套iframe實(shí)現(xiàn)發(fā)送、接收數(shù)據(jù),具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-05-05