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