?文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-677004.html

20. 對(duì) vue 設(shè)計(jì)原則的理解

1.漸進(jìn)式 JavaScript 框架：與其它大型框架不同的是，Vue 被設(shè)計(jì) 為可以自底向上逐層應(yīng)用。Vue 的核心庫(kù)只關(guān)注視圖層，不僅易于上 手，還便于與第三方庫(kù)或既有項(xiàng)目整合。另一方面，當(dāng)與現(xiàn)代化的工 具鏈以及各種支持類(lèi)庫(kù)結(jié)合使用時(shí)，Vue 也完全能夠?yàn)閺?fù)雜的單頁(yè)應(yīng) 用提供驅(qū)動(dòng)。

2.易用性：vue 提供數(shù)據(jù)響應(yīng)式、聲明式模板語(yǔ)法和基于配置的組件 系統(tǒng)等核心特性。這些使我們只需要關(guān)注應(yīng)用的核心業(yè)務(wù)即可，只要 會(huì)寫(xiě) js、html 和 css 就能輕松編寫(xiě) vue 應(yīng)用。

3.靈活性：漸進(jìn)式框架的最大優(yōu)點(diǎn)就是靈活性，如果應(yīng)用足夠小，我 們可能僅需要 vue 核心特性即可完成功能；隨著應(yīng)用規(guī)模不斷擴(kuò)大，我們才可能逐漸引入路由、狀態(tài)管理、vue-cli 等庫(kù)和工具，不管是 應(yīng)用體積還是學(xué)習(xí)難度都是一個(gè)逐漸增加的平和曲線。

4.高效性：超快的虛擬 DOM 和 diff算法使我們的應(yīng)用擁有最佳的性能 表現(xiàn)。追求高效的過(guò)程還在繼續(xù)，vue3 中引入 Proxy 對(duì)數(shù)據(jù)響應(yīng)式 改進(jìn)以及編譯器中對(duì)于靜態(tài)內(nèi)容編譯的改進(jìn)都會(huì)讓 vue 更加高效。

21. 說(shuō)一下 Vue 的生命周期

Vue 實(shí)例有?個(gè)完整的?命周期，也就是從開(kāi)始創(chuàng)建、初始化數(shù)據(jù)、編譯模版、掛載 Dom -> 渲染、更新 -> 渲染、卸載 等?系列過(guò)程，稱(chēng)這是 Vue 的?命周期。

1.beforeCreate（創(chuàng)建前）：數(shù)據(jù)觀測(cè)和初始化事件還未開(kāi)始，此時(shí) data 的響應(yīng)式追蹤、event/watcher 都還沒(méi)有被設(shè)置，也就是說(shuō)不 能訪問(wèn)到 data、computed、watch、methods 上的方法和數(shù)據(jù)。

2.created（創(chuàng)建后） ：實(shí)例創(chuàng)建完成，實(shí)例上配置的 options 包 括 data、computed、watch、methods 等都配置完成，但是此時(shí)渲染 得節(jié)點(diǎn)還未掛載到 DOM，所以不能訪問(wèn)到 $el 屬性。

3.beforeMount（掛載前）：在掛載開(kāi)始之前被調(diào)用，相關(guān)的 render 函數(shù)首次被調(diào)用。實(shí)例已完成以下的配置：編譯模板，把 data 里面 的數(shù)據(jù)和模板生成 html。此時(shí)還沒(méi)有掛載 html 到頁(yè)面上。

4.mounted（掛載后）：在 el 被新創(chuàng)建的 vm.$el 替換，并掛載到實(shí) 例上去之后調(diào)用。實(shí)例已完成以下的配置：用上面編譯好的 html 內(nèi) 容替換 el 屬性指向的 DOM 對(duì)象。完成模板中的 html 渲染到 html 頁(yè) 面中。此過(guò)程中進(jìn)行 ajax 交互。

5.beforeUpdate（更新前）：響應(yīng)式數(shù)據(jù)更新時(shí)調(diào)用，此時(shí)雖然響應(yīng) 式數(shù)據(jù)更新了，但是對(duì)應(yīng)的真實(shí) DOM 還沒(méi)有被渲染。

6.updated（更新后） ：在由于數(shù)據(jù)更改導(dǎo)致的虛擬 DOM 重新渲染和 打補(bǔ)丁之后調(diào)用。此時(shí) DOM 已經(jīng)根據(jù)響應(yīng)式數(shù)據(jù)的變化更新了。調(diào) 用時(shí)，組件 DOM 已經(jīng)更新，所以可以執(zhí)行依賴(lài)于 DOM 的操作。然而 在大多數(shù)情況下，應(yīng)該避免在此期間更改狀態(tài)，因?yàn)檫@可能會(huì)導(dǎo)致更 新無(wú)限循環(huán)。該鉤子在服務(wù)器端渲染期間不被調(diào)用。

7.beforeDestroy（銷(xiāo)毀前）：實(shí)例銷(xiāo)毀之前調(diào)用。這一步，實(shí)例仍 然完全可用，this 仍能獲取到實(shí)例。

8.destroyed（銷(xiāo)毀后）：實(shí)例銷(xiāo)毀后調(diào)用，調(diào)用后，Vue 實(shí)例指示 的所有東西都會(huì)解綁定，所有的事件監(jiān)聽(tīng)器會(huì)被移除，所有的子實(shí)例 也會(huì)被銷(xiāo)毀。該鉤子在服務(wù)端渲染期間不被調(diào)用。

另外還有 keep-alive 獨(dú)有的生命周期，分別為 activated 和

deactivated。用 keep-alive 包裹的組件在切換時(shí)不會(huì)進(jìn)行銷(xiāo)毀，而 是緩存到內(nèi)存中并執(zhí)行 deactivated 鉤子函數(shù)，命中緩存渲染后會(huì)執(zhí) 行 activated 鉤子函數(shù)。

?

到了這里，關(guān)于常見(jiàn)前端面試之VUE面試題匯總七的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！