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