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