如何讓vue頁面重新渲染

在Vue中，可以使用以下幾種方式讓頁面重新渲染：

改變數據狀態：Vue中的響應式系統會自動監聽數據的變化，并更新相應的視圖。因此，可以通過修改數據狀態來觸發頁面重新渲染。

強制重新渲染：可以通過調用組件實例的 $forceUpdate() 方法來強制重新渲染組件。這個方法會跳過依賴跟蹤，直接重新渲染組件。但是，這種方法并不推薦使用，因為它會影響性能。

通過重新掛載組件實現：可以通過銷毀組件實例，然后再創建一個新的組件實例來實現頁面的重新渲染。在Vue中，可以通過調用組件實例的 $destroy() 方法來銷毀組件實例。然后再通過調用$mount()方法來創建一個新的組件實例。這種方法可以完全重新渲染組件，但是也會帶來一些性能開銷。

組件間通信

1、父子組件傳值，父組件傳給子組件：通過props方法傳遞數據；子組件傳給父組件：$emit方法傳遞參數。
2、非父子組件間的數據傳遞，兄弟組件傳值eventBus，就是創建一個事件中心，相當于中轉站，可以用它來傳遞事件和接收事件。

3、$refs獲取子組件實例
4、vuex存放公共數據
5、$parent 和 $children

vue為什么要mutation、 action操作

mutation是用來直接修改store中的狀態的方法，它只能進行同步操作，也就是說不能進行異步操作。而action則是用來提交mutation的方法，它可以進行異步操作，比如發起一個網絡請求等。當action執行時，它可以在操作完成之后再調用一個mutation來修改store中的狀態。

插槽、具名插槽、作用域插槽

默認插槽：父組件向子組件傳遞內容模板的機制，作為占位符，用于標識父組件提供的內容應該在哪里被渲染
具名插槽：子組件需要在不同的位置接收不同的內容，使用具名插槽以便在子組件中將內容分法到正確的位置，父組件 <template v-slot:name>，子組件<slot name="name">
作用域插槽：將子組件數據傳遞給父組件，<slot :data="data">
父組件
<child-component v-slot:default="slotProps">{{ slotProps.data }} </child-component>
更多類容請查看 https://blog.csdn.net/glorydx/article/details/102918914

vue編譯使用的是什么庫？

Vue.js使用一個名為"Vue Loader"的庫進行組件的編譯。Vue Loader 是一個官方支持的 webpack loader，用于將 Vue 單文件組件（.vue 文件）轉換為 JavaScript 模塊。

Vue Loader的主要功能包括：

1. 解析單文件組件： Vue Loader可以解析.vue文件，提取其中的模板、腳本和樣式塊。

2. 預處理器支持： Vue Loader支持多種預處理器，如Babel、TypeScript、Less、Sass等。這使得在Vue組件中使用這些預處理器語言變得非常方便。

3. 熱重載： Vue Loader集成了熱重載功能，可以在開發環境中實現對組件的實時更新，而不需要刷新整個頁面。

4. 模塊熱替換（HMR）： Vue Loader通過webpack的模塊熱替換功能，支持在開發過程中快速替換或添加組件而不需要刷新整個頁面。

vue怎么實現treeshaking

vue2的腳手架vue-cli使用的是webpack作為打包工具，webpack在2.0版本以后就已經支持treeshaking。
treeshaking只支持es module 規范的代碼

// Bad: CommonJS
const myModule = require('./myModule');// Good: ES2015 Modules
import myModule from './myModule';

webpack實現treeshaking

配置 Babel： 如果你使用了 Babel 來轉譯你的代碼，確保在 Babel 的配置文件（如.babelrc）中啟用 modules 選項，并設置為 false，以保留 ES2015 模塊的格式。

{"presets": [["@babel/preset-env", { "modules": false }]]
}

使用生產環境模式： 在Webpack的配置中，確保你在生產環境中使用了 mode: ‘production’。這將啟用Webpack的一些優化，包括對 Tree Shaking 的支持。

// webpack.config.js
module.exports = {mode: 'production',// other configurations...
};

檢查 UglifyJS 配置： 如果你使用 UglifyJS 進行代碼壓縮，確保其配置中啟用了 uglifyOptions.compress 中的 pure_getters 選項。

// webpack.config.js
module.exports = {// other configurations...optimization: {minimizer: [new TerserPlugin({terserOptions: {compress: { pure_getters: true }}})]}
};

vue使用的webpack作為打包工具，因此vue在生產環境下也是默認支持tree shaking的，不需要額外的手動配置。

為什么只有es module 能支持 tree shaking

treeshaking的本質是找到代碼之間的依賴關系，這樣才能判斷哪些代碼雖然被創建，卻沒有使用，哪些代碼雖然被引入，也未被使用。因此，一定要滿足在編譯時就能構建依賴關系的條件。

編譯時靜態分析： ESM 是在編譯時進行靜態分析的，這意味著模塊的依賴關系在代碼執行之前就已經確定。

運行時動態加載： CommonJS 是在運行時動態加載的，模塊的依賴關系在代碼執行時才解析(打包完成后才執行代碼，treeshaking還在打包之前)。

mixin 的作用

Mixin 是一種軟件設計模式，通常用于在類之間共享方法或行為。Mixin 允許將一個類的方法添加到另一個類中，從而在不使用繼承的情況下實現代碼復用。

代碼復用： Mixin 提供了一種在類之間共享代碼的方式，避免了復制粘貼代碼的問題。通過將共享的方法封裝在 Mixin 中，可以輕松地在多個類中重復使用。

解耦： Mixin 允許將功能模塊化，從而降低了類之間的耦合度。這使得代碼更容易維護和理解，因為每個類只需關注自己的核心功能，而不必處理所有可能的變體。

單一職責原則： Mixin 可以幫助遵循單一職責原則，因為每個 Mixin 可以專注于一個特定的功能或行為。這有助于保持代碼的清晰性和可維護性。

mixin的底層原理

const LoggerMixin = (target) => ({...target,log(message) {console.log(message);}
});class Dog {bark() {console.log('Woof!');}
}const myDog = LoggerMixin(new Dog());myDog.bark(); // 輸出: Woof!
myDog.log('Hello'); // 輸出: Hello

mixin的本質是對象的深度拷，然后注入到各個組件實例中去。各個組件的實例一旦被注入mixin之后，這些mixin就實例化一個個對象，這些對象之間的數據都是獨立的，不像vuex那樣，共享數據，一個組件改變狀態，另外的組件也會自動更新。mixin只提供數據的初始值，和通用方法的封裝，這些數據和方法，只在本組件實例生效。

nexTick原理

vue更新數據是同步的，但更新dom卻是異步的，屬于宏任務。按照js事件循環，nextTick屬于微任務，但微任務卻是在更新dom這個宏任務執行后的回調去觸發nextTick的執行，每一次一個宏任務執行完，都會立即清空微任務隊列。所以nextTick能夠立即執行回調。

vuex和redux的差異

Vuex 和 Redux 都是用于管理應用狀態（state）的狀態管理庫，但它們有一些設計和實現上的差異。下面是一些主要的區別：

1. 框架/庫的關聯：

   • Vuex 是為 Vue.js 框架設計的狀態管理庫。它與 Vue.js 高度集成，使得在 Vue 應用中管理狀態變得更加簡單。
   • Redux 是一個獨立的狀態管理庫，可以與多種 JavaScript 庫和框架一起使用，包括 React、Angular 和 Vue 等。

2. 概念的不同：

   • Vuex 強調在應用中的組件之間共享狀態的方式，使用了類似于 Flux 架構的概念，包括 state、getters、mutations、actions。
   • Redux 強調單一不可變的狀態樹，狀態只能通過純函數（reducers）來修改。Redux 的設計理念受到了函數式編程的影響。

3. 狀態的修改：

   • 在 Vuex 中，通過提交 mutations 來修改狀態。Mutations 是同步的，它們用于執行實際的狀態修改。
   • 在 Redux 中，通過派發 actions 來修改狀態。Actions 是可以是異步的，它們通過純函數的 reducers 來處理狀態的變化。

4. 異步操作的處理：

   • Vuex 使用 actions 處理異步操作。Actions 可以包含異步邏輯，然后通過提交 mutations 來修改狀態。
   • Redux 使用中間件來處理異步操作。Redux 中最常用的中間件是 redux-thunk，它允許 action creators 返回一個函數，而不僅僅是一個普通的 action 對象。

5. 開發工具：

   • Vuex 提供了 Vue Devtools，可以很容易地在瀏覽器中監控和調試 Vuex 應用。
   • Redux 也有強大的開發者工具，例如 Redux DevTools，可以用于監控和調試 Redux 應用。