vue面試題整理

一:什麼是MVVMcss

MVVM是是Model-View-ViewModel的縮寫,Model表明數據模型,定義數據操做的業務邏輯,View表明視圖層,負責將數據模型渲染到頁面上,ViewModel經過雙向綁定把View和Model進行同步交互,不須要手動操做DOM的一種設計思想。vue

二:MVVM和MVC區別?和其餘框架(jquery)區別?那些場景適用?node

MVVM和MVC都是一種設計思想,主要就是MVC中的Controller演變成ViewModel,,MVVM主要經過數據來顯示視圖層而不是操做節點,解決了MVC中大量的DOM操做使頁面渲染性能下降,加載速度慢,影響用戶體驗問題。主要用於數據操做比較多的場景。react

三:Vue的優缺點是什麼jquery

優勢:低耦合,可重用性,獨立開發,可測試,漸進式webpack

缺點:不利於SEO,社區維護力度不強,相比還不夠成熟ios

三:組件之間傳值es6

父向子傳值:屬性傳值,父組件經過給子組件標籤上定義屬性,子組件經過props方法接收數據;web

子向父傳值:事件傳值,子組件經過$emit(‘自定義事件名’,值),父組件經過子組件上的@自定義事件名=「函數」接收vuex

非父子組件傳值:全局定義bus,var bus=new Vue() ; 發送者, bus.$emit(‘自定義名’,值) ;接受者,bus.$on(‘自定義名’,(值)=>{})

四:路由之間傳參

路由字典中:routes={path:’/detail/:id’,component:Detail}

標籤中:<router-link :to=」‘/detail/’+item.id 」>

Js中:this.$route.params.id

五:axios的特色和使用

特色:基於promise的Http庫,支持promise的全部API,用來請求和響應數據的,並且對響應回來的數據自動轉化爲json類型,安全性較高,客戶端支持防護XRSF(跨站請求僞造),默認不攜帶cookie;

使用:下載包後引入 import axios from ‘axios’ , 讓其攜帶cookie ,axios.defaults.withCredentials=true, 而後添加到prototype中,Vue.prototype.$axios=axios ,組建中不用引入直接使用this.$axios.get(url,{params:{id:1}})。

六:Vuex是什麼?怎麼使用?用於哪些場景?

Vuex是框架中狀態管理;新建目錄store...export,而後main.js引入store再注入到vue實例中;用於購物車,登陸狀態,單頁應用等。

七:Vuex有哪幾種屬性?

五種:state,action,mutation,getter,module

State:數據源存放地,數據是響應式的

Action: 邏輯處理,提交的是mutation,包含任意異步操做

Mutation: 修改state裏的公共數據

Getter: 至關於計算屬性,能夠複用,可緩存

Module: 模塊化

八:Vuex取值

This.$store.state.city

This.$store.commit(‘getData’)

this.$store.dispath(‘getData’)

This.$store.getters.getData

九:不使用vuex會帶來什麼問題?

可維護性降低,可讀性降低,增長耦合

十:v-show和v-if指令的共同點和不一樣點

V-show指令是經過修改元素的display的css樣式使其顯示隱藏

V-if指令是銷燬和重建DOM達到讓元素顯示隱藏

十一:如何讓css只在當前組件中起做用?

將當前組件的<style>修改成<style scoped>

十二:<keep-alive></keep-alive>的做用是什麼,如何使用?

包裹動態組件時,會緩存不活動的組件實例,主要用於保留組件狀態或避免從新渲染;

使用:簡單頁面時

緩存:  <keep-alive include=」組件名」></keep-alive>

不緩存:<keep-alive exclude=」組件名」></keep-alive>

使用:複雜項目時

路由字典中定義{path:’/detail’,meta:{keepAlive:false/true}} 是否緩存

根目錄中:

<keep-alive><router-view v-if=」$route.meta.keepAlive」></router-view></keep-alive>

<keep-alive><router-view v-if=」 ! $route.meta.keepAlive」></router-view></keep-alive>

 

十三:Vue數據雙向綁定原理

Vue數據雙向綁定是經過數據劫持結合發佈者-訂閱者模式方式來實現的,語法主要有{{}}和v-model。首先用遞歸方法遍歷全部的屬性值,再用Object.defineProperty()給屬性綁定getter和setter方法添加一個observe(val)監聽器對數據進行劫持監聽;而後建立一個訂閱器來在getter裏收集訂閱者並建立和綁定watcher,若是數據變化,訂閱者就會執行本身對應的更新函數;watcher就是在自身實例化的時候往訂閱器裏添加本身,自身必須有一個update的數據,是監聽器和模板渲染的通訊橋樑;最後建立解析模板指令compile,替換數據,初始化視圖。最終observer來監聽本身的model數據變化經過compile解析編譯模板指令,利用watcher搭起observer和compile之間的通訊橋樑,達到數據變化->視圖更新雙向綁定效果。

十四:Vue生命週期

vue生命週期就是從開始建立,初始化數據,編譯模板,掛載DOM,渲染->更新->渲染,銷燬等一系列過程。生命週期鉤子以下:

組件實例週期:

BeforeCreate:實例初始化後,沒法訪問方法和數據;

Created:實例建立完成,可訪問數據和方法,注意,假若有某些數據必須獲取才容許進入頁面的話,並不適合;

beforeMonut:掛載DOM以前

Mounted :el被新建立的vm.$el替換,可獲取dom,改變data,注意,beforeRouterEnter的next的鉤子比mountend觸發靠後;

beforeUpdate:數據更新時調用,發生在虛擬DOM從新渲染前;

Updated:數據更改後,能夠執行依賴於DOM的操做,注意,應該避免在此期間更改狀態,可能會致使更新無限循環;

beforeDestroy:實例銷燬以前,這一步還能夠用this獲取實例,通常在這一步作重置操做,好比清定時器監聽dom事件;

Destroyed:實例銷燬後,會解除綁定,移除監聽。

十五:路由鉤子

全局路由鉤子:

Router.beforeEach((to,from,next)=>{... next()})

注意:必定要調用next(),不然頁面卡在那,通常用於對路由跳轉前進行攔截,參數:

To:即將要進入的目標路由對象    From:當前導航正要離開的路由

Next():跳轉下一個頁面      next(‘/path’):跳轉指定路由

Next(false):返回原來頁面  next((vm)=>{}):且在beforeRouterEnter用

好比根據登陸狀態跳轉頁面判斷(to.name->name是路由名)

Router.beforeEach(function(to,from,next){if(to.name==’login’){..}next();})

Router.afterEach((to,from)=>{}) 跳轉後調用沒有next方法

組件路有鉤子:

beforeRouteEnter(to,from,next){next(vm=>{...})} 路由跳轉時

注意:此鉤子在beforeCreate以前執行,可是next在組件mounted週期以後,沒法直接調用this訪問組件實例,可用next訪問vm實例,修改數據;

beforeRouteLeave(to,from,next){...next()} 離開路由時

注意:能夠直接訪問this,next不可回調

beforeRouteUpdate 路由切換時

十六:指令週期

Bind:一次初始化調用          inserted:被綁定元素插入父節點調用

Update:模板更新調用         unbind:指令與元素解綁時

Vue.nextTick:在dom更新後執行,通常用於dom操做

Vue.$nextTick:一直到真實的dom渲染結束後執行

Ex:created(){this.$nextTick(()=>{...})}

十七:生命週期的做用是什麼?

它的生命週期有多個事件鉤子,讓咱們在控制整個Vue實例的過程時更容易造成好的邏輯。

十八:第一次加載會觸發哪幾個鉤子?

會觸發beforeCreate , created ,beforeMount ,mounted

十九:說出至少4種vue當中的指令和用法?

V-if:判斷是否隱藏         v-for:數據循環                v-bind:綁定屬性

v-model:雙向綁定          v-is:動態組件特殊特性 v-on:事件綁定

二十:vue-loader是什麼?用途有哪些?

是解析vue文件的一個加載器,用途是js能夠寫es6,style樣式能夠scss或less,template能夠加jade

二十一:active-class是那個組件屬性?

Vue-router模塊的router-link組件,設置激活時樣式

二十二:vue中使用插件的步驟是什麼?

Import ... from ... 引入插件,Vue.use(...)全局註冊

二十三:爲何使用key?

當有相同標籤名和元素切換時,須要經過key特性設置惟一的值來標記讓vue區分它們,不然vue爲了效率只會替換相同標籤內部的內容

二十三:爲何避免v-if和v-for用在一塊兒?

當vue處理指令時,v-for比v-if具備更高的優先級,經過v-if移動到容器的元素,不會在重複遍歷列表中的每一個值,取而代之的是,咱們只檢查它一次,且不會v-if爲否的時候運算v-for

二十四:VNode是什麼?虛擬DOM是什麼?

Vue在頁面上渲染的節點,及其子節點稱爲虛擬節點,簡稱VNode;虛擬DOM時由組件樹創建起來的整個VNode樹的稱呼

二十五:scss是什麼?有哪些特性?怎麼使用?

是css的預編譯,特新有能夠用變量($變量名=值),能夠用混合器(),能夠嵌套,能夠繼承,能夠運算,安裝先裝css-loader,node-loader,sass-loader,在webpack.base配置,style標籤上加lang=」scss」

二十五:Vue router如何實現跳轉

<router-link></router-link>   router.push(‘/’)      router.go(0)

二十六:vue router跳轉和location.href有什麼區別?

Router是hash改變;location.href是頁面跳轉,刷新頁面

 二十七:v-model原理

<input v-model="sth">

==至關於經過oninput(用戶輸入時觸發)把表單值給到變量

<input v-bind:value="sth" v-on:input="sth=$event.target.value">

二十八:vue的template的理解

經過compile編譯template生成AST語法樹,AST語法樹通過generate轉化爲render function字符串後返回虛擬DOM節點(Vnode)的過程

二十九:vue和react區別

相同點:

都鼓勵組件化,都有’props’的概念,都有本身的構建工具,Reat與Vue只有框架的骨架,其餘的功能如路由、狀態管理等是框架分離的組件。

不一樣點:

React:數據流單向,語法—JSX,在React中你須要使用setState()方法去更新狀態

Vue:數據雙向綁定,語法--HTML,state對象並非必須的,數據由data屬性在Vue對象中進行管理。適用於小型應用,但對於對於大型應用而言不太適合。

三十:單頁面和多頁面的區別

單頁面:

整個項目中只有一個完整的HTML頁面,其它"頁面"只是一段HTML片段而已

優: 請求少

缺: 不利於搜索引擎優化

頁面跳轉本質:把當前DOM樹中某個DIV刪除,下載並掛載另外一個div片段

多頁面:

項目中有多個獨立的完整的HTML頁面

缺: 請求次數多,效率低

頁面跳轉本質:

刪除舊的DOM樹,從新下載新的DOM樹

 三十一:Vue的SPA如何優化加載速度

減小入口文件體積,靜態資源本地緩存,開啓Gzip壓縮,使用SSR,nuxt.js

三十二:Axios發送post請求

Import qs from ‘qs’

Var data=qs.stringify({

Number : ’1’

})

Axios.post(url,data).then()

VUE如何自定義屬性

全局自定義:

Vue.directive(‘focus’,{

         Inserted:function(el){

                   el.focus()  //聚焦函數

}       

})

三十三:組件自定義

directive{

         inserted:function(el){

                   el.focus() 

}

}

三十四:Vue和vuex 有什麼區別

Vue是框架,vuex是插件,vuex是專門爲vue應用程序開發的狀態管理模式

三十五:.Vuex中actions和mutations的區別

Mutations的更改是同步更改,用於用戶執行直接數據更改,this.$store.commit(‘名’)觸發

Actions的更改是異步操做,用於須要與後端交互的數據更改,this.$store.dispath(「名」)觸發

注意:

1):定義actions方法建立一個更改函數時,這個函數必須攜帶一個context參數,用於觸發mutations方法,context.commit(‘修改函數名’ , ’異步請求值’);

2):mutations第一個參數必須傳入state,第二個參數是新值

相關文章
相關標籤/搜索