vue常見面試題總結
- 列舉資料繫結
說出至少4種vue當中的指令和它的用法?
v-if:判斷是否隱藏;v-for:資料迴圈出來;v-bind:class:繫結一個屬性;v-model:實現雙向繫結
資料繫結最基礎的形式是文字插值,使用 "Mustache" 語法(雙大括號)
v-model 主要用在input 、select 、text 、checkbox、radio等表單控制元件元素上的雙向資料繫結
v-show 根據表示式的值來顯示或隱藏HTML元素,簡單的基於CSS的切換
v-if 根據表示式的值在dom中生成或移除一個元素
v-else 必須跟著
v-for 對陣列或物件進行渲染
v-bind 操作元素的 class 列表和內聯樣式
v-on 繫結事件監聽器
<!-- 阻止單擊事件繼續傳播 --> <a v-on:click.stop="doThis"></a>
<!-- 提交事件不再過載頁面 --> <form v-on:submit.prevent="onSubmit"></form>
<!-- 修飾符可以串聯 --> <a v-on:click.stop.prevent="doThat"></a>
<!-- 只有修飾符 --> <form v-on:submit.prevent></form>
2、active-class是哪個元件的屬性?
vue-router模組的router-link元件。
3、巢狀路由怎麼定義?
在實際專案中我們會碰到多層巢狀的元件組合而成,但是我們如何實現巢狀路由呢?因此我們需要在
index.html,只有一個路由出口
- <div id="app">
- <!-- router-view 路由出口, 路由匹配到的元件將渲染在這裡 -->
- <router-view></router-view>
- </div>
main.js,路由的重定向,就會在頁面一載入的時候,就會將home元件顯示出來,因為重定向指向了home元件,redirect的指向與path的必須一致。children裡面是子路由,當然子路由裡面還可以繼續巢狀子路由。
- import Vue from 'vue'
- import VueRouter from 'vue-router'
- Vue.use(VueRouter)
- //引入兩個元件
- import home from "./home.vue"
- import game from "./game.vue"
- //定義路由
- const routes = [
- { path: "/", redirect: "/home" },//重定向,指向了home元件
- {
- path: "/home", component: home,
- children: [
- { path: "/home/game", component: game }
- ]
- }
- ]
- //建立路由例項
- const router = new VueRouter({routes})
- new Vue({
- el: '#app',
- data: {
- },
- methods: {
- },
- router
- })
home.vue,點選顯示就會將子路由顯示在出來,子路由的出口必須在父路由裡面,否則子路由無法顯示。
- <template>
- <div>
- <h3>首頁</h3>
- <router-link to="/home/game">
- <button>顯示<tton>
- </router-link>
- <router-view></router-view>
- </div>
- </template>
game.vue
- <template>
- <h3>遊戲</h3>
- </template>
4、怎麼定義vue-router的動態路由?怎麼獲取傳過來的動態引數?
在router目錄下的index.js檔案中,對path屬性加上/:id。
使用router物件的params.id。
5、vue-router有哪幾種導航鉤子?
第一種:是全域性導航鉤子:router.beforeEach(to,from,next),作用:跳轉前進行判斷攔截。
第二種:元件內的鉤子
第三種:單獨路由獨享元件
導航鉤子有哪些?它們有哪些引數?
導航鉤子有:
a/全域性鉤子和元件內獨享的鉤子。b/beforeRouteEnter、afterEnter、beforeRouterUpdate、beforeRouteLeave
引數:
有to(去的那個路由)、from(離開的路由)、next(一定要用這個函式才能去到下一個路由,如果不用就攔截)最常用就這幾種
6、scss是什麼?在vue.cli中的安裝使用步驟是?有哪幾大特性?
css的預編譯。
使用步驟:
第一步:用npm 下三個loader(sass-loader、css-loader、node-sass)
第二步:在build目錄找到webpack.base.config.js,在那個extends屬性中加一個拓展.scss
第三步:還是在同一個檔案,配置一個module屬性
第四步:然後在元件的style標籤加上lang屬性 ,例如:lang=”scss”
有哪幾大特性:
1、可以用變數,例如($變數名稱=值);
2、可以用混合器,例如()
3、可以巢狀
7、mint-ui是什麼?怎麼使用?說出至少三個元件使用方法?
基於vue的前端元件庫。npm安裝,然後import樣式和js,vue.use(mintUi)全域性引入。在單個元件區域性引入:import {Toast} from ‘mint-ui’。
元件一:Toast(‘登入成功’);
元件二:mint-header;
元件三:mint-swiper
8、v-model是什麼?怎麼使用? vue中標籤怎麼繫結事件?
可以實現雙向繫結,指令(v-class、v-for、v-if、v-show、v-on)。vue的model層的data屬性。繫結事件:<input @click=doLog()/>
9、iframe的優缺點?
iframe也稱作嵌入式框架,嵌入式框架和框架網頁類似,它可以把一個網頁的框架和內容嵌入在現有的網頁中。
優點:
- 解決載入緩慢的第三方內容如圖示和廣告等的載入問題
- Security sandbox
- 並行載入指令碼
- 方便製作導航欄
缺點:
- iframe會阻塞主頁面的Onload事件
- 即時內容為空,載入也需要時間
- 沒有語意
10、簡述一下Sass、Less,且說明區別?
他們是動態的樣式語言,是CSS前處理器,CSS上的一種抽象層。他們是一種特殊的語法/語言而編譯成CSS。
變數符不一樣,less是@,而Sass是$;
Sass支援條件語句,可以使用if{}else{},for{}迴圈等等。而Less不支援;
Sass是基於Ruby的,是在服務端處理的,而Less是需要引入less.js來處理Less程式碼輸出Css到瀏覽器
11、axios是什麼?怎麼使用?描述使用它實現登入功能的流程?
請求後臺資源的模組。npm install axios -S裝好,然後傳送的是跨域,需在配置檔案中config/index.js進行設定。後臺如果是Tp5則定義一個資源路由。js中使用import進來,然後.get或.post。返回在.then函式中如果成功,失敗則是在.catch函式中
12、axios+tp5進階中,呼叫axios.post(‘api/user’)是進行的什麼操作?axios.put(‘api/user/8′)呢?
跨域,新增使用者操作,更新操作。
13、vuex是什麼?怎麼使用?哪種功能場景使用它?
vue框架中狀態管理。在main.js引入store,注入。新建了一個目錄store,….. export 。場景有:單頁應用中,元件之間的狀態。音樂播放、登入狀態、加入購物車
14、mvvm框架是什麼?它和其它框架(jquery)的區別是什麼?哪些場景適合?
一個model+view+viewModel框架,資料模型model,viewModel連線兩個
區別:vue資料驅動,通過資料來顯示檢視層而不是節點操作。
場景:資料操作比較多的場景,更加便捷
15、自定義指令(v-check、v-focus)的方法有哪些?它有哪些鉤子函式?還有哪些鉤子函式引數?
全域性定義指令:在vue物件的directive方法裡面有兩個引數,一個是指令名稱,另外一個是函式。元件內定義指令:directives
鉤子函式:bind(繫結事件觸發)、inserted(節點插入的時候觸發)、update(元件內相關更新)
鉤子函式引數:el、binding
16、vue-router是什麼?它有哪些元件?
vue用來寫路由一個外掛。router-link、router-view
17、Vue的雙向資料繫結原理是什麼?
vue.js 是採用資料劫持結合釋出者-訂閱者模式的方式,通過Object.defineProperty()來劫持各個屬性的setter,getter,在資料變動時釋出訊息給訂閱者,觸發相應的監聽回撥。
具體步驟:
第一步:需要observe的資料物件進行遞迴遍歷,包括子屬性物件的屬性,都加上 setter和getter
這樣的話,給這個物件的某個值賦值,就會觸發setter,那麼就能監聽到了資料變化
第二步:compile解析模板指令,將模板中的變數替換成資料,然後初始化渲染頁面檢視,並將每個指令對應的節點繫結更新函式,新增監聽資料的訂閱者,一旦資料有變動,收到通知,更新檢視
第三步:Watcher訂閱者是Observer和Compile之間通訊的橋樑,主要做的事情是:
1、在自身例項化時往屬性訂閱器(dep)裡面新增自己
2、自身必須有一個update()方法
3、待屬性變動dep.notice()通知時,能呼叫自身的update()方法,並觸發Compile中繫結的回撥,則功成身退。
第四步:MVVM作為資料繫結的入口,整合Observer、Compile和Watcher三者,通過Observer來監聽自己的model資料變化,通過Compile來解析編譯模板指令,最終利用Watcher搭起Observer和Compile之間的通訊橋樑,達到資料變化 -> 檢視更新;檢視互動變化(input) -> 資料model變更的雙向繫結效果。
18、請詳細說下你對vue生命週期的理解?
總共分為8個階段建立前/後,載入前/後,更新前/後,銷燬前/後
- 建立前/後: 在beforeCreated階段,vue例項的掛載元素$el和資料物件data都為undefined,還未初始化。在created階段,vue例項的資料物件data有了,$el還沒有。
- 載入前/後:在beforeMount階段,vue例項的$el和data都初始化了,但還是掛載之前為虛擬的dom節點,data.message還未替換。在mounted階段,vue例項掛載完成,data.message成功渲染。
- 更新前/後:當data變化時,會觸發beforeUpdate和updated方法。
- 銷燬前/後:在執行destroy方法後,對data的改變不會再觸發周期函式,說明此時vue例項已經解除了事件監聽以及和dom的繫結,但是dom結構依然存在
19、請說下封裝 vue 元件的過程?
首先,元件可以提升整個專案的開發效率。能夠把頁面抽象成多個相對獨立的模組,解決了我們傳統專案開發:效率低、難維護、複用性等問題。
然後,使用Vue.extend方法建立一個元件,然後使用Vue.component方法註冊元件。子元件需要資料,可以在props中接受定義。而子元件修改好資料後,想把資料傳遞給父元件。可以採用emit方法。
20、你是怎麼認識vuex的?
vuex可以理解為一種開發模式或框架。比如PHP有thinkphp,java有spring等。
通過狀態(資料來源)集中管理驅動元件的變化(好比spring的IOC容器對bean進行集中管理)。
應用級的狀態集中放在store中; 改變狀態的方式是提交mutations,這是個同步的事物; 非同步邏輯應該封裝在action中。
21、vue-loader是什麼?使用它的用途有哪些?
解析.vue檔案的一個載入器,跟template/js/style轉換成js模組。
用途:js可以寫es6、style樣式可以scss或less、template可以加jade等
22、請說出vue.cli專案中src目錄每個資料夾和檔案的用法?
assets資料夾是放靜態資源;components是放元件;router是定義路由相關的配置;view檢視;app.vue是一個應用主元件;main.js是入口檔案
23、vue.cli中怎樣使用自定義的元件?有遇到過哪些問題嗎?
第一步:在components目錄新建你的元件檔案(smithButton.vue),script一定要export default {
第二步:在需要用的頁面(元件)中匯入:import smithButton from ‘../components/smithButton.vue’
第三步:注入到vue的子元件的components屬性上面,components:{smithButton}
第四步:在template檢視view中使用,<smith-button> </smith-button>
問題有:smithButton命名,使用的時候則smith-button。
24、聊聊你對Vue.js的template編譯的理解?
簡而言之,就是先轉化成AST樹,再得到的render函式返回VNode(Vue的虛擬DOM節點)
詳情步驟:
首先,通過compile編譯器把template編譯成AST語法樹(abstract syntax tree 即 原始碼的抽象語法結構的樹狀表現形式),compile是createCompiler的返回值,createCompiler是用以建立編譯器的。另外compile還負責合併option。
然後,AST會經過generate(將AST語法樹轉化成render funtion字串的過程)得到render函式,render的返回值是VNode,VNode是Vue的虛擬DOM節點,裡面有(標籤名、子節點、文字等等)
25、vue的歷史記錄
history 記錄中向前或者後退多少步
26、vuejs與angularjs以及react的區別?
1.與AngularJS的區別
相同點:
都支援指令:內建指令和自定義指令。
都支援過濾器:內建過濾器和自定義過濾器。
都支援雙向資料繫結。
都不支援低端瀏覽器。
不同點:
1.AngularJS的學習成本高,比如增加了Dependency Injection特性,而Vue.js本身提供的API都比較簡單、直觀。
2.在效能上,AngularJS依賴對資料做髒檢查,所以Watcher越多越慢。
Vue.js使用基於依賴追蹤的觀察並且使用非同步佇列更新。所有的資料都是獨立觸發的。
對於龐大的應用來說,這個優化差異還是比較明顯的。
2.與React的區別
相同點:
React採用特殊的JSX語法,Vue.js在元件開發中也推崇編寫.vue特殊檔案格式,對檔案內容都有一些約定,兩者都需要編譯後使用。
中心思想相同:一切都是元件,元件例項之間可以巢狀。
都提供合理的鉤子函式,可以讓開發者定製化地去處理需求。
都不內建列數AJAX,Route等功能到核心包,而是以外掛的方式載入。
在元件開發中都支援mixins的特性。
不同點:
React依賴Virtual DOM,而Vue.js使用的是DOM模板。React採用的Virtual DOM會對渲染出來的結果做髒檢查。
Vue.js在模板中提供了指令,過濾器等,可以非常方便,快捷地操作DOM。
26、vue生命週期面試題
什麼是vue生命週期?
Vue 例項從建立到銷燬的過程,就是生命週期。也就是從開始建立、初始化資料、編譯模板、掛載Dom→渲染、更新→渲染、解除安裝等一系列過程,我們稱這是 Vue 的生命週期。
vue生命週期的作用是什麼?
它的生命週期中有多個事件鉤子,讓我們在控制整個Vue例項的過程時更容易形成好的邏輯。
vue生命週期總共有幾個階段?
它可以總共分為8個階段:建立前/後, 載入前/後,更新前/後,銷燬前/銷燬後
第一次頁面載入會觸發哪幾個鉤子?
第一次頁面載入時會觸發 beforeCreate, created, beforeMount, mounted 這幾個鉤子
DOM 渲染在 哪個週期中就已經完成?
DOM 渲染在 mounted 中就已經完成了
簡單描述每個週期具體適合哪些場景?
生命週期鉤子的一些使用方法: beforecreate : 可以在這加個loading事件,在載入例項時觸發 created : 初始化完成時的事件寫在這裡,如在這結束loading事件,非同步請求也適宜在這裡呼叫 mounted : 掛載元素,獲取到DOM節點 updated : 如果對資料統一處理,在這裡寫上相應函式 beforeDestroy : 可以做一個確認停止事件的確認框 nextTick : 更新資料後立即操作dom
27、arguments是一個偽陣列,沒有遍歷介面,不能遍歷
28、cancas和SVG的是什麼以及區別
SVG
SVG 是一種使用 XML 描述 2D 圖形的語言。
SVG 基於 XML,這意味著 SVG DOM 中的每個元素都是可用的。您可以為某個元素附加 JavaScript 事件處理器。
在 SVG 中,每個被繪製的圖形均被視為物件。如果 SVG 物件的屬性發生變化,那麼瀏覽器能夠自動重現圖形。
Canvas
Canvas 通過 JavaScript 來繪製 2D 圖形。
Canvas 是逐畫素進行渲染的。
在 canvas 中,一旦圖形被繪製完成,它就不會繼續得到瀏覽器的關注。如果其位置發生變化,那麼整個場景也需要重新繪製,包括任何或許已被圖形覆蓋的物件。
Canvas 與 SVG 的比較
Canvas
- 依賴解析度
- 不支援事件處理器
- 弱的文字渲染能力
- 能夠以 .png 或 .jpg 格式儲存結果影象
- 最適合影象密集型的遊戲,其中的許多物件會被頻繁重繪
SVG
- 不依賴解析度
- 支援事件處理器
- 最適合帶有大型渲染區域的應用程式(比如谷歌地圖)
- 複雜度高會減慢渲染速度(任何過度使用 DOM 的應用都不快)
- 不適合遊戲應用
1、vuex有哪幾種屬性?
答:有五種,分別是 State、 Getter、Mutation 、Action、 Module
2、vuex的State特性是?
一、Vuex就是一個倉庫,倉庫裡面放了很多物件。其中state就是資料來源存放地,對應於與一般Vue物件裡面的data
二、state裡面存放的資料是響應式的,Vue元件從store中讀取資料,若是store中的資料發生改變,依賴這個資料的元件也會發生更新
三、它通過mapState把全域性的 state 和 getters 對映到當前元件的 computed 計算屬性中
3、vuex的Getter特性是?
答:一、getters 可以對State進行計算操作,它就是Store的計算屬性
二、 雖然在元件內也可以做計算屬性,但是getters 可以在多元件之間複用
三、 如果一個狀態只在一個元件內使用,是可以不用getters
4、vuex的Mutation特性是?
答:一、Action 類似於 mutation,不同在於:
二、Action 提交的是 mutation,而不是直接變更狀態。
三、Action 可以包含任意非同步操作
5、Vue.js中ajax請求程式碼應該寫在元件的methods中還是vuex的actions中?
答:一、如果請求來的資料是不是要被其他元件公用,僅僅在請求的元件內使用,就不需要放入vuex 的state裡。
二、如果被其他地方複用,這個很大機率上是需要的,如果需要,請將請求放入action裡,方便複用,幷包裝成promise返回,在呼叫處用async await處理返回的資料。如果不要複用這個請求,那麼直接寫在vue檔案裡很方便。
6、不用Vuex會帶來什麼問題?
一、可維護性會下降,你要想修改資料,你得維護三個地方
二、可讀性會下降,因為一個元件裡的資料,你根本就看不出來是從哪來的
三、增加耦合,大量的上傳派發,會讓耦合性大大的增加,本來Vue用Component就是為了減少耦合,現在這麼用,和元件化的初衷相背。
但兄弟元件有大量通訊的,建議一定要用,不管大專案和小專案,因為這樣會省很多事
vuex的優勢
1 狀態管理工具 核心是響應式的做到資料管理, 一個頁面發生資料變化。動態的改變對應的頁面