一.Vue相關(guān)1.在vue中，echarts初始化放在哪個(gè)鉤子在Vue中，ECharts的初始化通常放在mounted鉤子中。因?yàn)樵趍ounted鉤子中，組件已經(jīng)掛載到DOM上，你可以訪問到模板中的DOM元素。2.為什么vue中的data不是個(gè)對(duì)象，而是個(gè)函數(shù)？data特別像一個(gè)閉包，閉包可以簡單理解為：方法里面返回一個(gè)方法；閉包最重要的特性是實(shí)現(xiàn)對(duì)數(shù)據(jù)的私有和封裝；data寫成函數(shù)（閉包）的形式，相當(dāng)于給每一個(gè)組件創(chuàng)建了一個(gè)私有數(shù)據(jù)空間，也就是說：A組件數(shù)據(jù)data只可以為A服務(wù)，B組件數(shù)據(jù)data只可以為B服務(wù)，各組件數(shù)據(jù)不會(huì)受影響；如果用對(duì)象，所有組件的就不能實(shí)現(xiàn)私有，只能共用，會(huì)造成數(shù)據(jù)污染的問題，最終導(dǎo)致數(shù)據(jù)錯(cuò)亂。3.vue事件綁定原理是什么？原生事件綁定是通過addEventListener綁定給真實(shí)元素的，組件事件綁定是通過Vue自定義的$on實(shí)現(xiàn)的，4.子組件如何修改父組件的值4.1 使用事件子組件可以通過觸發(fā)事件的方式通知父組件進(jìn)行數(shù)據(jù)的修改。父組件可以通過v-on指令監(jiān)聽子組件觸發(fā)的事件，并在事件處理程序中修改相應(yīng)的數(shù)據(jù)。4.2 使用.sync修飾符Vue還提供了.sync修飾符，用于簡化子組件向父組件傳遞數(shù)據(jù)并修改父組件數(shù)據(jù)的操作。child-component :message.sync="message"/child-component5.vue的雙向綁定原理鏈接：https://www.cnblogs.com/jiajia-hjj/p/15395815.html原理主要通過數(shù)據(jù)劫持和發(fā)布訂閱模式實(shí)現(xiàn)的通過Object.defineProperty()來劫持各個(gè)屬性的setter，getter，監(jiān)聽數(shù)據(jù)的變化在數(shù)據(jù)變動(dòng)時(shí)發(fā)布消息給訂閱者(watcher)，訂閱者觸發(fā)響應(yīng)的回調(diào)(update)更新視圖6.什么是SPA單頁應(yīng)用單頁應(yīng)用（Single Page Application，簡稱 SPA）是一種 Web 應(yīng)用程序架構(gòu)，它通過動(dòng)態(tài)重寫當(dāng)前頁面，而不是加載整個(gè)新頁面來與用戶進(jìn)行交互。這種技術(shù)主要依賴于 AJAX 和前端路由來實(shí)現(xiàn)頁面的無刷新更新，從而提供更流暢和快速的用戶體驗(yàn)。1.整個(gè)應(yīng)用只有一個(gè) HTML 頁面。初次加載時(shí)，服務(wù)器返回這個(gè)頁面，此后所有的頁面內(nèi)容切換和數(shù)據(jù)加載都通過 JavaScript 在客戶端完成。2.通過前端路由（例如 Vue Router、React Router）管理不同的視圖和狀態(tài)，用戶在瀏覽器地址欄中的 URL 變化不會(huì)觸發(fā)整個(gè)頁面的刷新，而是由 JavaScript 捕獲并處理。3.利用 AJAX 技術(shù)（如 Fetch API 或 Axios）與后端服務(wù)器進(jìn)行數(shù)據(jù)交換，獲取數(shù)據(jù)后動(dòng)態(tài)更新頁面內(nèi)容，而不需要重新加載頁面。4.由于不需要重新加載整個(gè)頁面，只需更新部分內(nèi)容，用戶體驗(yàn)更加流暢和快速。大部分渲染工作由客戶端的 JavaScript 完成，減輕了服務(wù)器的負(fù)擔(dān)。SPA的優(yōu)缺點(diǎn)優(yōu)點(diǎn)：1、用戶體驗(yàn)好：頁面切換流暢，無需整頁刷新，類似于桌面應(yīng)用的操作體驗(yàn)。2、減少服務(wù)器壓力：由于大部分渲染和邏輯在客戶端完成，服務(wù)器只需提供數(shù)據(jù)接口，減少了服務(wù)器的壓力。3、前后端分離：更明確的前后端分離，前端負(fù)責(zé)頁面顯示和交互，后端負(fù)責(zé)數(shù)據(jù)處理和業(yè)務(wù)邏輯。更明確的前后端分離，前端負(fù)責(zé)頁面顯示和交互，后端負(fù)責(zé)數(shù)據(jù)處理和業(yè)務(wù)邏輯。缺點(diǎn)：1、首次加載時(shí)間長：由于初次加載需要下載所有必要的 HTML、CSS 和 JavaScript 文件，可能導(dǎo)致首次加載時(shí)間較長。2、SEO 問題：傳統(tǒng)搜索引擎難以抓取動(dòng)態(tài)內(nèi)容，SEO 優(yōu)化較困難。不過，這個(gè)問題可以通過服務(wù)器端渲染（SSR）或預(yù)渲染等技術(shù)來緩解。3、前端復(fù)雜度增加：需要處理復(fù)雜的前端路由和狀態(tài)管理，增加了開發(fā)和維護(hù)的難度。7.vue數(shù)據(jù)響應(yīng)式原理8.vuex中mutation和action的區(qū)別視圖觸發(fā)Action，Action再觸發(fā)Mutation，Mutation：必須同步執(zhí)行，專注于修改State，理論上是修改State的唯一途徑；Action：可以異步，但不能直接操作State，里面可以寫一些業(yè)務(wù)代碼、異步請(qǐng)求。9.$nextTick實(shí)現(xiàn)原理nextTick，它可以在DOM更新完畢之后執(zhí)行一個(gè)回調(diào)。當(dāng)我們需要在dom更新完之后進(jìn)行某些操作的時(shí)候，就會(huì)用到$nextTick，原理就是：vue用異步隊(duì)列的方式來控制DOM更新和nextTick回調(diào)先后執(zhí)行。Vue.js中的nextTick機(jī)制確保在DOM更新后執(zhí)行回調(diào)函數(shù)。它主要處理在數(shù)據(jù)變更后，如何確保在DOM實(shí)際更新后執(zhí)行某些操作的問題。以下是其工作原理的詳細(xì)解釋：DOM更新與異步處理： Vue.js 使用異步更新隊(duì)列來處理DOM更新。當(dāng)數(shù)據(jù)發(fā)生變化時(shí)，Vue不會(huì)立即重新渲染DOM，而是將這些變更緩沖起來，并在下一個(gè)事件循環(huán)“tick”中執(zhí)行實(shí)際的DOM更新。1nextTick的實(shí)現(xiàn)： 當(dāng)開發(fā)者調(diào)用this.$nextTick()或Vue.nextTick()時(shí)，它們實(shí)際上是在告訴Vue：“我在這里等待，直到所有的DOM更新完成后再繼續(xù)執(zhí)行我的回調(diào)函數(shù)?！?這通過維護(hù)一個(gè)回調(diào)函數(shù)隊(duì)列實(shí)現(xiàn)，確保所有在同一“tick”內(nèi)的回調(diào)都在DOM更新后執(zhí)行。23回調(diào)函數(shù)的處理： 當(dāng)Vue完成DOM的更新后，它會(huì)遍歷并執(zhí)行這個(gè)隊(duì)列中的所有回調(diào)函數(shù)。這樣，開發(fā)者可以確保他們的代碼在DOM實(shí)際更新后執(zhí)行，而不是在數(shù)據(jù)變更的那一刻。2與Promise的集成：nextTick()方法返回一個(gè)Promise對(duì)象，這使得開發(fā)者可以使用async/await語法來等待DOM更新完成，從而以更簡潔的方式編寫異步代碼。13總體來說，nextTick是Vue.js中一個(gè)關(guān)鍵機(jī)制，它允許開發(fā)者在數(shù)據(jù)變更后安全地操作DOM，確保所有相關(guān)的DOM更新都已完成。10.watch和computer的原理，以及區(qū)別當(dāng)需要在數(shù)據(jù)變化時(shí)執(zhí)行異步或開銷較大的操作時(shí)，使用watch最有用的。11.路由導(dǎo)航守衛(wèi)導(dǎo)航守衛(wèi)可以控制路由的訪問權(quán)限。全局前置守衛(wèi)的回調(diào)函數(shù)中接收 3 個(gè)形參，格式為：不允許跳轉(zhuǎn)到后臺(tái)主頁：next(false)12.路由切換，前進(jìn)，后退vue-router 提供了許多編程式導(dǎo)航的 API，其中最常用的導(dǎo)航 API 分別是：① this.$router.push(‘hash 地址’)跳轉(zhuǎn)到指定 hash 地址，并增加一條歷史記錄② this.$router.replace(‘hash 地址’)跳轉(zhuǎn)到指定的 hash 地址，并替換掉當(dāng)前的歷史記錄③ this.$router.go(數(shù)值 n)實(shí)現(xiàn)導(dǎo)航歷史前進(jìn)、后退簡化：在實(shí)際開發(fā)中，一般只會(huì)前進(jìn)和后退一層頁面。因此 vue-router 提供了如下兩個(gè)便捷方法：① $router.back()在歷史記錄中，后退到上一個(gè)頁面② $router.forward()在歷史記錄中，前進(jìn)到下一個(gè)頁面13.v-html會(huì)有什么問題14.less,sass15.vue中hash路由跟history路由區(qū)別Vue中的hash路由和history路由模式是指兩種處理路由的方式。hash模式：URL中永遠(yuǎn)帶有#符號(hào)，#后面的部分稱為hash值。使用window.location.hash來讀取或設(shè)置hash值，不會(huì)引起頁面的重新加載。主要用于兼容舊版本的瀏覽器，因?yàn)橐恍├系臑g覽器不支持HTML5的history API。history模式：URL中看不到#符號(hào)。依賴HTML5 History API（pushState和replaceState方法）實(shí)現(xiàn)。需要服務(wù)器支持，否則用戶直接訪問非首頁路由時(shí)會(huì)出現(xiàn)404錯(cuò)誤。Vue Router中使用mode屬性來設(shè)置路由模式：javascriptconst router = new VueRouter({ mode: 'history', // 或者 'hash' routes: [...] });在實(shí)際開發(fā)中，如果不需要為舊版本瀏覽器提供支持，或者你不介意URL中帶有#符號(hào)，可以選擇hash模式。如果想要更加現(xiàn)代的URL，并且確信你的服務(wù)器配置可以處理路由，可以選擇history模式。16.簡述vue中虛擬dom和diff算法在Vue中，虛擬DOM是一種抽象層面的表現(xiàn)，它使得Vue可以高效地更新DOM。虛擬DOM是由VNode表示的，是一個(gè)抽象的JavaScript對(duì)象，用以描述真實(shí)DOM的信息。當(dāng)數(shù)據(jù)更新時(shí)，Vue會(huì)重新運(yùn)行渲染函數(shù)，生成新的VNode樹，然后Vue會(huì)用深度優(yōu)先的遞歸比較新舊VNode樹的差異，最終只應(yīng)用必要的變更到真實(shí)DOM上，避免了對(duì)整個(gè)列表進(jìn)行重新渲染。這個(gè)過程就是所謂的"Diff算法"。Vue通過Diff算法比較新舊兩棵虛擬DOM樹的差異，并只將"Item C"添加到真實(shí)的DOM中，這就是虛擬DOM和Diff算法的實(shí)際應(yīng)用。vue虛擬dom和真實(shí)dom的區(qū)別Vue的虛擬DOM（Virtual DOM）是一種可以理解為在真實(shí)DOM之上的抽象層，它使得Vue可以高效地更新DOM。真實(shí)DOM：是由瀏覽器提供的一種抽象層，它使得我們可以用JavaScript操作文檔結(jié)構(gòu)。當(dāng)我們直接操作真實(shí)DOM時(shí)，會(huì)引起瀏覽器的重繪和重排，性能開銷較大。虛擬DOM：是用JavaScript對(duì)真實(shí)DOM的一種抽象。Vue通過新舊虛擬DOM的對(duì)比，找出實(shí)際變化的部分，然后只更新這部分，減少對(duì)真實(shí)DOM的操作，從而提高性能。17.vue 中的 provide 和 inject 用法provide和inject允許你在祖先組件和后代組件之間傳遞數(shù)據(jù)，而不需要通過props和events進(jìn)行逐層傳遞。provide在祖先組件中定義要傳遞的數(shù)據(jù)，inject在后代組件中接收數(shù)據(jù)。18.vue中父子組件渲染的生命周期執(zhí)行順序，19.vue生命周期，在什么時(shí)候發(fā)請(qǐng)求，通常在create時(shí)發(fā)請(qǐng)求20.vuex有幾部分，每部分的含義21.路由怎么傳參，路由跳轉(zhuǎn)有幾種方式22.v-if和v-for比較v-for優(yōu)先級(jí)比較高,注意我們不推薦在同一元素上使用v-if和v-for當(dāng)它們處于同一節(jié)點(diǎn)，v-for的優(yōu)先級(jí)比v-if更高，這意味著v-if將分別重復(fù)運(yùn)行于每個(gè)v-for循環(huán)中。當(dāng)你只想為部分項(xiàng)渲染節(jié)點(diǎn)時(shí)，這種優(yōu)先級(jí)的機(jī)制會(huì)十分有用，如下：li v-for="todo in todos" v-if="!todo.isComplete" { { todo }} /li上面的代碼將只渲染未完成的 todo。而如果你的目的是有條件地跳過循環(huán)的執(zhí)行，那么可以將v-if置于外層元素 (或">template) 上。如：ul v-if="todos.length" li v-for="todo in todos" { { todo }} /li /ul p v-elseNo todos left!/p23.插槽1.我們?yōu)榫呙宀酆妥饔糜虿宀垡肓艘粋€(gè)新的統(tǒng)一的語法 (即v-slot指令)。它取代了slot和slot-scope這兩個(gè)目前已被廢棄但未被移除且仍在文檔中的 attribute。注意：v-slot只能添加在template上(只有一種例外情況，如下紅色字體，)#獨(dú)占默認(rèn)插槽的縮寫語法當(dāng)被提供的內(nèi)容只有默認(rèn)插槽時(shí)，組件的標(biāo)簽才可以被當(dāng)作插槽的模板來使用。這樣我們就可以把v-slot直接用在組件上：current-user v-slot:default="slotProps" { { slotProps.user.firstName }} /current-user這種寫法還可以更簡單。就像假定未指明的內(nèi)容對(duì)應(yīng)默認(rèn)插槽一樣，不帶參數(shù)的v-slot被假定對(duì)應(yīng)默認(rèn)插槽：current-user v-slot="slotProps" { { slotProps.user.firstName }} /current-user2.跟v-on和v-bind一樣，v-slot也有縮寫，即把參數(shù)之前的所有內(nèi)容 (v-slot:) 替換為字符#。例如v-slot:header可以被重寫為#header：current-user #header="{ user }" { { user.firstName }} /current-user24.uni-app25.組件傳值在Vue.js中，組件通信是構(gòu)建復(fù)雜應(yīng)用的基礎(chǔ)。Vue提供了多種方式來實(shí)現(xiàn)組件間的通信。以下是幾種常見的組件通信方法：1. Props（父子組件通信）?父組件向子組件傳遞數(shù)據(jù)?：在子組件中，你可以通過props接收從父組件傳遞過來的數(shù)據(jù)。!-- 子組件 --template div{ { message }