一:什麼是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,第二個參數是新值