摘要:因為覺得這個是在項目中最常用的功能,提取出來方便復用的才是組件然而我才發現這個想法是有問題的。聯動思考悟緣起于最近的一個表單開發,頁面上有個是聯動菜單的選項。兩個組件放在不同的板塊內,相互獨立,方便管理和維護。
今天在家躺了一天,直到晚上才考慮清楚,當人沒有明確目標的時候,太容易被環境影響了。目標需要切合實際,至于和實際之間的距離,取決于當前認知的正確和全面。既有認知(誤)
一般說到組件,我首先想到的是彈窗,其他就大腦空白了。
因為覺得這個是在項目中最常用的功能,提取出來方便復用的才是組件~
然而我才發現這個想法是有問題的。
我發覺可能從意識上把Vue的組件和UI庫的組件(彈窗之類的)混淆了。。。
緣起于最近的一個表單開發,頁面上有2個是聯動菜單的選項。
首先想到的是,這個樣式和選擇地址的那個聯動菜單,完全一樣哈~
(廢話,同一個項目 當然要保持ui風格的相同啊!)
不過差別在于 我這個是 一個1級 一個2級, 地址那個是4級的.
然后我就想著把那個地址的組件引進來用,發現這是個寫死4級的
這個時候我只想到2種辦法
1,分別改寫成1級選項和2級選項的2個組件(好像比較low)
2,引用4級聯動組件,改寫成可選1級選項或2級選項(有點麻煩,到時候還要測地址沒被我改壞)
3,重寫一個可以通用無限聯動菜單(方便可選級的)
最后選了3,自己重新搞了個。
至于為什么沒有整合2,主要考慮到這兩個組件所處的業務頁面不同邏輯也有些差異:
1獲取列表的邏輯可能不同,是一次性獲取4級還是每次只獲取1級或2級,
這個不確定的話,做成通用組件就都要處理了(強行抽取公用部分好麻煩啊)
2我這個是直接彈選項的,地址那個是跳新頁面再點擊彈選項的
我這個可以父子組件傳遞數據,地址那個用了vuex(非父子,跳頁了)
總之就是實現成本和維護成本高,復用價值沒那么高。。。(從利用率出發)
相當于2個頁面都各自有一個樣式相同邏輯不同的組件。
這完全是2個組件~
復制其通用樣式部分,在各自內部實現其業務邏輯。
兩個組件放在不同的板塊內,相互獨立,方便管理和維護。
這個時候 再結合vue組件化的圖來看 會清楚
對于組件化開發
分治(自有業務邏輯)比復用(相同邏輯) 更為重要!
復雜的業務邏輯配合vuex更方便實現組件化~
所以我理解組件化的組件是應該泛指是 高內聚低耦合(某phper講給我的專業名詞,不知道放這用對不對哈)的~
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/107160.html
先對項目進行一下簡單的介紹 vue開發微信商城項目總結之一–項目介紹 項目開發初期,由于項目比較著急上線,前端的框架在選型上比較倉促,只是因為vue學習成本較低,就選了它,沒有什么別的原因, 之前看過angular2一段時間,又趁著周末看了兩天vue,就倉促開發,所以埋下了很多坑,項目(項目目前沒有對游客開放,是2B2C的模式)上線后,回頭填坑,發現了很多問題,因為之前一直是基于Jquery模式的...
摘要:關于生命周期的思考關于組件生命周期,官方圖示在開發過程中遇到關于生命周期的問題,整理分享下跳轉同名路徑的問題問題來自跳轉同名路徑的問題在社區交流中對于新手經常遇到這個問題。如何強制更新組件的生命周期解決辦法是數據更新的時候。 關于Vue生命周期的思考 關于Vue組件生命周期,官方圖示: showImg(http://vuejs.org.cn/images/lifecycle.png);...
摘要:仿滴滴出行項目最近,各大社區出現很多小伙伴的項目,趁著這股熱潮我也用擼了一個滴滴出行的項目。可是,后來在手機上發現,輸入的時候居然調不出軟鍵盤,寫項目的時候沒考慮到設備問題,簡直是大大的失誤。也就是說可以在組件內部進行請求,不需要提交。 Vue2.0 仿滴滴出行項目 最近,各大社區出現很多小伙伴的vue項目,趁著這股熱潮我也用vue擼了一個滴滴出行的項目。 效果預覽 showImg(h...
摘要:靜態組件開發因為被編程思想這篇文章毒害太深,所以筆者開發組件也習慣從基礎到高級逐步迭代。靜態組件要實現的目的很簡單,就是把圖表,渲染到頁面上。實現動態刷新下一步我想大家都知道了,就是定時從后臺拉取數據,然后更新父組件的就好。 從幾年前流行的jQuery插件,到現在React和Vue的組件,在業務需求的開發中抽象通用出通用的模塊,一直都是一個對個人技術提高非常有幫助的事情。本文從一個真實...
閱讀 2197·2021-11-25 09:43
閱讀 1165·2021-11-23 09:51
閱讀 3499·2021-11-23 09:51
閱讀 3628·2021-11-22 09:34
閱讀 1543·2021-10-09 09:43
閱讀 2119·2019-08-30 15:53
閱讀 3161·2019-08-30 14:07
閱讀 568·2019-08-28 18:14