react與vue的區(qū)別
- vue使用的是template模版編寫(xiě)枪眉。react使用的是jsx語(yǔ)法剪勿。
- 狀態(tài)管理：react中的狀態(tài)全部存入state中铐拐，通常修改的時(shí)候需要用到setState方法來(lái)更新?tīng)顟B(tài)灼卢。 vue中的state對(duì)象不是必須，vue是通過(guò)data屬性在vue對(duì)象中進(jìn)行管理
- 監(jiān)聽(tīng)數(shù)據(jù)的變化赃泡，vue劫持一些函數(shù)，能精確的知道數(shù)據(jù)變化乘盼。react中默認(rèn)是通過(guò)比較引用的方式去進(jìn)行升熊，如果不優(yōu)化使用shouldComponentUpdate/PureComponent方法優(yōu)化，那會(huì)導(dǎo)致大量的虛擬dom重新渲染
- 數(shù)據(jù)流不同：vue可以進(jìn)行組件與dom之間v-modle雙向綁定绸栅。react從始至終都只有單向數(shù)據(jù)流.
- 官方推薦使用的ui庫(kù)不同;
MVC级野、MVVM區(qū)別
- MVC
我們需要數(shù)據(jù)所以有了M，我們需要界面所以有了V粹胯，而我們需要找一個(gè)地方把M賦值給V來(lái)顯示蓖柔，所以有了C;
MVC是單向通信。也就是View跟Model风纠，必須通過(guò)Controller來(lái)承上啟下况鸣。
Model（模型）：是應(yīng)用程序中用于處理應(yīng)用程序數(shù)據(jù)邏輯的部分。
View（視圖）：是應(yīng)用程序中處理數(shù)據(jù)顯示的部分竹观。
Controller（控制器）：是應(yīng)用程序中處理用戶交互的部分镐捧。
- MVVM
它有兩個(gè)方向：一是將模型（Model）轉(zhuǎn)化成視圖(View)，即將后端傳遞的數(shù)據(jù)轉(zhuǎn)化成所看到的頁(yè)面臭增。實(shí)現(xiàn)的方式是：數(shù)據(jù)綁定懂酱。二是將視圖(View)轉(zhuǎn)化成模型(Model)，即將所看到的頁(yè)面轉(zhuǎn)化成后端的數(shù)據(jù)誊抛。實(shí)現(xiàn)的方式是：DOM 事件監(jiān)聽(tīng)列牺。這兩個(gè)方向都實(shí)現(xiàn)的，我們稱之為數(shù)據(jù)的雙向綁定拗窃。
ViewModel(視圖模型)是mvvm模式的核心瞎领，它是連接view和model的橋梁;
MVC和MVVM的區(qū)別并不是VM完全取代了C泌辫，只是在MVC的基礎(chǔ)上增加了一層VM，只不過(guò)是弱化了C的概念默刚，ViewModel存在目的在于抽離Controller中展示的業(yè)務(wù)邏輯甥郑，而不是替代Controller，其它視圖操作業(yè)務(wù)等還是應(yīng)該放在Controller中實(shí)現(xiàn)荤西。也就是說(shuō)MVVM實(shí)現(xiàn)的是業(yè)務(wù)邏輯組件的重用澜搅，使開(kāi)發(fā)更高效，結(jié)構(gòu)更清晰邪锌，增加代碼的復(fù)用性勉躺。
vue雙向數(shù)據(jù)綁定的原理是什么
- vue實(shí)現(xiàn)數(shù)據(jù)雙向綁定主要是：采用數(shù)據(jù)劫持結(jié)合發(fā)布者-訂閱者模式的方式，通過(guò)Object.defineProperty（）來(lái)劫持各個(gè)屬性的setter觅丰，getter饵溅，在數(shù)據(jù)變動(dòng)時(shí)發(fā)布消息給訂閱者，觸發(fā)相應(yīng)監(jiān)聽(tīng)回調(diào)妇萄。當(dāng)把一個(gè)普通 Javascript 對(duì)象傳給 Vue 實(shí)例來(lái)作為它的 data 選項(xiàng)時(shí)蜕企，Vue 將遍歷它的屬性，用 Object.defineProperty 將它們轉(zhuǎn)為 getter/setter冠句。用戶看不到 getter/setter轻掩，但是在內(nèi)部它們讓 Vue 追蹤依賴，在屬性被訪問(wèn)和修改時(shí)通知變化懦底。
- vue的數(shù)據(jù)雙向綁定 將MVVM作為數(shù)據(jù)綁定的入口唇牧，整合Observer，Compile和Watcher三者聚唐，通過(guò)Observer來(lái)監(jiān)聽(tīng)自己的model的數(shù)據(jù)變化丐重，通過(guò)Compile來(lái)解析編譯模板指令（vue中是用來(lái)解析 {{}}），最終利用watcher搭起observer和Compile之間的通信橋梁杆查，達(dá)到數(shù)據(jù)變化 —>視圖更新扮惦；視圖交互變化（input）—>數(shù)據(jù)model變更雙向綁定效果。
vuex的作用根灯？
vuex是一個(gè)專門(mén)為vue.js應(yīng)用程序開(kāi)發(fā)的狀態(tài)管理模式
vuex可以幫助我們管理共享狀態(tài)径缅，也就是管理全局變量
vuex的幾個(gè)核心概念：
vuex使用一個(gè)store對(duì)象管理應(yīng)用的狀態(tài)，一個(gè)store包括：state,getter烙肺，mutation,action四個(gè)屬性
- state:state意為'狀態(tài)'纳猪，是vuex狀態(tài)管理的數(shù)據(jù)源
- getter:getter的作用與filters有一些相似，可以將state進(jìn)行過(guò)濾后輸出
- mutation:mutation是vuex中改變state的唯一途徑桃笙，并且只能同步操作
- action:一些對(duì)state的異步操作可以放在action中氏堤，并通過(guò)在action提交mutaion變更狀態(tài)
- module:當(dāng)store對(duì)象過(guò)于龐大時(shí)，可以根據(jù)具體的業(yè)務(wù)需求分為多個(gè)module
我們可以在組件中dispatch()觸發(fā) Action，Action 則會(huì)commit()提交 Mutation鼠锈，Mutaion 會(huì)對(duì) State 進(jìn)行修改闪檬，組件再根據(jù) State 、Getter 渲染頁(yè)面
獲取module中對(duì)應(yīng)屬性的值
this.$store.dispatch('vip/vip', {}, {root: true}) true表示不再當(dāng)前模塊
this.$store.commit('xxx/xxxx',{}) ;
this.$store.getters['xxx/xxx'];
this.$store.state.moduleA.testNum1;
Vue的生命周期 ( 八 + 二 <配合keep-alive標(biāo)簽> )
- beforeCreate (在實(shí)例初始化之前調(diào)用)
beforeCreate() {
console.log('實(shí)例初始化前',this.a);
},
- created (在實(shí)例初始化之后調(diào)用购笆，經(jīng)常用于操作數(shù)據(jù)粗悯，發(fā)起ajax請(qǐng)求)
created() {
console.log('實(shí)例初始化后',this.a);
},
- beforeMount (在掛載開(kāi)始之前被調(diào)用，如果是在服務(wù)器端渲染時(shí)不被調(diào)用,在這個(gè)函數(shù)里同欠，無(wú)法獲取元素)
beforeMount() {
console.log('vue掛載前',this.$refs['box']);
//vue掛載前 undefined
},
- mounted (在掛載后被調(diào)用样傍，也不能在服務(wù)器端渲染時(shí)被調(diào)用,這個(gè)函數(shù)里，是可以獲取元素铺遂，并進(jìn)行操作的)
mounted() {
console.log('vue掛載后',this.$refs['box']);
//vue掛載后 <div id="box">…</div>
},
- beforeUpdate (視圖層數(shù)據(jù)更新前調(diào)用衫哥，發(fā)生在虛擬 DOM 打補(bǔ)丁之前。這里適合在更新之前訪問(wèn)現(xiàn)有的 DOM)
beforeUpdate() {
console.log('視圖更新前',this.$refs.span.innerHTML);
},
- updated (視圖層數(shù)據(jù)更新后調(diào)用)
updated() {
console.log('視圖更新后',this.$refs.span.innerHTML);
},
- beforeDestroy (實(shí)例銷毀之前調(diào)用襟锐，在被銷毀的組件中進(jìn)行調(diào)用,有一些操作撤逢，會(huì)在實(shí)例已經(jīng)銷毀的時(shí)候還在運(yùn)行，這時(shí)候?yàn)榱诵阅芸紤]粮坞，就在這里結(jié)束哪些操作)
beforeDestroy() {
console.log('實(shí)例銷毀前');
},
- destroyed( 實(shí)例銷毀后調(diào)用蚊荣。)
destroyed() {
console.log('實(shí)例銷毀后');
},
activated和deactivated配合keep-alive標(biāo)簽使用
<button @click='flag =! flag' ref="flag">點(diǎn)擊銷毀</button>
<keep-alive>
<cmpsize v-if='flag'></cmpsize>
</keep-alive>
- activated(用beforeDestroy和destroyed的話在銷毀后再次出現(xiàn)的話,就太浪費(fèi)性能了===> 所以實(shí)例被激活時(shí)使用，用于重復(fù)激活一個(gè)實(shí)例的時(shí)候)
activated(){
console.log('實(shí)例被激活時(shí)');
},
- deactivated(實(shí)例沒(méi)有被激活時(shí)莫杈，)
dactivated(){
console.log('實(shí)例沒(méi)有被激活時(shí)');
},
vue路由的鉤子函數(shù)
都是3個(gè)參數(shù)to妇押，from，next：
to：route即將進(jìn)入的目標(biāo)路由對(duì)象姓迅，
from：route當(dāng)前導(dǎo)航正要離開(kāi)的路由
next：function一定要調(diào)用該方法resolve這個(gè)鉤子。執(zhí)行效果依賴next方法的調(diào)用參數(shù)俊马《〈妫可以控制網(wǎng)頁(yè)的跳轉(zhuǎn)。
- 全局路由鉤子 : router.beforeEach(to柴我，from解寝，next); router.afterEach(to，from艘儒，next)
- 路由表里 : brfortEnter(to聋伦，from，next)
- 組件內(nèi) : brfortRouteEnter(to界睁，from觉增，next) ;beforeRouteUpdate(to，from翻斟，next); brfortRouteLeave(to逾礁，from，next);
vue組件之間的傳遞
- 父級(jí)傳遞子級(jí)：
首先在子組件上加一個(gè)v-bind:自定義屬性,等于父級(jí)的數(shù)據(jù)访惜，子組件通過(guò)props方法接收數(shù)據(jù)- 子級(jí)傳遞父級(jí)：
在子組件內(nèi)部使用$emit輸出一個(gè)自定義事件嘹履，this.$emit('自定義事件名',參數(shù))
在使用子組件時(shí)標(biāo)簽上綁定這個(gè)自定義事件腻扇，并且傳入父級(jí)的“事件”處理函數(shù)- vuex 數(shù)據(jù)共享
- eventBus 事件總線
vue中computed和watch的區(qū)別
computed能夠監(jiān)聽(tīng)vue數(shù)據(jù)上的變化，頁(yè)面上來(lái)就執(zhí)行一次砾嫉，每改變一次數(shù)據(jù)就又觸發(fā)幼苛，在操作數(shù)據(jù)的時(shí)候，會(huì)派生出另一個(gè)事情
watch當(dāng)指定數(shù)據(jù)發(fā)生變化時(shí)候觸發(fā)焕刮。一開(kāi)始不會(huì)觸發(fā)舶沿，只有指定的數(shù)據(jù)發(fā)生變化就又觸發(fā)一次
watch可以deep深度添加，computed不可以
對(duì)vue中nextTick的理解
vue中nextTick可以拿到更新后的DOM元素
如果在mounted下不能準(zhǔn)確拿到DOM元素济锄，可以使用nextTick
在Vue生命周期的created()鉤子函數(shù)進(jìn)行的DOM操作一定要放在Vue.nextTick()的回調(diào)函數(shù)中
渲染項(xiàng)目列表時(shí)暑椰，“key” 屬性的作用和重要性是什么？
key 的作用主要是 為了實(shí)現(xiàn)高效的更新虛擬 DOM荐绝，提高diff算法性能一汽。其原理是vue在patch的過(guò)程中通過(guò)key可以精準(zhǔn)的判斷兩個(gè)節(jié)點(diǎn)是否是同一個(gè)，從而避免頻繁的更新元素低滩，使得整個(gè)patch過(guò)程更加高效召夹，減少DOM操作量，提高性能 , 不用的話會(huì)有影藏bug.
