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