除了在組件式方面vue和react有異曲同工之妙之外，vuex和redux也非常像洋闽，vue進(jìn)入2.0版本，還得到了兩個(gè)好聽的名字“漸進(jìn)式框架”和“自底向上增量開發(fā)的設(shè)計(jì)”财岔，參考詳情吞杭。
其實(shí)，我在學(xué)習(xí)vue之前锋勺，學(xué)習(xí)了react蚀瘸。但是react有很多內(nèi)容相對(duì)還是復(fù)雜。JSX是非常JS的思路庶橱，但是html和js混寫總是非常奇怪贮勃，需要很長(zhǎng)時(shí)間去習(xí)慣。redux應(yīng)該是react的一個(gè)附屬品苏章，也是必學(xué)的寂嘉。但是它相對(duì)復(fù)雜，學(xué)習(xí)成本較高枫绅。但是我學(xué)習(xí)了vuex后泉孩，去理解redux變的相對(duì)簡(jiǎn)單。這可能就是vue的“漸進(jìn)式”設(shè)計(jì)并淋。
| 框架 | React | Vue |
|---|---|---|
| 路由 | react-router | vue-router |
| 數(shù)據(jù) | redux | vuex |
vuex
要學(xué)習(xí)好vuex寓搬，必須掌握關(guān)鍵詞：state，getters县耽，actions句喷，mutations，store兔毙。詳情參考官方教程唾琼，不再贅述。
state為狀態(tài)的參數(shù)瞒御。
getters為獲取器父叙，用于過濾的方法獲取參數(shù)。
mutations是改變狀態(tài)參數(shù)的函數(shù)肴裙，但是不能直接被調(diào)用趾唱，需要對(duì)應(yīng)的
store.commit（可以額外傳參數(shù)）。actions不是直接修改狀態(tài)蜻懦，而是基于mutations甜癞，可以執(zhí)行異步處理
store更像一個(gè)容器，裝著以上的所有函數(shù)和參數(shù)宛乃，最后需要注入到Vue的實(shí)例當(dāng)中悠咱。
2.0 特性--輔助函數(shù)
輔助函數(shù)j就是可用可不用蒸辆。如果你用了，它就會(huì)提高代碼編寫效率的析既。
- mapState
- mapGetter
- mapMutation
舉個(gè)例子躬贡，如果不用輔助函數(shù)mapState，
computed: {
count () {
return this.$store.state.count
}
}
使用輔助函數(shù)mapState眼坏，
computed: mapState([
// 映射 this.count 為 store.state.count
'count'
])
如果不用輔助函數(shù)mapGetter拂玻，
computed: {
doneTodosCount () {
return this.$store.getters.doneTodosCount
}
}
使用輔助函數(shù)mapGetter，
computed: {
// 使用對(duì)象展開運(yùn)算符將 getters 混入 computed 對(duì)象中
...mapGetters([
'doneTodosCount',
'anotherGetter',
])
}
如果不用輔助函數(shù)mapMutation宰译，
methods: {
increment(){
this.$store.commit('increment')
},
}
使用輔助函數(shù)mapMutation檐蚜，
methods: {
...mapMutations([
'increment',
]),
}
如果不用輔助函數(shù)mapActions，
methods: {
increment(){
this.$store.dispatch('increment')
},
}
使用輔助函數(shù)mapActions沿侈，
methods: {
... mapActions([
'increment',
]),
}
vue-rounter
vue-router的出現(xiàn)不是個(gè)意外闯第，也不是讓你將所有的路由都裝在vue-router。它更多是用于SPA缀拭，把一些動(dòng)態(tài)的內(nèi)容提取出來咳短。例如動(dòng)態(tài)路由。詳情請(qǐng)參考官網(wǎng)
const User = {
template: '<div>User</div>'
}
const router = new VueRouter({
routes: [
// 動(dòng)態(tài)路徑參數(shù) 以冒號(hào)開頭
{ path: '/user/:id', component: User }
]
})
路由可以針對(duì)組件User分配id智厌，js端也可以獲取路由的參數(shù)诲泌。
const User = {
template: '<div>User {{ $route.params.id }}</div>'
}
關(guān)于懶加載
懶加載的功能并非vue特有，而是webpack特有的铣鹏，有幾種特殊的寫法敷扫。
const Foo = resolve => {
// require.ensure 是 Webpack 的特殊語(yǔ)法，用來設(shè)置 code-split point
// （代碼分塊）
require.ensure(['./Foo.vue'], () => {
resolve(require('./Foo.vue'))
})
}
也可以簡(jiǎn)寫為
const Foo = resolve => require(['./Foo.vue'], resolve)
懶加載會(huì)獨(dú)立分包诚卸，把對(duì)應(yīng)的組件獨(dú)立打包葵第。而懶加載組件的css將不會(huì)進(jìn)行提取。但是會(huì)對(duì)route-view級(jí)別的css進(jìn)行打包合溺，因此建議將共有的css放在route-view級(jí)別卒密。
轉(zhuǎn)載，請(qǐng)表明出處棠赛。總目錄前段收集器
