前言

在前端開(kāi)發(fā)中，關(guān)于Vue的使用相比大家并不陌生，而且Vue框架的優(yōu)勢(shì)也是其他框架所不能比的，尤其是Vue的封裝思想更是堪稱一絕，還有就是組件化的運(yùn)用實(shí)踐過(guò)程也是亮點(diǎn)。所以關(guān)于Vue框架的使用想必看官都不陌生，而且常用的核心技術(shù)點(diǎn)就那么點(diǎn)，本文就來(lái)分享一下關(guān)于通過(guò)Vue封裝API調(diào)用組件的使用，記錄一下，方便后期查閱使用。

網(wǎng)站的建設(shè)創(chuàng)新互聯(lián)專注網(wǎng)站定制,經(jīng)驗(yàn)豐富,不做模板,主營(yíng)網(wǎng)站定制開(kāi)發(fā).小程序定制開(kāi)發(fā),H5頁(yè)面制作!給你煥然一新的設(shè)計(jì)體驗(yàn)!已為成都服務(wù)器租用等企業(yè)提供專業(yè)服務(wù)。

封裝通過(guò)API調(diào)用的組件的設(shè)計(jì)思路

其實(shí)通過(guò)封裝成API調(diào)用的組件設(shè)計(jì)思路就是單例模式的思路，通過(guò)單例思維可以讓整個(gè)項(xiàng)目通用封裝的唯一組件，可以達(dá)到拿來(lái)即用的效果，具體還是得根據(jù)實(shí)際的業(yè)務(wù)需求來(lái)確定，比如需要被公用且多個(gè)模塊共同使用同一個(gè)數(shù)據(jù)源的情況；再比如實(shí)際業(yè)務(wù)場(chǎng)景中的一個(gè)自定義圖標(biāo)的彈窗組件，由于在多個(gè)地方都會(huì)使用到這個(gè)彈框組件，這就需要搞成公共組件來(lái)使用。

封裝組件的方式

在實(shí)際Vue開(kāi)發(fā)過(guò)程中，一般有兩種封裝Vue組件的方法：第一種就是常用的通過(guò)父組件props傳值給子組件、子組件$emit回傳值給父組件的方法；第二種就是通過(guò)調(diào)用API調(diào)用的組件的形式來(lái)使用。

單例模式定義

單例模式(Singleton)，也叫單子模式，在軟件開(kāi)發(fā)中是一種常用的軟件設(shè)計(jì)模式。在實(shí)際應(yīng)用該模式的時(shí)候，單例對(duì)象的類必須保證只有一個(gè)實(shí)例存在，因?yàn)樵诤芏鄷r(shí)候整個(gè)項(xiàng)目中只需要擁有一個(gè)全局對(duì)象，這樣有利于協(xié)調(diào)項(xiàng)目整體的行為，這種方式簡(jiǎn)化了在復(fù)雜環(huán)境下的配置管理。

單例模式的優(yōu)缺點(diǎn) 1、優(yōu)點(diǎn)

• 在單例模式中，單例只有一個(gè)實(shí)例，對(duì)單例類的所有實(shí)例化得到的都是同一個(gè)實(shí)例。這樣防止其它對(duì)象對(duì)自己的實(shí)例化，確保所有的對(duì)象都訪問(wèn)同一個(gè)實(shí)例；
• 單例模式具有一定的伸縮性；
• 由于在程序內(nèi)存中只存在一個(gè)實(shí)例對(duì)象，因此可以節(jié)約系統(tǒng)資源，如果需要頻繁創(chuàng)建和銷毀的對(duì)象的時(shí)候，單例模式無(wú)疑可以提高系統(tǒng)的性能；
• 可以避免對(duì)共享資源的多重占用。

2、缺點(diǎn)

• 不適用于變化的對(duì)象，若同一類型的對(duì)象總是要在不同的用例場(chǎng)景發(fā)生變化，使用單例就會(huì)引起數(shù)據(jù)錯(cuò)亂，不能保存各自的正確的狀態(tài)；
• 單利模式中沒(méi)有抽象層，所以單例類的擴(kuò)展會(huì)很難；
• 由于單例類的職責(zé)過(guò)重，在一定程度上違背了“單一職責(zé)原則”；
• 濫用單例會(huì)帶來(lái)一些負(fù)面的問(wèn)題，如實(shí)例化的對(duì)象長(zhǎng)時(shí)間不被利用，系統(tǒng)會(huì)認(rèn)為是垃圾而被回收，這會(huì)導(dǎo)致對(duì)象狀態(tài)的丟失。

單例模式適用場(chǎng)景

單例模式只允許創(chuàng)建一個(gè)實(shí)例對(duì)象，因此節(jié)省內(nèi)存，提高對(duì)象的訪問(wèn)速度，所以對(duì)象需要被公用的場(chǎng)合使用，如多個(gè)模塊使用同一個(gè)數(shù)據(jù)源連接對(duì)象。

1. 可用于需要頻繁實(shí)例化然后銷毀的對(duì)象；
2. 可用于創(chuàng)建對(duì)象時(shí)耗時(shí)過(guò)多或者耗資源過(guò)多，但又經(jīng)常用到的對(duì)象；
3. 可用于有狀態(tài)的工具類對(duì)象；
4. 可用于頻繁訪問(wèn)數(shù)據(jù)庫(kù)或文件的對(duì)象。

使用API調(diào)用組件的示例

在實(shí)際開(kāi)發(fā)中，關(guān)于使用API調(diào)用的組件的使用場(chǎng)景很多，這里只介紹幾個(gè)常用的示例，方便參考使用。

示例一：封裝一個(gè)自定義圖標(biāo)的彈框組件，然后通過(guò)使用API調(diào)用該組件

//1、封裝自定義圖標(biāo)的彈框組件
//2、封裝API文件,在Vue文件的同一目錄下新創(chuàng)建test.js文件

import vue from 'vue';

import tipPopup from './test.vue‘



const temp = Vue.extend(test)



const Message = function (option) {

const msg = new temp({

? ? data: option

? })

? let vm = msg.$mount();

? let el = vm.$el;

? document.body.appendChild(el)

? setTimeout(() =>{

? ? document.body.removeChild(el)

? ? msg.$destroy()

? ? vm = null

? },vm.duration)

}

export default Message



//3、使用，在具體需要使用的文件調(diào)用，import引入test.js文件，就通過(guò)方法調(diào)用組件

import test from './test.js';



test({

? text: ‘111’

});

拓展：父子組件通信

父組件通過(guò)props給子組件傳值的（組件中的數(shù)據(jù)有三種：data、props、computed）。

最后

通過(guò)本文關(guān)于Vue封裝通過(guò)API調(diào)用的組件的方法的介紹，如果認(rèn)真閱讀并且實(shí)踐示例，應(yīng)該會(huì)很好的掌握這些知識(shí)點(diǎn)，尤其是以后再遇到封裝組件的時(shí)候可以往這個(gè)方式上面來(lái)使用，因?yàn)橥ㄟ^(guò)調(diào)用API形式的組件是比較方便且專業(yè)的方式，這是一篇值得閱讀的文章，尤其是對(duì)于封裝使用還不是太熟練的開(kāi)發(fā)者來(lái)說(shuō)甚為重要，重要性就不在贅述。歡迎關(guān)注，一起交流，共同進(jìn)步。

你是否還在尋找穩(wěn)定的海外服務(wù)器提供商？創(chuàng)新互聯(lián)www.cdcxhl.cn海外機(jī)房具備T級(jí)流量清洗系統(tǒng)配攻擊溯源，準(zhǔn)確流量調(diào)度確保服務(wù)器高可用性，企業(yè)級(jí)服務(wù)器適合批量采購(gòu)，新人活動(dòng)首月15元起，快前往官網(wǎng)查看詳情吧

分享名稱：前端開(kāi)發(fā)：Vue封裝通過(guò)API調(diào)用的組件的方法-創(chuàng)新互聯(lián)
網(wǎng)站URL：http://weahome.cn/article/eiehd.html