摘要：最近在上海找工作，發現Vue前景還不錯，於是就打算先學習一下（之前了解過，但是一直沒提到日程上）這篇隨筆當是為了自己學習之后，做一個小的階段性總結。希望本文的內容對於剛開始接觸vue的朋友們有點幫助（曾經的我）。如有誤導之處，希望大家幫忙指出。
正文：
一、Vue 2.0
吐槽：目前市面上我所接觸過的前端框架有 Angular React Vue 當然還有一些其他的，只是我都沒怎么用過，不好多說。
Angular
我接觸的第一個前端框架，對數據有良好的處理，但是學起來入手還行，深入的話成本大了一些。當時習慣使用JQuery
的我換成了這個新鮮的玩意確實還是用了一些時間，項目成型后，覺得用着還行。但是后來的Angular2.0 讓我徹底的放棄了
Angular（個人想法），后來看到了移動端的熱潮，但是Angular用在移動端的話，顯得有些重了。這個時候React出現了。
React & React Native
號稱僅次於原生的JS前端框架閃耀問世，由於有了些之前Angular的基礎，學習這個要輕松一些，不得不說“盛名之下無
虛士”，視圖的組件化和響應式無論是開發還是用戶體驗都是極好的。
Vue
Vue的出現，性能方面官網給出了很明確的數據，在這里。 而放在第一位的做比較的就是React，可見其對React的
重視程度，在有前兩個框架的基礎上，本就容易掌握的Vue，耗費的成本小的很多。更優的性能，更低的學習成本。
----------------來點正經的-----------------
官網的文檔很好，這里只是記錄一下當初自己學習的一些疑惑。
1）關於組件化，一張圖解釋足以。
2）什么是“鈎子” ？
文檔里多次提到“鈎子”，“鈎子” 簡單理解就是“到什么時候，做什么事”，比如生命周期鈎子，如下圖：
其中：mounted 就是頁面渲染完了之后，我們可以干點什么壞事。一看代碼就立刻明白了。
<script>
import $ from 'webpack-zepto';
export default {
data () {
return {
topic: {},
topicId: ''
}
},
mounted () {
this.topicId = this.$route.params.id;
$.get('https://cnodejs.org/api/v1/topic/' + this.topicId, (d) => {
if (d && d.data) {
this.topic = d.data;
}
})
}
}
</script>
我們通過 mounted （頁面渲染完成后，即“到什么時候”） 這個“鈎子”，當頁面渲染完了之后，發起了一個請求（即“做什么事”），
然后就會有一些列邪惡的事情。看到這里，相信都能明白什么是“鈎子”啦！明白了什么是“鈎子”，對之后的學習很有必要。
3）數據的傳遞（這很重要）
父組件：
<template>
<div>
<cn-slide :show-menu="show"></cn-slide> <!-- 這里就是父組件 -->
</div>
</template>
<script>
import $ from 'webpack-zepto'
import cnSlide from './slide'
export default {
data() {
return {
show: false
};
},
components: {
cnSlide
}
};
</script>
子組件：就是 import cnSlide from './slide' 中的這個 slide 文件
1. 父組件-->子組件
這種傳值的方式很容易理解。
首先：在父組件中，通過 v-bind （縮寫為 “:”）命令，綁定一個屬性（即 prop，語義化比較容易理解），並傳入一定的值（也可以是對象）
關於如何傳入，上面的代碼已經給出了。
然后：在子組件中通過 props 來接收，代碼如下：
<script> export default { replace: true, props: ['showMenu'], computed: { isShow: function() { return this.showMenu = false //使用 this. 即可調用。與data一樣使用 } } ... }; </script>
2. 子組件-->父組件
這個稍微有點難度了
主要用到兩個方法即可：vm.$on 和 vm.$emit 上代碼：
// vm.$on("監控的方法名，字符串", callback) 用在父組件 // 這里的 v-on 就相當於是$on, child-say = 監控的方法名, // listenToMyBoy = callback <comp-fa v-on:childsay="listenToMyBoy"></comp-fa> <p>Do you like me? {{childsay}}</p> methods: { listenToMyBoy: function (data){ //data 就是從子組件接收到的值 this.childsay = data } }
// vm.$emit("父組件監控的方法名",要傳給父組件的參數) // 這里的 talk 只是為了觸發 emit() <button v-on:click="talk">I like you</button> methods: { talk: function(){ this.$emit('childsay',想要傳給父組件的數據data); } }
3. 組件與組件間
僅是為了總結情況才寫出來，文檔上也有寫到，復雜情況的話就用 狀態管理模式 ，這里只是略做解釋。
//這里就直接引用官方代碼
//只是用了一個空的 Vue實例作為中間介質，畢竟兩個平行的東西想要交集，就要借助其他東西。
//如果理解了 子組件 向 父組件傳值，這個也不難理解
var bus = new Vue() // 觸發組件 A 中的事件 bus.$emit('id-selected', 1) //這里的 1 作為參數傳入下面的時間當中 // 在組件 B 創建的鈎子中監聽事件 bus.$on('id-selected', function (id) { // ... })
二 Vuex 的理解以及核心應用
關於官方文檔一定要仔細閱讀，尤其是每一部分的第一段話！！！尤其是每一部分的第一段話！！！尤其是每一部分的第一段話！！！
1）Vuex是什么？
官網給的答案是 Vuex 是一個專為 Vue.js 應用程序開發的狀態管理模式，用我的理解就是 Vuex 就是處理數據的。（為了體現我們行業的層次，
有一個高端的名字也是可以理解的），官方文檔中有解釋是怎么處理數據的，一會用自己的理解（大白話）簡單講述一下。
2）store
Vuex應用的核心，"store" 基本上就是一個容器，它包含着你的應用中大部分的狀態(state)。這是官方的解釋。因為我不知道怎么解釋這個東西
記住怎么寫就得了。（畢竟是入門，又不是什么從簡入繁）
3）Vuex如何管理數據？
1.state：唯一數據源 打個比方：state中定義一個x值，在整個應用中任意地方都可以取到。（代碼怎么寫，官網很明確）
2.getters: 就是計算屬性
3.mutations: 更改state的唯一方法（只能同步，異步處理放在action中)。每個 mutation 都有一個字符串的 事件類型 (type) 和 一個 回調函數 (handler)
事件類型 = 方法名，回調函數 = 方法
4.actions: 處理mutations不能做的異步操作。其中 分發 就是 觸發
5.modules: 將前面四個分成modules = { state: { ... }, mutations: { ... }, actions: { ... }, getters: { ... } }
簡單講： 將一只雄鷹變成了若干只麻雀，但麻雀雖小、五臟俱全。放一起還是雄鷹！
Vuex說的比較少，因為看完文檔之后你再看這篇，多少會清晰一些。
參照資料
官網：https://cn.vuejs.org/v2/guide/
Vuex 2.x: https://vuex.vuejs.org/zh-cn/ （ Vue 核心插件 ）
Vue-router 2.x: https://router.vuejs.org/zh-cn/ （ Vue 核心插件 ）