元件優化的兩三事(一) 動態註冊元件

2021-09-24 13:20:50 字數 1101 閱讀 9125

最近在研究元件,現研究心得是元件最基本的優化是使它可以做到可延展性。

關於可延展性,我認為就是當乙個元件已經做好,後期可以可以不斷加功能,加功能的前提使不會影響前期功能,並且希望加功能所涉及的到問檔案盡可能的少,最好做到我們只需要加上乙個新的檔案用來實現新功能,其他不做改動。

所以說,若要做到上述的要求,首先乙個問題就是元件的註冊。

新功能的元件若想加到已有元件中,必須要在已有元件中組冊該新元件,但每次增加乙個新功能元件就要註冊乙個的話,需要修改的檔案數目就會增多,所以動態註冊,是乙個極好的辦法。

動態註冊

關於動態註冊元件,其實在vue教程文件中已明細講述:基礎元件的自動化全域性註冊

下面是我的個人理解與使用:

優點:1、自動註冊元件,不需要一一新增

2、可規定元件的命名格式

3、全域性動態註冊可使所有元件可以使用

缺點:1、只可用於全域性註冊

2、非元件範圍內**,每次專案引用需全域性配置

使用:

需動態註冊的元件目錄:

配置的全域性註冊**(配置在應用入口檔案,如 main.js 中):

// 獲取目錄下的所有檔案,通過正則進行篩選

const requirecomponent = require.context(

// 其元件目錄的相對路徑

'./page/selftest/autoform/formitem',

// 是否查詢其子目錄

false,

// 匹配基礎元件檔名的正規表示式

/\w+\.(vue|js)$/

)// 遍歷所有符合要求的檔案(拿到的是元件的相關路徑)

requirecomponent.keys().foreach(filename => )

大概就是上述這樣了,使用的前提,我想應該把你的元件設計好,後續才可以更好的優化和擴充套件

我最希望的是可以把自動註冊的**放在租價內部,有方法的朋友,請多多指教

若上述理解或**有問題,也請多多指教

元件優化的兩三事(二) input塊元件優化

元件優化的兩三事 二 input塊元件優化 最近在寫乙個動態表單的元件,可見文章vue 動態表單實現 單問題線 在寫該元件時,我在開始所想實現的的是每個元件達到最小塊,再將塊組合到表單中。但在實現時,若我把input封裝成乙個元件,頁面實現是沒有問題的,但在該元件的答案獲取確實乙個極大的問題。關於子...

文案學習兩三事

一 追熱點的三個原則 三觀正 不能盲目追逐熱點話題 速度快 6小時內 關聯度強 話題和產品 表述簡單 利於記憶 二 追熱點步驟 每天檢視搜搜熱點和微博大號,找關聯,做創意 三 互動的套路 先問兩 三個具體問題,找到對方的興趣點 出題和遊戲,icebreaker games 破冰遊戲 拉近陌生人之間的...

關於讀書兩三事

今天說說怎麼閱讀吧,對於讀書這件事情,大家都是贊同的,當你是小孩子的時候後,只要你看書,父母就很高興,不會打攪你,當你在學校時,也是一樣,只要你在讀書,老師就會誇你,但是當你長大後,畢業了,工作了,你卻還是和小時候一樣的思維,認為只要拿起一本書,就認為自己在努力,自己感動自己,就不會再焦慮了,有時候...