vue面試題（全）

原理篇：

1，computed和watch的區(qū)別

computed 計算屬性 : 依賴其它屬性值,并且 computed 的值有緩存,只有它依賴的屬性值發(fā)生改變,下一次獲取 computed 的值時才會重新計算 computed 的值。

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 對檢測的值沒有要求

watch 偵聽器 : 更多的是「觀察」的作用, 值為復合類型時，需要開啟深度監(jiān)聽deep ，自執(zhí)行一次immdeiate。

?應用場景：

當我們需要進行數(shù)值計算,并且依賴于其它數(shù)據(jù)時,應該使用 computed,因為可以利用 computed 的緩存特性,避免每次獲取值時,都要重新計算。

當我們需要在數(shù)據(jù)變化時執(zhí)行異步或開銷較大的操作時,應該使用 watch,使用 watch 選項允許我們執(zhí)行異步操作 ( 訪問一個 API ),限制我們執(zhí)行該操作的頻率,并在我們得到最終結(jié)果前,設置中間狀態(tài)。這些都是計算屬性無法做到的。

2，為什么在 Vue3.0 采用了 Proxy,拋棄了 Object.defineProperty

Object.defineProperty 本身有一定的監(jiān)控到數(shù)組下標變化的能力,但是在 Vue 中,從性能/體驗的性價比考慮,尤大大就棄用了這個特性(Vue 為什么不能檢測數(shù)組變動 )。為了解決這個問題,經(jīng)過 vue 內(nèi)部處理后可以使用以下幾種方法來監(jiān)聽數(shù)組

push();pop();shift();unshift();splice();sort();reverse();

由于只針對了以上 7 種方法進行了 hack 處理,所以其他數(shù)組的屬性也是檢測不到的,還是具有一定的局限性。

Object.defineProperty 只能劫持對象的屬性,因此我們需要對每個對象的每個屬性進行遍歷。Vue 2.x 里,是通過 遞歸 + 遍歷 data 對象來實現(xiàn)對數(shù)據(jù)的監(jiān)控的,如果屬性值也是對象那么需要深度遍歷,顯然如果能劫持一個完整的對象是才是更好的選擇。
Proxy 可以劫持整個對象,并返回一個新的對象。Proxy 不僅可以代理對象,還可以代理數(shù)組。還可以代理動態(tài)增加的屬性。

3，Vue 中的 key 到底有什么用？

key 是給每一個 vnode 的唯一 id,依靠 key,我們的 diff 操作可以更準確、更快速 (對于簡單列表頁渲染來說 diff 節(jié)點也更快,但會產(chǎn)生一些隱藏的副作用,比如可能不會產(chǎn)生過渡效果,或者在某些節(jié)點有綁定數(shù)據(jù)（表單）狀態(tài)，會出現(xiàn)狀態(tài)錯位。)

diff 算法的過程中,先會進行新舊節(jié)點的首尾交叉對比,當無法匹配的時候會用新節(jié)點的 key 與舊節(jié)點進行比對,從而找到相應舊節(jié)點.

更準確 : 因為帶 key 就不是就地復用了,在 sameNode 函數(shù) a.key === b.key 對比中可以避免就地復用的情況。所以會更加準確,如果不加 key,會導致之前節(jié)點的狀態(tài)被保留下來,會產(chǎn)生一系列的 bug。

更快速 : key 的唯一性可以被 Map 數(shù)據(jù)結(jié)構(gòu)充分利用,相比于遍歷查找的時間復雜度 O(n),Map 的時間復雜度僅僅為 O(1),源碼如下:

4，Vue 組件 data 為什么必須是函數(shù) ?

new Vue()實例中,data 可以直接是一個對象,為什么在 vue 組件中,data 必須是一個函數(shù)呢?

因為組件是可以復用的,JS 里對象是引用關(guān)系,如果組件 data 是一個對象,那么子組件中的 data 屬性值會互相污染,產(chǎn)生副作用。

所以一個組件的 data 選項必須是一個函數(shù),因此每個實例可以維護一份被返回對象的獨立的拷貝。new Vue 的實例是不會被復用的,因此不存在以上問題。

5.vue.cli項目中src目錄每個文件夾和文件的用法？

assets文件夾是放靜態(tài)資源；
components是放組件；
router是定義路由相關(guān)的配置;
view視圖；
app.vue是一個應用主組件；
main.js是入口文件

6.Vue組件之全局組件與局部組件的使用詳解

全局組件

main.js中引入并全局注冊組件

局部組件
具體頁面中引入并聲明組件,template中添加組件

1.?計算屬性和 watch 的區(qū)別？computed 是一個對象時，它有哪些選項？computed 和 methods 有什么區(qū)別？computed 是否能依賴其它組件的數(shù)據(jù)？watch 是一個對象時，它有哪些選項？

答：

計算屬性是自動監(jiān)聽依賴值的變化，從而動態(tài)返回內(nèi)容，監(jiān)聽是一個過程，在監(jiān)聽的值變化時，可以觸發(fā)一個回調(diào)，并做一些事情。
所以區(qū)別來源于用法，只是需要動態(tài)值，那就用計算屬性；需要知道值的改變后執(zhí)行業(yè)務邏輯，才用 watch，用反或混用雖然可行，但都是不正確的用法。

有g(shù)et和set兩個選項

methods是一個方法，它可以接受參數(shù)，而computed不能，computed是可以緩存的，methods不會。

computed可以依賴其他computed，甚至是其他組件的data

watch 配置
handler
deep 是否深度
immeditate 是否立即執(zhí)行

2.?active-class是哪個組件的屬性？嵌套路由怎么定義？怎么定義vue-router的動態(tài)路由？怎么獲取傳過來的動態(tài)參數(shù)？vue-router有哪幾種導航鉤子？

1.??vue-router模塊的router-link組件。

2.??在 VueRouter 的參數(shù)中使用 children 配置

3.?在router目錄下的index.js文件中，對path屬性加上/:id。
4.?使用router對象的params.id。

5．有三種：

第一種全局導航鉤子router.beforeEach(to,from,next)作用跳轉(zhuǎn)前進行判斷攔截。
第二種：組件內(nèi)的鉤子
第三種：單獨路由獨享組件

3.?什么是vue生命周期？vue生命周期的作用是什么？vue生命周期總共有幾個階段？第一次頁面加載會觸發(fā)哪幾個鉤子？DOM 渲染在哪個周期中就已經(jīng)完成？簡單描述每個周期具體適合哪些場景？

1. Vue 實例從創(chuàng)建到銷毀的過程，就是生命周期。也就是從開始創(chuàng)建、初始化數(shù)據(jù)、編譯模板、掛載Dom→渲染、更新→渲染、卸載等一系列過程，我們稱這是 Vue 的生命周期。

2. 它的生命周期中有多個事件鉤子，讓我們在控制整個Vue實例的過程時更容易形成好的邏輯。

3. 它可以總共分為8個階段：創(chuàng)建前/后, 載入前/后,更新前/后,銷毀前/銷毀后

4. 第一次頁面加載時會觸發(fā) beforeCreate, created, beforeMount, mounted 這幾個鉤子

5.?DOM 渲染在 mounted 中就已經(jīng)完成了

6.?生命周期鉤子的一些使用方法： beforecreate : 可以在這加個loading事件，在加載實例時觸發(fā) created : 初始化完成時的事件寫在這里，如在這結(jié)束loading事件，異步請求也適宜在這里調(diào)用 mounted : 掛載元素，獲取到DOM節(jié)點 updated : 如果對數(shù)據(jù)統(tǒng)一處理，在這里寫上相應函數(shù) beforeDestroy : 可以做一個確認停止事件的確認框 nextTick : 更新數(shù)據(jù)后立即操作dom

4.?vue組件的scoped屬性的作用？原理？nextTick的原理？以及優(yōu)點？

作用：在style標簽上添加scoped屬性，以表示它的樣式作用于當下的模塊，很好的實現(xiàn)了樣式私有化的目的

原理：使用 PostCSS 來實現(xiàn)轉(zhuǎn)換，通過給 dom 增加一個動態(tài)屬性，然后 css 選擇器也額外添加對應的屬性來選擇該 dom ，達到該樣式只作用于含有該屬性的 dom，實現(xiàn)組件樣式的模塊

將回調(diào)延遲到下次dom更細循環(huán)之后執(zhí)行。在修改數(shù)據(jù)之后立即使用它，然后等待dom更新。（當data中的某個屬性改變的時候，這個值并不是立即渲染到頁面上的，而是先放到watcher隊列上（異步），只有當前任務空閑的時候才會去執(zhí)行watcher隊列上的任務。）

優(yōu)點：相對未來更新后的視圖進行操作，我們只需要把要執(zhí)行的函數(shù)傳遞給this.$nextTick方法

5. vue slot 具體用法 你項目怎么使用slot？vue的diff算法？Vue中的key有什么作用？

1. slot用于封裝組件中，寫在子組件 接收父組件動態(tài)傳遞子組件內(nèi)容片斷,slot插槽的使用方法其實就是類似于一個子組件或者標簽的引用的過程，在父組件里面定義一個slot，起個name，然后組件引入到子組件，子組件里面有個元素的屬性slot值等于name，然后父組件里面沒有值的時候就可以顯示子組件里面的信息了

6，父組件調(diào)用子組件方法

<Login ref="Login" v-show="loginstate"></Login> //事件中直接調(diào)用即可 hello() {console.log('子組件加載完成')// 去調(diào)用子組件事件，同樣也可以用點擊事件執(zhí)行this.$refs.Login.fn() }

?

總結(jié)

以上是生活随笔為你收集整理的vue 面试题合集的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。