一個新手司機眼裏的 Vue

先說一句題外話，對於 Vue 的探索和應用我只服 ElemeFE

基礎

• 軟件工程學
• 代碼風格
• 基本功
• Vue.js 官方文檔
• ES6

Vue 三大特性

數據的雙向綁定

經過數據綁定鏈接 View 和 Model， 讓數據的變化自動映射爲視圖的更新。

數據驅動的組件系統

用嵌套的組件樹來描述用戶界面，每個組件對應MVVM中的ViewModel。

基於構建工具的單文件組件系統

藉助webpack強大的loader API，來定義對不一樣文件格式的預處理邏輯，從而將 vue 文件看成 javascript 模塊來使用，從而極大提高了代碼的可複用性。

開始

俗話說「工欲善其事必先利其器」，再往前遞推，工欲利其器必先得其器。在進行一次 vue 項目的開發以前，如何將 vue 引入是咱們面對的第一個問題。
這裏我主要介紹兩種引入方式。

傳統的<script>大法

遙想當年，在和jQuery一塊兒玩耍的時候，在每擼一個頁面以前，都會先把jq的cdn路徑放在處於</body>前的<script>裏面，由於這樣作才能夠和她愉快的玩耍。
雖然說 jq 和 vue 不是一個概念（庫 vs 框架），可是基於瀏覽器解析js的原理，二者能夠用相同的方式引入。

npm install

NPM（Node Package Manager）是Node.js自帶的一款包管理工具，只須要簡單的在鍵盤上敲下
npm install *package name*
就能夠將你須要的包安裝至你的項目中，進而藉助模塊加載器就能夠把她們引入到你的文件中。
固然，除了npm以外，還有其餘的包管理工具，好比 bower 和 yarn，能夠根據我的喜愛進行選擇。
不過值得一提的是，yarn 是 Facebook 推出的一款包管理工具，他們的工程師在使用 npm 的時候發現了不少須要改進的地方，爲了達到預期的效果，打造了 yarn 這款工具。因此，若是你感興趣，能夠試試 yarn。

評估

對於上面兩種方式的選擇，你須要權衡一些因素：

• 若是你是嘗試在已有的項目中添加一點新鮮的血液做爲預研，建議選擇<script>標籤的形式
• 若是你是在從零開始搭建一個 vue 項目，建議選擇用包管理工具的方式

爲何須要構建

要回答這個問題，就要追溯到另一個問題：在將代碼發佈到生產環境以前，咱們還須要作什麼？
若是能回答好這個問題，咱們就會知道——到底爲何須要構建？
答案能夠大體分爲如下幾種：

• 預處理
• 代碼風格檢測
• 資源壓縮
• 靜態資源替換

由於本文側重點的關係，這裏說一下預處理。
這又是另一個問題了——爲何須要預處理？
由於無時不刻都在面臨着瀏覽器的兼容問題，好比說ES6，一些語法糖寫起來確實很爽，可是並非全部瀏覽器都認識她；再者，React 的 jsx，Vue 的單文件，瀏覽器通通不認識，怎麼辦？只能預處理。
這裏推薦 Vue 官方認證的好基友—— Webpack（其實我是gulp粉...）
若是你用的<script>來引入Vue，不用關注這個問題，由於你已經協助瀏覽器進行了「在線編譯」。

組件化

Vue 的 slogan 是：輕量高效的前端組件化方案。
這些年，伴隨着 React 對 Web component 的不斷實踐與推進，組件化的思想被前端er們毫無抵觸的接受，相比 React，我的認爲 Vue 對組件化的解決方案更加優雅一些——藉助構建工具的單文件組件系統。
在一個.vue文件中，有三個主標籤：<template>, <script>, <style>，分別對應着當前組件的結構、交互邏輯和樣式。
口說無憑，舉個栗子
先來看看 React 的 JSX

render(){
    let { item } = this.props;

    let children;
    if ( items.length > 0 ) {
        children = (
            <ul> { items.map( item => <li key={item.id}>{item.name}</li> ) } </ul>
        );
    } else {
        children = <p>No items found.</p>
    }

    return (
        <div className = 'list-container'> { children } </div>
    );
}複製代碼

其實看起來也不是多麼的不堪，可以利用完整的 JavaScript 功能來構建視圖頁面，也是一件有意義的事情。
相同的業務邏輯，用 Vue 來寫

<template>
    <div class="list-container">
        <ul v-if="items.length">
            <li v-for="item in items">{{ item.name }}</li>
        </ul>
        <p v-else>No items found.</p>
    </div>
</template>複製代碼

是否是比 React 的 jsx 語法和內聯樣式優雅的多呢？
你須要作的就是根據業務邏輯組織好你的 components tree，接着搭配一款模塊化方案，就能實現一個基於 Vue 的單文件組件系統啦。
固然，Vue 也一樣支持 jsx 語法，你也沒必要非得采用單文件的組織形式，一切都取決於你的業務以及你的團隊。

Vue Object

每一個 Vue 實例在被建立以前都要通過一系列的初始過程。Vue 在這一週期中提供了一些鉤子函數，這就給我麼提供了執行自定義邏輯的機會。

Vue 是否有「控制器」的概念？
答： 沒有。可是你能夠將組件的自定義邏輯分佈並實如今這些鉤子函數中。 、

附上一張描述 Vue 對象生命週期的官方神圖 ↓

一個 Vue 實例的生命週期

作一下簡單的翻譯工做。

beforeCreate

在實例初始化以後，數據觀測（data observer）和 event/watcher 事件配置以前被調用。

created

實例已經建立完成以後被調用。實例已經完成數據觀測、屬性和方法的運算、watch/event事件回調，但尚未開始掛載。

beforeMount

在掛在以前被調用

mounted

掛載以後

beforeUpdate

數據更新時調用，發生在 vdom 從新渲染和打補丁以前。

updated

因爲數據更改致使的 vdom 從新渲染和打補丁，在這以後調用。

beforeDestroy

實例銷燬以前調用。在這一步，實例仍然徹底可用。

destroyed

實例銷燬以後調用。

數據流 & 事件流

組裝好了各個組件，你如今面臨的問題是——如何讓這些東西協同工做？

Props

props 是定義在子組件中的屬性，用來定義指望從父組件傳入的數據（在父組件中向子組件添加 v-bind 綁定屬性便可）。

Event

• 使用$on()監聽事件
• 使用$emit()觸發事件
• 使用$dispatch()派發事件，沿父鏈冒泡
• 使用$broadcast()廣播事件，傳導給全部的後代

有時候，你也許須要一個幫手—— vuex

當應用比較龐大，數據流和狀態也會愈加的難以管理和維護，這個時候你就須要 vuex 了。

21秒精通 Vue.js

接下來從一個新手司機的角度，總結一些能夠幫助你快速上手 Vue 的小經驗。

不要一上來就用 vue-cli

連手槍都沒打過，你一上來就問我要他孃的意大利炮？（一個出自《亮劍》的梗）

vue-cli是 Vue 官方推出的一款能夠快速構建一個 vue app 的腳手架，各項配置也是全到沒誰了。
可是，做爲一個剛起步的選手，尤爲是當你一開始要去搞的項目沒那麼複雜，仍是不要用vue-cli了，緣由有如下兩點：

• 若是你像我同樣（對於構建玩的不是特別6），當你在Terminal按照指引敲擊完幾條命令以後，看着各類配置文件，確定會一臉矇蔽，會很是打擊你的學習熱情。
• 更多的時候，你的項目可能還不須要用到如此完(yōng)整(zhǒng)的構建體系。

因此，本身動手搭一個吧，從最簡單的開始，早晚有一天你也能夠寫出一個100%切合本身項目的腳手架。

你不只須要ES6教程，還須要.babelrc

你是一個有理想的 JavaScript 開發者，你時刻關注着這門語言的發展趨勢，終於有一天，你深深的迷戀上了ES6，她諸多的新特性都令你爲之神往，因此你決定緊隨她的腳步。
但事與願違，不少瀏覽器在很大程度上並不認同這位姑娘，因此你須要做爲中間人，讓這些觀念老舊的瀏覽器認識到新時代的風尚——這就是編譯（此案例默認爲預編譯）。
一般狀況下，咱們在構建工具中引入babel對本身的腳本進行語法上的轉換，實現向後兼容。
好比在webpack.config.js中引入這樣的規則：

{
    test: /\.js$/,
    loader: 'babel-loader',
    exclude: /node_modules/,
    query: {
        presets: ['es2015', 'stage-0']
    }
}複製代碼

事實證實，在大多數狀況下，這樣是ok的。
但，當咱們的項目是藉助構建工具實現的單文件組件系統時，咱們的 JavaScript 都寫在了.vue文件中，因此當你編譯以後會獲得一堆錯誤，這些錯誤都是在你使用ES6語法的地方出現的。
緣由是由於咱們用vue-loader去處理.vue文件，這自己沒錯。可是，vue-loader用到了babel-loader，卻沒有配置babel-loader的地方，因此呢，gg。
查看官方文檔，就會找到解決辦法。

「babel-loader respects .babelrc, so it is the recommended approach to configure the Babel presets and plugins.」

參加這裏。
綜上，把 babel 相關配置放到 .babelrc 文件中去。

使用組建以前先註冊

想上車？先買票！

組件 (Components) 是 Vue.js 最強大的功能之一。

若是你沒有使用那個單文件組件系統，在使用組件的時候，你要這麼作 ↓ （註冊一個全局組件，Vue.component(tagName, options)）

Vue.component('my-component',{
    // options
});複製代碼

組件在註冊以後，即可以在父實例的模塊中以自定義元素<mu-component></my-component>的形式使用。
要確保在初始化根實例以前註冊了組件：

<div id="example">
    <my-component></my-component>
</div>複製代碼

// 註冊
Vue.component('my-component', {
    template: '<p>Hello Vue component</p>'
});

// 建立根實例
new Vue({
    el: '#example'
});複製代碼

你也能夠經過使用組件實例選項註冊，可使組件僅在另外一個實例/組件的做用域中可用，這也是單文件組件系統的註冊方式，即局部註冊。
官方文檔寫的已經很是詳細了，若是你仍然對這裏有疑慮，給你一個傳送門。

父子組件是怎麼協同工做的？

父子組件的關係能夠總結爲 props down, events up。
父組件經過 props 向下傳遞數據給子組件，子組件經過 events 給父組件發送消息。
這就比如，老子給兒子生活費（props），兒子一有事就告訴老子：「爸，我沒錢了」、「爸，有人打我」、「爸，我餓了」（events）。

父子組件協做方式

讓你更方便的調試 Vue

官方提供了一款 Chrome 插件，用於調試你的 Vue app —— Vue.js devtools。

最後

全文是從我的的視角出發，描述對 Vue 的認識以及在開發過程當中一些問題的理解。
若是有不正確、或是與你理解有誤差的地方，但願你能指出這些問題，共同窗習。

一個還算有趣的前端