1:說明一下使用vue對項目開發的好處
vue框架采用了漸進式開發的原理,就是你項目需要什么,就導入什么,可以用在大項目上,在個人項目上也有很好的體驗。組件化開發,使界面復用性得到提高,spa技術,只有一個html界面,變化效果通過路由組件的切換產生,不會導致界面的刷新。雙向綁定技術,使我們可以將代碼集中在邏輯上,而不是dom節點的操作上,提高了性能
2:講解一下mvvm模式的基本了解
mvvm是一種設計模式,講究的是由數據和界面變化的雙向綁定,其中m代表model數據 v代表視圖 vm viewmodel代表數據和視圖之間的中間邏輯操作
3:數據雙向綁定的基本原理
首先,我們通過observe中的defineProperty方法為每一個data添加set和get方法,每一個data創建一個dep發布者,里面存放所有的訂閱者watcher(存放著使用該data的節點信息,每一個使用到data的元素節點都是一個watcher)。當界面的set屬性被調用的時候,我們通過dep輪訓的去調用其中所有的訂閱者watcher,從而達到雙向綁定的過程
4:虛擬dom是什么,為什么要引入虛擬dom
虛擬dom就是在真實dom之前通過js代碼模擬出來的一個虛擬dom樹結構,每當set調用時,我們不在直接去操作真實的dom結構,而是通過新虛擬dom和舊虛擬dom樹之間進行比較后,得到最優化的方法,最后在得到真實dom去渲染界面
5:diff算法的基本過程,為什么需要在節點上添加key的操作
diff算法首先會判斷節點的key和節點類型是否相同,如果不同,則直接
6:講解一下computed和watch的區別
computed是計算屬性,一定要return,并且沒有參數傳遞,watch有參數傳遞,并且不用return 渲染順序
7:vue有哪幾個生命周期,不同的生命周期最適合分別適合做哪些操作
創建前后,掛載前后,銷毀前后。創建data 掛載dom操作
8:初次渲染界面觸發的生命周期有哪些,如果引入update會產生什么變化
創建前后,掛載前后,引入update會添加updated和unupdated。退出界面并不會進行destory操作
9:$nextTick的作用
微任務,在所有同步動作做完之后進行的操作
10:如何獲取路由傳過來的值
this.$route.params,路由有query和params
11:路由有哪幾種導航鉤子
全局導航鉤子,組件導航鉤子
12;路由導航的兩種模式,他們倆的區別
hash和history,底層不同,#問題,存在請求不同
13:vuex有哪幾種屬性,分別是用來干什么的
mount getter modules action
14:.native的作用
.native 可以在父組件使用子組件的情況下,自定義的創造出一個事件,不被子組件當成自定義事件
15:事件冒泡的過程,在vue中如何防止事件冒泡
在父節點和子節點擁有同一個動作事件時,當子組件觸發一個事件,該事件會像跑跑一樣向上傳遞,使得父節點也會觸發該事件的回調函數,我們在vue中可以通過.stop的方式進行防止事件冒泡
16:路由組件和普通組件的區別和使用場景
路由組件是指能夠通過路由跳轉的組件,一般路由組件里面包裹著普通組件,普通組件的使用通過定義components的方式進行獲取
17:父子組件之間的通信問題
父傳子通過props進行參數的傳遞,子傳父通過emit和自定義動作的方式進行數據的傳遞
18:為什么v-for里面一般不嵌套v-if v-for和v-if的優先級
在vue2中,v-for的優先級大于v-if,所以會將組件全部渲染出來,然后再交給if進行判斷是否要刪除,這樣子大大浪費了性能
19:vue組件的渲染步驟,compiler和render渲染的區別
在compiler渲染的過程中,會先將template轉換成抽象語法樹,在被編譯成render函數,由這個函數構建出一個虛擬dom,由新老虛擬dom通過diff算法進行對比,找出最優化的變化方式去渲染整個界面。而render函數shenglue了前兩個步驟,直接從render函數開始進行界面的渲染。之所以能跳過是因為render渲染添加了vue-template-complier插件。每當data的屬性觸發了set操作,則會進行render的重新渲染
20:ssr的概念
ssr就是服務器渲染,界面的形成由服務器那邊進行操作,由前端進行渲染,是與vue渲染界面一種完全不同的方式
21:前端渲染的優化
盡量減少http請求的發出采用精靈圖和節流防抖。組件的懶加載使用=》,還有better-sroller中上滑刷新,下滑加載的概念,不將數據一次全部渲染出來,js文件放在最后面,先加載靜態界面。vue keep-active的使用,防止組件的多次重復創建,保證key的唯一性,盡量減少data中的數據
22:v-if和v-show的區別
v-show是調用了display:none來進行元素的顯示或者隱藏,而v-if是操作dom節點的消失或者產生來進行變化
23:ref是什么,有什么作用
標記dom節點