|
加入我們一起學(xué)習(xí)，天天進(jìn)步一個(gè)webpack的api,通過(guò)執(zhí)行require.context函數(shù)獲取一個(gè)特定的上下文,主要用來(lái)實(shí)現(xiàn)自動(dòng)化導(dǎo)入模塊,在前端工程中,如果遇到從一個(gè)文件夾引入很多模塊的情況,可以使用這個(gè)api,它會(huì)遍歷文件夾中的指定文件,然后自動(dòng)導(dǎo)入,使得不需要每次顯式的調(diào)用import導(dǎo)入模塊 /** * directory {String} -說(shuō)明需要檢索的目錄 * useSubdirectories {Boolean} -是否遍歷文件的子目錄 * regExp {RegExp} - 匹配文件的正則 **/require.context(directory, useSubdirectories = false, regExp = /^.//);
1，開(kāi)發(fā)vue項(xiàng)目的時(shí)候一般都會(huì)開(kāi)發(fā)很多自定義的全局組件，一般寫法是：這樣的話如果我們封裝了50個(gè)組件，那么就意味我們要寫50個(gè)相同的組件引入語(yǔ)句，50個(gè)注冊(cè)語(yǔ)句，大量的重復(fù)代碼：如果使用require.context那么就可以是下面這個(gè)樣子，這樣我們可以無(wú)限的在components文件下添加組件，自動(dòng)注冊(cè)成全局的const files = require.context('@/components', true, /^\.\/(\w*\/)+index\.(vue|js)$/)
export default { install (Vue) { files.keys().forEach((path) => { const type = this.typeof(path, files(path)) // 針對(duì)3中不同的組件設(shè)計(jì)模式提供不同的組件注冊(cè)策略 switch (type) { case 'component': this.installComonent(Vue, files(path)); break; case 'componentGroup': this.instalGroupComponent(Vue, files(path)); break; case 'serveApi': this.installServeApi(Vue, files(path)); break; } }) }, typeof (path, file) { if (path.lastIndexOf('.js') === -1) { return 'component' } else { if (file.default.install) { return 'serveApi' } else { return 'componentGroup' } } }, instalGroupComponent (Vue, file) { const components = file.default Object.keys(components).forEach((name) => { Vue.component('Nb'+name, components[name]) }) }, installComonent (Vue, file) { const options = file.default const name = options.name Vue.component('Nb'+name, options) }, installServeApi (Vue, file) { Vue.use(file.default) }}
2，開(kāi)發(fā)一個(gè)svg圖標(biāo)組件，可能需要很多svg文件，需要通過(guò)webpack打包，如果全部一個(gè)一個(gè)引入的話，會(huì)比較麻煩，如果使用context api的話可以直接讀取文件夾下的所有svg圖標(biāo)
表格初始進(jìn)來(lái)需要調(diào)查詢接口 fetchList(),然后篩選條件的值發(fā)生改變會(huì)重新查詢created(){ this.fetchList()},watch: { 'filters.type' () { this.fetchList() }}
可以直接利用 watch 的immediate和handler屬性簡(jiǎn)寫watch: { 'filters.type': { handler: 'getList', immediate: true }}
有時(shí)候我們可能需要監(jiān)聽(tīng)整個(gè)對(duì)象，還是上面那個(gè)例子，上面我們針對(duì)一個(gè)對(duì)象中的某個(gè)屬性進(jìn)行監(jiān)聽(tīng)，但是這個(gè)對(duì)象中有很多屬性，任何一個(gè)屬性的改變我們都需要重新發(fā)起請(qǐng)求，那么我們可以利用watch的deep屬性進(jìn)行深度監(jiān)聽(tīng)，也就是監(jiān)聽(tīng)復(fù)雜的數(shù)據(jù)類型watch:{ filters: { handler(newVal,oldVal){ this.getList() }, deep:true, immediate: true }}
有些組件有些重復(fù)的 js 邏輯，比如我們常用的上啦加載更多，而上啦觸底事件就是我們每個(gè)需要上啦加載功能頁(yè)面都需要重復(fù)去寫的邏輯，這部分東西我們都可以使用mixins來(lái)實(shí)現(xiàn)2.1.0 新增 在下次 DOM 更新循環(huán)結(jié)束之后執(zhí)行延遲回調(diào)。在修改數(shù)據(jù)之后立即使用這個(gè)方法，獲取更新后的 DOM這個(gè)api的使用場(chǎng)景主要是為替代updated生命周期，有時(shí)候我們可能需要在數(shù)據(jù)更新后操作新的dom，但是updated生命周期是更新后執(zhí)行，但是無(wú)法確定是那個(gè)屬性的改變觸發(fā)的更新，而nextTick是可以寫在某個(gè)屬性改變的后面，這么我們就可以知道是那個(gè)屬性的改變了，功能其實(shí)和react，setState函數(shù)的第二個(gè)參數(shù)過(guò)濾器的目的主要為了對(duì)數(shù)據(jù)格式進(jìn)行轉(zhuǎn)換（銀行卡號(hào)格式化，貨幣格式化，日期格式化，...）那么我用computed計(jì)算屬性也可以呀，為什么要用filter，答案就是computed不能接受參數(shù)只能針對(duì)某一個(gè)vue內(nèi)部屬性進(jìn)行轉(zhuǎn)換，而filter可以接受參數(shù)
場(chǎng)景:時(shí)間戳轉(zhuǎn)化成年月日這是一個(gè)公共方法,所以可以抽離成過(guò)濾器使用// 使用
// 在雙花括號(hào)中{{ message | capitalize }}
// 在 `v-bind` 中<div v-bind:id='rawId | formatId'></div>// 全局注冊(cè)Vue.filter('stampToYYMMDD', (value) =>{ // 處理邏輯})
// 局部注冊(cè)filters: { stampToYYMMDD: (value)=> { // 處理邏輯 }}
// 多個(gè)過(guò)濾器全局注冊(cè)// /src/common/filters.jslet dateServer = value => value.replace(/(\d{4})(\d{2})(\d{2})/g, '$1-$2-$3') export { dateServer }
// /src/main.jsimport * as custom from './common/filters/custom'Object.keys(custom).forEach(key => Vue.filter(key, custom[key]))
Vue中style標(biāo)簽的scoped屬性表示它的樣式只作用于當(dāng)前模塊，是樣式私有化.給HTML的DOM節(jié)點(diǎn)添加一個(gè) 不重復(fù)的data屬性 來(lái)表示 唯一性在對(duì)應(yīng)的 CSS選擇器 末尾添加一個(gè)當(dāng)前組件的 data屬性選擇器來(lái)私有化樣式使用了scoped屬性后，我們組件內(nèi)部的樣式無(wú)法在外部被控制，（怎么就是改不了樣式，... 我要瘋了咋沒(méi)反應(yīng) ）.result-tab /deep/ { .nav-bar { a { flex: initial; height: 50px; font-size: 36px; margin-left: 40px; line-height: 100px; height: auto; } } .result-content { padding: 0 40px; }}
|
