vue面試題（全）

原理篇：

1，computed和watch的區別

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

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

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

?應用場景：

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

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

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

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

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

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

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

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

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

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

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

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

4，Vue 組件 data 為什么必須是函數 ?

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

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

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

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

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

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

全局組件

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

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

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

答：

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

有get和set兩個選項

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

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

watch 配置
handler
deep 是否深度
immeditate 是否立即執行

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

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

2.??在 VueRouter 的參數中使用 children 配置

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

5．有三種：

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

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

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

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

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

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

5.?DOM 渲染在 mounted 中就已經完成了

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

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

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

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

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

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

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

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

6，父組件調用子組件方法

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

?

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。