前言
最近這段時間里不停的做著Vue的技術(shù)分享，雖然不是什么深層次的代碼底能架構(gòu)，如果底層架構(gòu)真說出來，我就不會做Vue.js 2.0從基礎(chǔ)到組件了，就會分享Vue從底層到還是到底層。我相信能來看我這次分享的朋友都是在工作開發(fā)層面上面臨著一些問題。此次分享我們先拋開Vue - router和Vuex,很多朋友都覺得Vuex和router比較難，大錯特錯！
對Vue 2.0的介紹
我對Vue 2.0認(rèn)知，能it前端框架的認(rèn)知，在我們不算底層原理的情況下，什么才是精髓，那就是基礎(chǔ)的方法和一些api介紹，隨著現(xiàn)代數(shù)據(jù)量龐大，業(yè)務(wù)邏輯也變得更加復(fù)雜，隨著數(shù)據(jù)情景的不同展示，jquery，angular1.0等一系列框架，已經(jīng)滿足不了開發(fā)的需求了，如何用數(shù)據(jù)驅(qū)動去管理數(shù)據(jù)，在我認(rèn)知里，前后端聯(lián)調(diào)，對接口，通過什么？那過json數(shù)據(jù)來傳遞著一切的信息。
我們操作dom來分析數(shù)據(jù)，那就是用屠龍刀去切菜，用數(shù)據(jù)驅(qū)動去改變數(shù)據(jù)，那才叫細功出好活。還有我們?nèi)绾胃玫耐ㄟ^組件來讓一個復(fù)雜的頁面劃分為代碼精簡，易維護，可復(fù)用，闊展性強的組件集合！
如果是你如何去劃分這個頁面
prop：{[img]} 來進行頭圖的劃分。）這樣一算你們會發(fā)現(xiàn)一個小小的登陸就劃分出6個組件，可能給你的感覺分的太細，那我也感覺分的太細，那我為什么要分的那么細呢，那就是增強可復(fù)用性，可闊展性。
那我何去解這個組件太過于細分的問題，我們可以合并那些東西，以我一眼看過去，唯一能合并的就是中間一套注冊體系，我們把2,3,4,5,7,這幾個細組件合并到login.Vue組件里，在這個層面上，我們只要暴露出四個輸入框內(nèi)容向外傳遞的數(shù)據(jù)，這樣一個頁面整體就我們拆開來了，對于每個頁面的代碼量就減少了，對于維護，改bug是一個很大的幫助。
組件從基礎(chǔ)開始
Vue的在項目中如何去做好一個體系問題，最主要的就是template里整體的組織，如何用好的組織體系方便的展現(xiàn)復(fù)雜的邏輯操作，我個人認(rèn)為而不是通過new Vue去操控整體，反正new Vue里的一切選項是著template這個組織體系走的，如果是一個房子，template就是地基，new Vue里的選項就是水泥石頭。
1、模板語法
能用javascript表達式則用表達式，我覺得表達式是給人感覺最清楚 的，能結(jié)合模板去正確使用表達式來解析那是最明了的。
<p @click='show = false'></p>
上面一眼就能讓人明白，不用往下看就明白我所要改變數(shù)據(jù)是為了什么，就這一行模板語法用javascript表達式寫讓你能明白一切。
2、修飾賦
修飾符（Modifiers）是以半角句號 . 指明的特殊后綴，用于指出一個指令應(yīng)該以特殊方式綁定。
在修飾賦當(dāng)中，我們?nèi)绾戊`活運用修飾符去減速少代碼量，不要忘記對于組件事件要加.native。比如對組織事件冒泡和阻止默認(rèn)事件都是很方便書寫，直在template中書，例如@touchmove.prevent.stop。
雖然計算屬性在大多數(shù)情況下更合適，但有時也需要一個自定義的 watcher 。這是為什么 Vue 提供一個更通用的方法通過 watch 選項，來響應(yīng)數(shù)據(jù)的變化。當(dāng)你想要在數(shù)據(jù)變化響應(yīng)時，執(zhí)行異步操作或開銷較大的操作，這是很有用的。
基于這個官方的理解再總結(jié)我個人的整體理解。給出computed和watch的總結(jié)，記住這幾點的總結(jié)，在做項目的時候想想這些總結(jié)，選擇你的應(yīng)用方法
其實我覺得計算屬性也好，computed,watch這幾個都不是有多難，如果淺層面上看很容易理解，如果從深層面上看，很多小伙伴會存在什么問題，就是會濫用，混用，這些計算屬性，雖然最后結(jié)果都能實現(xiàn)，就像條條大路通羅馬，你走的是最遠的路，想返回可能都難
我就舉以上幾個簡單的例子，但是我想說的就是兩點基礎(chǔ)非常重要。
要如何結(jié)合三大牛B特性：
如果你看到這個需求，你花3分種時間如何去用以上三大特性做出兩種解決方法你就是Vue精通者。
我還是感覺第二個方便點。
如何去寫組件，從什么地方開始寫起，如果你對基礎(chǔ)api已經(jīng)了如指掌了，那你就可以開手動組件了，組件要學(xué)會利用幾個組件的很大的特性，最大的特性我就不用說了，用props接數(shù)據(jù)，用$emit去觸發(fā)事件 用v-on去接收自定義事件，有時候你會發(fā)現(xiàn)有時候通過父組件傳遞來的數(shù)據(jù)，我們在組件內(nèi)部一直需要改動，那我們不得不用watch方法去復(fù)制一個復(fù)本，再進行操作，那我們有什么好辦法，如更面臨更多組件套組件的模式下，如果利用特性api去做最簡便的寫法，那就是$parent、$children、$root、$el、$refs 這五大特性。
組件規(guī)范
基于模塊開發(fā)
始終基于模塊的方式來構(gòu)建你的 app，每一個子模塊只做一件事情。
Vue.js 的設(shè)計初衷就是幫助開發(fā)者更好的開發(fā)界面模塊。一個模塊是應(yīng)用程序中獨立的一個部分。
怎么做？
每一個 Vue 組件(等同于模塊)首先必須專注于解決一個單一的問題，獨立的, 可復(fù)用的, 微小的 and 可測試的。
如果你的組件做了太多的事或是變得臃腫，請將其拆分成更小的組件并保持單一的原則。一般來說，盡量保證每一個文件的代碼行數(shù)不要超過 100 行。也請保證組件可獨立的運行。比較好的做法是增加一個單獨的 demo 示例。
Vue 組件命名
組件的命名需遵從以下原則：
同時還需要注意：
為什么？因為組件是通過組件名來調(diào)用的。所以組件名必須簡短、富有含義并且具有可讀性。
如何做？
<!-- 推薦 --><app-header></app-header><user-list></user-list><range-slider></range-slider><!-- 避免 --><btn-group></btn-group> <!-- 雖然簡短但是可讀性差. 使用 `button-group` 替代 --><ui-slider></ui-slider> <!-- ui 前綴太過于寬泛，在這里意義不明確 --><slider></slider> <!-- 與自定義元素規(guī)范不兼容 -->
組件表達式簡單化
Vue.js 的表達式是 100% 的 Javascript 表達式。這使得其功能性很強大，但也帶來潛在的復(fù)雜性。因此，你應(yīng)該盡量保持表達式的簡單化。
為什么？
怎么做？
如果你發(fā)現(xiàn)寫了太多復(fù)雜并難以閱讀的行內(nèi)表達式，那么可以使用 method 或是 computed 屬性來替代其功能。
<!-- 推薦 --><template> <h1> {{ `${year}-${month}` }} </h1></template><script type="text/javascript"> export default { computed: { month() { return this.twoDigits((new Date()).getUTCMonth() + 1); }, year() { return (new Date()).getUTCFullYear(); } }, methods: { twoDigits(num) { return ('0' + num).slice(-2); } }, };</script><!-- 避免 --><template> <h1> {{ `${(new Date()).getUTCFullYear()}-${('0' + ((new Date()).getUTCMonth()+1)).slice(-2)}` }} </h1></template>組件 props 原子化
雖然 Vue.js 支持傳遞復(fù)雜的 JavaScript 對象通過 props 屬性，但是你應(yīng)該盡可能的使用原始類型的數(shù)據(jù)。盡量只使用JavaScript 原始類型(字符串、數(shù)字、布爾值) 和 函數(shù)。盡量避免復(fù)雜的對象。
為什么？
怎么做？
組件的每一個屬性單獨使用一個 props，并且使用函數(shù)或是原始類型的值。
<!-- 推薦 --><range-slider :values="[10, 20]" min="0" max="100" step="5" :on-slide="updateInputs" :on-end="updateResults"></range-slider><!-- 避免 --><range-slider :config="complexConfigObject"></range-slider>
驗證組件的 props
在 Vue.js 中，組件的 props 即 API，一個穩(wěn)定并可預(yù)測的 API 會使得你的組件更容易被其他開發(fā)者使用。
組件 props 通過自定義標(biāo)簽的屬性來傳遞。屬性的值可以是 Vue.js 字符串( :attr="value" 或 v-bind:attr="value" )或是不傳。你需要保證組件的 props 能應(yīng)對不同的情況。
為什么？
驗證組件 props 可以保證你的組件永遠是可用的(防御性編程)。即使其他開發(fā)者并未按照你預(yù)想的方法使用時也不會出錯。
怎么做？
<template> <input type="range" v-model="value" :max="max" :min="min"> </template> <script type="text/javascript"> export default { props: { max: { type: Number, // 這里添加了數(shù)字類型的校驗 default() { return 10; }, }, min: { type: Number, default() { return 0; }, }, value: { type: Number, default() { return 4; }, }, }, }; </script>將 this 賦值給 component 變量(
在 Vue.js 組件上下文中，this指向了組件實例。因此當(dāng)你切換到了不同的上下文時，要確保 this 指向一個可用的 component 變量。
換句話說，不要在編寫這樣的代碼 const self = this; ，而是應(yīng)該直接使用變量 component。
為什么？
將組件 this 賦值給變量 component可用讓開發(fā)者清楚的知道任何一個被使用的地方，它代表的是組件實例。
怎么做？
<script type="text/javascript">export default { methods: { hello() { return 'hello'; }, printHello() { console.log(this.hello()); }, },};</script><!-- 避免 --><script type="text/javascript">export default { methods: { hello() { return 'hello'; }, printHello() { const self = this; // 沒有必要 console.log(self.hello()); }, },};</script>組件結(jié)構(gòu)化
按照一定的結(jié)構(gòu)組織，使得組件便于理解。
為什么？
怎么做――組件結(jié)構(gòu)化
<template lang="html"> <div class="Ranger__Wrapper"> <!-- ... --> </div></template><script type="text/javascript"> export default { // 不要忘記了 name 屬性 name: 'RangeSlider', // 組合其它組件 extends: {}, // 組件屬性、變量 props: { bar: {}, // 按字母順序 foo: {}, fooBar: {}, }, // 變量 data() {}, computed: {}, // 使用其它組件 components: {}, // 方法 watch: {}, methods: {}, // 生命周期函數(shù) beforeCreate() {}, mounted() {},};</script><style scoped> .Ranger__Wrapper { /* ... */ }</style>組件事件命名
Vue.js 提供的處理函數(shù)和表達式都是綁定在 ViewModel 上的，組件的每一個事件都應(yīng)該按照一個好的命名規(guī)范來，這樣可以避免不少的開發(fā)問題，具體可見如下 為什么。
為什么？
怎么做？
避免this.$parent
Vue.js 支持組件嵌套，并且子組件可訪問父組件的上下文。訪問組件之外的上下文違反了基于模塊開發(fā)的第一原則。因此你應(yīng)該盡量避免使用 this.$parent。
為什么？
怎么做？
謹(jǐn)慎使用 this.$refs
Vue.js 支持通過 ref 屬性來訪問其它組件和 HTML 元素。并通過 this.$refs 可以得到組件或 HTML 元素的上下文。在大多數(shù)情況下，通過 this.$refs來訪問其它組件的上下文是可以避免的。在使用的的時候你需要注意避免調(diào)用了不恰當(dāng)?shù)慕M件 API，所以應(yīng)該盡量避免使用 this.$refs。
為什么？
怎么做？
document.getElement* , document.queryElement。 <!-- 推薦，并未使用 this.$refs --> <range :max="max" :min="min" @current-value="currentValue" :step="1"></range><!-- 使用 this.$refs 的適用情況--><modal ref="basicModal"> <h4>Basic Modal</h4> <button class="primary" @click="$refs.basicModal.close()">Close</button></modal><button @click="$refs.basicModal.open()">Open modal</button><!-- Modal component --><template> <div v-show="active"> <!-- ... --> </div></template><script> export default { // ... data() { return { active: false, }; }, methods: { open() { this.active = true; }, hide() { this.active = false; }, }, // ... };</script><!-- 如果可通過 emited 來做則避免通過 this.$refs 直接訪問 --><template> <range :max="max" :min="min" ref="range" :step="1"></range></template><script> export default { // ... methods: { getRangeCurrentValue() { return this.$refs.range.currentValue; }, }, // ... };</script>使用組件名作為樣式作用域空間
Vue.js 的組件是自定義元素，這非常適合用來作為樣式的根作用域空間。可以將組件名作為 css 類的命名空間。
為什么？
怎么做？
使用組件名作為樣式命名的前綴，可基于 BEM 或 OOCSS 范式。同時給style標(biāo)簽加上 scoped 屬性。加上 scoped 屬性編譯后會給組件的 class 自動加上唯一的前綴從而避免樣式的沖突。
<style scoped> /* 推薦 */ .MyExample { } .MyExample li { } .MyExample__item { } /* 避免 */ .My-Example { } /* not scoped to component or module name, not BEM compliant */</style>提供組件 API 文檔
使用 Vue.js 組件的過程中會創(chuàng)建 Vue 組件實例，這個實例是通過自定義屬性配置的。為了便于其他開發(fā)者使用該組件，對于這些自定義屬性即組件API應(yīng)該在 README.md 文件中進行說明。
為什么？
怎么做？
在模塊目錄中添加 README.md 文件：
range-slider/├── range-slider.Vue├── range-slider.less└── README.md
在 README 文件中說明模塊的功能以及使用場景。對于 Vue 組件來說，比較有用的描述是組件的自定義屬性即 API 的描述介紹。
如何提高自己的寫組件能力
1、第一，多寫，多練，從簡單的開始寫，然后做總結(jié)，不停的換寫法，寫到自己的很滿意為止，我可以這么說，就光上面那個login.Vue組件，我寫了五次，最后一次才讓我滿意，如何分分合合，這個也是對組件層面上一個考驗
2、看他人源碼，比方說mintui，iview他們組件如何去組件的，通過看開源組件庫的代碼你會從中很多收益，你會發(fā)現(xiàn)有些不常的特性，是如次的牛B，如何之方便，你就能在組件層面上有更大的提高，漸漸的你的價值也會體現(xiàn)，無論誰的Vue ui框架庫再好，也沒有自己寫一個好，因為功能是千變?nèi)f化的，你掌握了組件編寫能力，你就主動了，不是被動了，發(fā)現(xiàn)別人的ui邏輯和樣式不適合自己，怎么辦，輪子麻，自行輪子拿 過來改改加加厚那就是摩托車輪子，單車變摩托麻。
我覺得吧！無論學(xué)什么，學(xué)好基礎(chǔ)才是最重要，我的學(xué)習(xí)方式是從淺入深，而不是深入淺出，只有基礎(chǔ)打的好，才會有更好的解決方案，Vue一切的組件功能都圍繞著基礎(chǔ)。
總結(jié)
以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作能帶來一定的幫助，如果有疑問大家可以留言交流，謝謝大家對武林網(wǎng)的支持。
新聞熱點
疑難解答
