從感性的角度講，我是不屑于用VUE，覺得react套件用起來更順手，但是vue現(xiàn)在越來火，所以也不得入vue(雜燴湯)的坑。vue/anguarJS/React，三者對關(guān)系現(xiàn)在就是：
成都創(chuàng)新互聯(lián)技術(shù)團(tuán)隊(duì)十年來致力于為客戶提供成都做網(wǎng)站、成都網(wǎng)站設(shè)計(jì)、高端網(wǎng)站設(shè)計(jì)、營銷型網(wǎng)站、搜索引擎SEO優(yōu)化等服務(wù)。經(jīng)過多年發(fā)展，公司擁有經(jīng)驗(yàn)豐富的技術(shù)團(tuán)隊(duì)，先后服務(wù)、推廣了1000+網(wǎng)站，包括各類中小企業(yè)、企事單位、高校等機(jī)構(gòu)單位。
https://www.zhoulujun.cn/uploadfile/images/2018/0626/20180626214906428779269.jpg
自己ps了下，覺得深有道理，騷年們自己體悟，然后再問軍哥^_^
不過回歸真題，看vue還是先了解下https://cdn.zhoulujun.cn/vue.jpg(太大，自己打開）
vue所有功能的實(shí)現(xiàn)都是圍繞其生命周期進(jìn)行的，在生命周期的不同階段調(diào)用對應(yīng)的鉤子函數(shù)可以實(shí)現(xiàn)組件數(shù)據(jù)管理和DOM渲染兩大重要功能。學(xué)習(xí)實(shí)例的生命周期，能幫助我們理解vue實(shí)例的運(yùn)行機(jī)制，更好地利用鉤子函數(shù)完成我們的業(yè)務(wù)代碼。
create 和 mounted 相關(guān) 的函數(shù)有：
beforecreated》created》beforeMount》mounted》beforeDestroy
beforecreated：el 和 data 并未初始化, 案例：可以在這加個(gè)loading事件 及獲取路由參數(shù)，但是this.(data｜c(diǎn)omputed｜methods）參數(shù)均為undefind（無法訪問到 el 屬性和 data 屬性等）
在beforeCreate和created之間：在這個(gè)生命周期之間，進(jìn)行初始化事件，進(jìn)行數(shù)據(jù)的觀測，可以看到在created的時(shí)候數(shù)據(jù)已經(jīng)和data屬性進(jìn)行綁定（放在data中的屬性當(dāng)值發(fā)生改變的同時(shí)，視圖也會(huì)改變）
created:組件實(shí)例創(chuàng)建完成,屬性已綁定,但 DOM 還未生成,$el 屬性還不存在(this.$refs.XXX===undfined)。案例：在這結(jié)束loading，還做一些初始化，如根據(jù)父組件props計(jì)算當(dāng)前組件數(shù)據(jù)
created和beforeMount之間：首先會(huì)判斷對象是否有el選項(xiàng)。如果有的話就繼續(xù)向下編譯，如果沒有el選項(xiàng)，則停止編譯，也就意味著停止了生命周期，直到在該vue實(shí)例上調(diào)用vm.$mount(el)。再次判斷template參數(shù)選項(xiàng)的有無（因?yàn)関ue需要通過el找到對應(yīng)的outer template）：
（1）如果vue實(shí)例對象中有template參數(shù)選項(xiàng)，則將其作為模板編譯成render函數(shù)。
（2）如果沒有template選項(xiàng)，則將外部HTML作為模板編譯。
（3）可以看到template中的模板優(yōu)先級要高于outer HTML的優(yōu)先級。
如果沒有template,則通過render傳人的createElement編譯
綜合排名優(yōu)先級：render函數(shù)選項(xiàng) > template選項(xiàng) > outer HTML.
這里沒有看懂，可以看一下官方文檔 獨(dú)立構(gòu)建和運(yùn)行時(shí)構(gòu)建
beforeMount：完成了 el 和 data 初始化 ?？樱喝绻苯邮褂脅{msg}} 在生命周期beforeMount期間，此刻的msg數(shù)據(jù)尚未編譯至{{msg}}中，用戶能看到一瞬間的{{msg}} v-cloak
beforeMount和mounted之間：給vue實(shí)例對象添加$el成員，并且替換掉掛在的DOM元素
mounted ：完成掛載 案例： 在這發(fā)起后端請求，拿回?cái)?shù)據(jù)，配合路由鉤子做一些事情
beforeUpdate：可以監(jiān)聽到data的變化但是view層沒有被重新渲染，view層的數(shù)據(jù)沒有變化
beforeUpdate和update之間：當(dāng)vue發(fā)現(xiàn)data中的數(shù)據(jù)發(fā)生了改變，會(huì)觸發(fā)對應(yīng)組件的重新渲染（重新渲染虛擬 dom,并通過 diff 算法對比 vnode 節(jié)點(diǎn)差異更新真實(shí) dom (virtual DOM re-render and patch)），先后調(diào)用beforeUpdate和updated鉤子函數(shù)（beforeUpdate：可以監(jiān)聽到data的變化但是view層沒有被重新渲染，view層的數(shù)據(jù)沒有變化，updated： view層才被重新渲染，數(shù)據(jù)更新。此處可回顧下react對更新函數(shù)。
updated：候 view層才被重新渲染，數(shù)據(jù)更新
beforeDestroy 組件銷毀之前，案例：你確認(rèn)刪除XX嗎？第二個(gè)：比如走馬燈文字，路由跳轉(zhuǎn)之后，因?yàn)榻M件已經(jīng)銷毀了，但是setInterval還沒有銷毀，還在繼續(xù)后臺(tái)調(diào)用，控制臺(tái)會(huì)不斷報(bào)錯(cuò)，如果運(yùn)算量大的話，無法及時(shí)清除，會(huì)導(dǎo)致嚴(yán)重的頁面卡頓。解決辦法：在組件生命周期beforeDestroy停止setInterval
destroyed ：當(dāng)前組件已被刪除，清空相關(guān)內(nèi)容 。實(shí)例銷毀后雖然 dom 和屬性方法都還存在,但改變他們都將不再生效!
這這里順便回顧下react生命周期
getDefaultProps()+getInitialState() es5≈ es6 contruct()
函數(shù)初始化。定時(shí)init state，也可訪問props。 這個(gè)階段，相當(dāng)于 vue的create 函數(shù)該做的事情。
componentWillMount()
組件初始化時(shí)只調(diào)用，以后組件更新不調(diào)用，整個(gè)生命周期只調(diào)用一次，在客戶端也在服務(wù)端，此時(shí)可以修改state。這個(gè)階段應(yīng)該相當(dāng)于 vue的 beforeMount()
render()
react最重要的步驟，創(chuàng)建虛擬dom，進(jìn)行diff算法，更新dom樹都在此進(jìn)行。此時(shí)就不能更改state了。 這個(gè)相當(dāng)于 vue mounted
componentDidMount()()
組件渲染之后調(diào)用，只調(diào)用一次，只在客戶端。這個(gè)階段，一般的異步數(shù)據(jù)放在這個(gè)函數(shù)內(nèi)處理
componentWillReceiveProps(nextProps)
組件初始化時(shí)不調(diào)用，組件接受新的props時(shí)調(diào)用。
shouldComponentUpdate(nextProps, nextState)
react性能優(yōu)化非常重要的一環(huán)。組件接受新的state或者props時(shí)調(diào)用，我們可以設(shè)置在此對比前后兩個(gè)props和state是否相同，如果相同則返回false阻止更新，因?yàn)橄嗤膶傩誀顟B(tài)一定會(huì)生成相同的dom樹，這樣就不需要?jiǎng)?chuàng)造新的dom樹和舊的dom樹進(jìn)行diff算法對比，節(jié)省大量性能，尤其是在dom結(jié)構(gòu)復(fù)雜的時(shí)候。但是state依然會(huì)保持更新。
這這里，是vue PK react 的重點(diǎn)。
Vue宣稱可以更快地計(jì)算出Virtual DOM的差異，這是由于它在渲染過程中，會(huì)跟蹤每一個(gè)組件的依賴關(guān)系，不需要重新渲染整個(gè)組件樹。
而對于React而言，每當(dāng)應(yīng)用的狀態(tài)被改變時(shí)，全部子組件都會(huì)重新渲染。當(dāng)然，這可以通過shouldComponentUpdate這個(gè)生命周期方法來進(jìn)行控制，但Vue將此視為默認(rèn)的優(yōu)化。
小結(jié)：如果你的應(yīng)用中，交互復(fù)雜，需要處理大量的UI變化，那么使用Virtual DOM是一個(gè)好主意。如果你更新元素并不頻繁，那么Virtual DOM并不一定適用，性能很可能還不如直接操控DOM。
componentWillUpdata(nextProps, nextState)
組件初始化時(shí)不調(diào)用，只有在組件將要更新時(shí)才調(diào)用，此時(shí)可以修改state。這個(gè)一般沒有生命卵用?？赡躷oast一下。 大致相當(dāng)于vue的beforeUpdate
componentDidUpdate()
組件初始化時(shí)不調(diào)用，組件更新完成后調(diào)用，此時(shí)可以獲取dom節(jié)點(diǎn)。
componentWillUnmount()
組件將要卸載時(shí)調(diào)用，一些事件監(jiān)聽和定時(shí)器需要在此時(shí)清除。相當(dāng)于vue的beforeDestroy
相比來講，覺得react的生命周期更加清爽。建議參看：重談react優(yōu)勢——react技術(shù)?；仡?/p>
路由是項(xiàng)目等重點(diǎn)，很多事情可以在路由里面處理好。路由和store等規(guī)劃項(xiàng)目基礎(chǔ)架構(gòu)核心，沒有好的規(guī)劃，工程就是一坨屎。
作用于所有路由切換，一般在main.js里面定義
beforeEach：一般在這個(gè)勾子的回調(diào)中，對路由進(jìn)行攔截。比如，未登錄的用戶，直接進(jìn)入了需要登錄才可見的頁面，那么可以用next(false)來攔截，使其跳回原頁面等，值得注意的是，如果沒有調(diào)用next方法，那么頁面將卡在那。
next的四種用法
next() 跳入下一個(gè)頁面
next('/path') 改變路由的跳轉(zhuǎn)方向，使其跳到另一個(gè)路由
next(false) 返回原來的頁面
next((vm)=>{}) 僅在beforeRouteEnter中可用，vm是組件實(shí)例。
afterEach ：在所有路由跳轉(zhuǎn)結(jié)束的時(shí)候調(diào)用，和beforeEach是類似的，但是它沒有next方法，這里比如做修改標(biāo)簽標(biāo)題： document.title = to.meta.title等工作。
和全局勾子不同的是，它僅僅作用于某個(gè)組件，一般在.vue文件中去定義。
beforeRouteEnter
這個(gè)是一個(gè)很不同的勾子。因?yàn)閎eforeRouterEnter在組件創(chuàng)建之前調(diào)用，所以它無法直接用this來訪問組件實(shí)例。
為了彌補(bǔ)這一點(diǎn)，vue-router開發(fā)人員，給他的next方法加了特技，可以傳一個(gè)回調(diào)，回調(diào)的第一個(gè)參數(shù)即是組件實(shí)例。
一般我們可以利用這點(diǎn)，對實(shí)例上的數(shù)據(jù)進(jìn)行修改，調(diào)用實(shí)例上的方法。
我們可以在這個(gè)方法去請求數(shù)據(jù)，在數(shù)據(jù)獲取到之后，再調(diào)用next就能保證你進(jìn)頁面的時(shí)候，數(shù)據(jù)已經(jīng)獲取到了。沒錯(cuò)，這里next有阻塞的效果。你沒調(diào)用的話，就會(huì)一直卡在那
beforeRouteLeave
在離開路由時(shí)調(diào)用?？梢杂胻his來訪問組件實(shí)例。但是next中不能傳回調(diào)。
beforeRouteUpdate：
這個(gè)方法是vue-router2.2版本加上的。因?yàn)樵瓉淼陌姹局?，如果一個(gè)在兩個(gè)子路由之間跳轉(zhuǎn)，是不觸發(fā)beforeRouteLeave的。這會(huì)導(dǎo)致某些重置操作，沒地方觸發(fā)。在之前，我們都是用watch $route來hack的。但是通過這個(gè)勾子，我們有了更好的方式。
bind：只調(diào)用一次，指令第一次綁定到元素時(shí)調(diào)用，用這個(gè)鉤子函數(shù)可以定義一個(gè)在綁定時(shí)執(zhí)行一次的初始化動(dòng)作。
inserted：被綁定元素插入父節(jié)點(diǎn)時(shí)調(diào)用（父節(jié)點(diǎn)存在即可調(diào)用，不必存在于 document 中）。
實(shí)際上是插入vnode的時(shí)候調(diào)用。
update：被綁定元素所在的模板更新時(shí)調(diào)用，而不論綁定值是否變化。通過比較更新前后的綁定值，可以忽略不必要的模板更新。
慎用，如果在指令里綁定事件，并且用這個(gè)周期的，記得把事件注銷
componentUpdated：被綁定元素所在模板完成一次更新周期時(shí)調(diào)用。
unbind：只調(diào)用一次， 指令與元素解綁時(shí)調(diào)用。
一個(gè)頁面跳轉(zhuǎn)，發(fā)生的事情
路由勾子 (beforeEach、beforeRouteEnter、afterEach)
根組件 (beforeCreate、created、beforeMount)
組件 (beforeCreate、created、beforeMount)
指令 (bind、inserted)
組件 mounted
根組件 mounted
beforeRouteEnter的next的回調(diào)
nextTick
結(jié)論：
路由勾子執(zhí)行周期非常早，甚至在根實(shí)例的渲染之前
具體的順序 router.beforeEach > beforeRouteEnter > router.afterEach
tip:在進(jìn)行路由攔截的時(shí)候要避免使用實(shí)例內(nèi)部的方法或?qū)傩浴?/p>
在開發(fā)項(xiàng)目時(shí)候，我們腦門一拍把，具體攔截的程序，寫在了根實(shí)例的方法上了，到beforeEach去調(diào)用。結(jié)果導(dǎo)致整個(gè)攔截的周期，推遲到實(shí)例渲染的之后。
因此對于一些路由組件的beforeRouteEnter里的請求并無法攔截，頁面看上去好像已經(jīng)攔截下來了。
實(shí)際上請求依然發(fā)了出去，beforeRouteEnter內(nèi)的函數(shù)依然執(zhí)行了。
指令的綁定在組件mounted之前，組件的beforeMount之后
不得不提的, beforeRouteEnter的next勾子
beforeRouteEnter的執(zhí)行順序是如此靠前，而其中next的回調(diào)勾子的函數(shù)，執(zhí)行則非?？亢?，在mounted之后??！
我們通常是在beforeRouteEnter中加載一些首屏用數(shù)據(jù)，待數(shù)據(jù)收到后，再調(diào)用next勾子，通過回調(diào)的參數(shù)vm將數(shù)據(jù)綁定到實(shí)例上。
因此，請注意next的勾子是非常靠后的。
nextTick：越早注冊的nextTick觸發(fā)越早
上文講了這么多的router，順勢總結(jié)下：
:to ：相當(dāng)于a標(biāo)簽中的"herf"屬性，后面跟跳轉(zhuǎn)鏈接所用
replace：replace在routre-link標(biāo)簽中添加后，頁面切換時(shí)不會(huì)留下歷史記錄
tag：具有tag屬性的router-link會(huì)被渲染成相應(yīng)的標(biāo)簽
active-class：這個(gè)屬性是設(shè)置激活鏈接時(shí)class屬性，也就是當(dāng)前頁面所有與當(dāng)前地址所匹配的的鏈接都會(huì)被添加class屬性
exact：開啟router-link的嚴(yán)格模式
用了vue-router,證明項(xiàng)目工程還是蠻大的，建議使用vuex來做全局?jǐn)?shù)據(jù)管理（可能用redux習(xí)慣了吧?。?/p>
vuex的store天生自帶modules概念，同時(shí)也需要thunk中間件，action處理異步數(shù)據(jù)。下面copy一點(diǎn)我項(xiàng)目code demo：
重慶分公司
重慶分公司
const store = new Vuex.Store({
modules: {
authForm: authFormStore,
BankAdd:BankAddFormStore
}
});下面是store的示范
const authFormStore = {
state: {
name: ""
},
mutations: {
update: function (state, obj) { //我原來也是寫了N多個(gè)update函數(shù)，圖樣圖森破啊
state[obj.name] = obj.value;
},
},
action: {
setData: function (context, obj) {
//TODO
Vue.http.post("api", params, {emulateJSON: true}).then(function (res) {
// 處理業(yè)務(wù)
// 調(diào)用上面setAgree方法更新點(diǎn)贊數(shù)
context.commit(obj.name, obj.value);
}, function () {
})
},
},
getters: {
getNews(state){
//TODO return new value
}
}
}在vue組件mapState
computed: {
memberType: function () {
let memberType = this.$route.params.memberType;
this.initWeChat(window.location.href, memberType);
return memberType;
},
...mapState({
authForm: state => state.authForm,
epCertType: state => state.authForm.epCertType
})
},這里有坑：表單的v-model屬性值是Vuex的state時(shí)，如果時(shí)嚴(yán)格模式，因?yàn)橛脩糨斎霑r(shí)，v-model會(huì)試圖修改v-model的值，由于修改并非mutation執(zhí)行的,嚴(yán)格模式下會(huì)拋出錯(cuò)誤。
針對這種情況，有兩個(gè)處理方法:一個(gè)是雙向綁定的計(jì)算屬性，一個(gè)是給表單綁定value，然后偵聽input或change事件，在事件中調(diào)用action。
computed:{
message:{
get(){
return this.$store.obj.message
},
set(value){
this.$store.commit('updateMessage',value)
}
}
}第二種方法
computed:{
...mapState({
message: state => state.obj.message
})
},
methods:{
updateMessage(e){
this.$store.commit('updateMessage',e.target.value)
}
}
mutations:{ //store mutation函數(shù)
updateMessage(state,message){
state.obj.message=message
}
}Vue.js 最核心的功能有兩個(gè)，一是響應(yīng)式的數(shù)據(jù)綁定系統(tǒng)，二是組件系統(tǒng)
所謂雙向綁定，指的是vue實(shí)例中的data與其渲染的DOM元素的內(nèi)容保持一致，無論誰被改變，另一方會(huì)相應(yīng)的更新為相同的數(shù)據(jù)。這是通過設(shè)置屬性訪問器實(shí)現(xiàn)的。
Vue 的依賴追蹤是【原理上不支持雙向綁定，v-model 只是通過監(jiān)聽 DOM 事件實(shí)現(xiàn)的語法糖】
vue的依賴追蹤是通過 Object.defineProperty 把data對象的屬性全部轉(zhuǎn)為 getter/setter來實(shí)現(xiàn)的；當(dāng)改變數(shù)據(jù)的某個(gè)屬性值時(shí)，會(huì)觸發(fā)set函數(shù),獲取該屬性值的時(shí)候會(huì)觸發(fā)get函數(shù)，通過這個(gè)特性來實(shí)現(xiàn)改變數(shù)據(jù)時(shí)改變視圖；也就是說只有當(dāng)數(shù)據(jù)改變時(shí)才會(huì)觸發(fā)視圖的改變，反過來在操作視圖時(shí)，只能通過DOM事件來改變數(shù)據(jù)，再由此來改變視圖，以此來實(shí)現(xiàn)雙向綁定
雙向綁定是在同一個(gè)組件內(nèi)，將數(shù)據(jù)和視圖綁定起來，和父子組件之間的通信并無什么關(guān)聯(lián)；
組件之間的通信采用單向數(shù)據(jù)流是為了組件間更好的解耦，在開發(fā)中可能有多個(gè)子組件依賴于父組件的某個(gè)數(shù)據(jù)，假如子組件可以修改父組件數(shù)據(jù)的話，一個(gè)子組件變化會(huì)引發(fā)所有依賴這個(gè)數(shù)據(jù)的子組件發(fā)生變化，所以vue不推薦子組件修改父組件的數(shù)據(jù)，直接修改props會(huì)拋出警告
這里推薦閱讀《Vue.js雙向綁定的實(shí)現(xiàn)原理》
react沒有數(shù)據(jù)雙向綁定
react是單向數(shù)據(jù)流：對應(yīng)任何可變數(shù)據(jù)理應(yīng)只有一個(gè)單一“數(shù)據(jù)源”，數(shù)據(jù)源狀態(tài)提升至父組件中
react中通過將state（Model層）與View層數(shù)據(jù)進(jìn)行雙向綁定達(dá)數(shù)據(jù)的實(shí)時(shí)更新變化，具體來說就是在View層直接寫JS代碼Model層中的數(shù)據(jù)拿過來渲染，一旦像表單操作、觸發(fā)事件、ajax請求等觸發(fā)數(shù)據(jù)變化，則進(jìn)行雙同步
angular也是雙向數(shù)據(jù)綁定（一次做完所有數(shù)據(jù)變更，然后整體應(yīng)用到界面上）
安利下：再談angularJS數(shù)據(jù)綁定機(jī)制及背后原理—angularJS常見問題總結(jié)
三者中，我還是更推崇react＋redux模式（自上而下的數(shù)據(jù)流，業(yè)務(wù)聚焦于數(shù)據(jù)樹設(shè)計(jì)）
這里面不得不提的就是，vuejs對data中數(shù)組的原生方法進(jìn)行了封裝，所以在改變數(shù)組時(shí)能夠觸發(fā)視圖更新。這個(gè)我在寫日期控件對時(shí)候遇到很多坑,比如：
通過索引直接修改數(shù)組的元素，例如vm.items[0] = {title: 'title'}
無法直接修改數(shù)組的長度，例如vm.items.length = 0
解決方案： 對于第一種vue提供了set方法vm.items.set(0,{title: ‘title’}) 或vm.$set(‘items[0]’,{title: ‘title’})。另外一個(gè)列表渲染的時(shí)候的有一個(gè)性能的小技巧： 如果數(shù)組中本身自帶一個(gè)唯一的標(biāo)識(shí) id ，那么在渲染的時(shí)候，通過trace-by給數(shù)組設(shè)定唯一的標(biāo)識(shí)，這樣vuejs在渲染過程中會(huì)盡量重復(fù)原有對象的作用域和dom元素。
關(guān)于用“箭頭函數(shù)精簡你的 Vue 模塊”(建議點(diǎn)擊閱讀)，精簡出來就是：
methods: {
method(){//todo} //不用： method:()=>{//todo} method:function(){//todo}
}參考文章：
Vue2.0 探索之路——生命周期和鉤子函數(shù)的一些理解
詳解vue生命周期
vue生命周期
vue生命周期探究
vue安裝，router-link的一些屬性，用法，tag active-class，to,replace,exex等等
Vuex下Store的模塊化拆分實(shí)踐
Vue.js與React的全面對比
Vue.js 2.0源碼解析之前端渲染篇
用箭頭函數(shù)精簡你的 Vue 模塊 – dotdev
轉(zhuǎn)載請注明來源，vue2.x入坑總結(jié)-回顧對比angularJS/React - vue入坑總結(jié) -周陸軍的個(gè)人網(wǎng)站，：https://www.zhoulujun.cn/html/webfront/ECMAScript/vue/8125.html。不妥之處，望告之，謝謝！
