?? 點(diǎn)贊，你的認(rèn)可是我創(chuàng)作的動(dòng)力！

?? 收藏，你的青睞是我努力的方向！

?? 評(píng)論，你的意見是我進(jìn)步的財(cái)富！

系列文章目錄

Vue知識(shí)系列（1）每天10個(gè)小知識(shí)點(diǎn)

Vue知識(shí)系列（2）每天10個(gè)小知識(shí)點(diǎn)

Vue知識(shí)系列（3）每天10個(gè)小知識(shí)點(diǎn)

Vue知識(shí)系列（4）每天10個(gè)小知識(shí)點(diǎn)

Vue知識(shí)系列（5）每天10個(gè)小知識(shí)點(diǎn)

Vue知識(shí)系列（6）每天10個(gè)小知識(shí)點(diǎn)

知識(shí)點(diǎn)

61.Vue過濾器的概念、作用、特性、優(yōu)點(diǎn)、缺點(diǎn)、區(qū)別、使用場景

Vue 的過濾器（Filters）是一種用來處理文本格式化的功能。它們允許你在插值表達(dá)式 {{ }} 中使用管道符 |，將數(shù)據(jù)經(jīng)過一系列的處理后再顯示在視圖中。以下是關(guān)于 Vue 過濾器的概念、作用、特性、優(yōu)點(diǎn)、缺點(diǎn)、區(qū)別和使用場景的詳細(xì)說明：

概念：

• Vue 過濾器是一種可以在模板中對(duì)文本進(jìn)行轉(zhuǎn)換和格式化的功能。
• 過濾器可以用在兩個(gè)大括號(hào)插值表達(dá)式 {{ }}、v-bind 表達(dá)式和 v-model 綁定中。

作用：

• 格式化數(shù)據(jù)：過濾器可以將數(shù)據(jù)以特定的方式進(jìn)行格式化，比如日期格式化、貨幣格式化等。
• 數(shù)據(jù)處理：過濾器可以對(duì)數(shù)據(jù)進(jìn)行一些處理操作，比如大小寫轉(zhuǎn)換、字符串截取等。

特性：

• 可串聯(lián)：多個(gè)過濾器可以串聯(lián)使用，數(shù)據(jù)會(huì)按照過濾器的順序依次處理。
• 全局和局部：Vue 支持全局注冊和局部注冊過濾器。

優(yōu)點(diǎn)：

• 使模板更清晰：通過將數(shù)據(jù)處理邏輯移到模板之外，使模板更加簡潔易懂。
• 可復(fù)用性：可以在不同的地方復(fù)用相同的過濾器函數(shù)。
• 分離關(guān)注點(diǎn)：將數(shù)據(jù)處理和視圖顯示分離，提高代碼的可維護(hù)性。

缺點(diǎn)：

• 性能：過濾器會(huì)在每次渲染時(shí)都被調(diào)用，如果過濾器邏輯復(fù)雜或數(shù)據(jù)量大，可能影響性能。
• 不適用于所有場景：并不是所有的數(shù)據(jù)處理都適合使用過濾器，某些復(fù)雜的邏輯可能更適合在組件內(nèi)部處理。

區(qū)別：

• 過濾器是一種全局可用的功能，而計(jì)算屬性（Computed Properties）是組件內(nèi)部的計(jì)算屬性，可以根據(jù)數(shù)據(jù)的變化實(shí)時(shí)更新。
• 過濾器適合用于簡單的文本格式化和數(shù)據(jù)處理，而計(jì)算屬性更適合處理復(fù)雜的計(jì)算邏輯。

使用場景：

• 日期格式化：將日期數(shù)據(jù)格式化為指定的顯示格式。
• 文本截?。航厝￠L文本并顯示部分內(nèi)容。
• 字符串轉(zhuǎn)換：將字符串轉(zhuǎn)換為大寫或小寫。
• 貨幣格式化：將數(shù)字?jǐn)?shù)據(jù)格式化為貨幣顯示。
• 數(shù)據(jù)處理：對(duì)數(shù)據(jù)進(jìn)行一些處理，如過濾、排序等。

示例：

<template>
  <div>
    <p>{{ message | uppercase }}</p>
    <p>{{ date | formatDate }}</p>
    <p>{{ text | truncate(50) }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello, Vue!',
      date: new Date(),
      text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
    };
  },
  filters: {
    uppercase(value) {
      return value.toUpperCase();
    },
    formatDate(value) {
      return new Date(value).toLocaleDateString();
    },
    truncate(value, length) {
      return value.length > length ? value.slice(0, length) + '...' : value;
    },
  },
};
</script>

上述示例演示了如何在 Vue 中使用過濾器來格式化文本和數(shù)據(jù)，以及如何定義和注冊過濾器函數(shù)。過濾器提供了一種簡單而強(qiáng)大的方式來處理模板中的文本和數(shù)據(jù)。

62.vue目錄結(jié)構(gòu)

Vue.js 并沒有強(qiáng)制要求使用特定的目錄結(jié)構(gòu)，但通常會(huì)遵循一種常見的目錄結(jié)構(gòu)，以便組織和管理項(xiàng)目代碼。這個(gè)常見的目錄結(jié)構(gòu)通常包括以下目錄和文件：

1. src 目錄： 這是項(xiàng)目的主要源代碼目錄，包含了 Vue 組件、路由、狀態(tài)管理、API 請(qǐng)求等等。在 src 目錄下，通常會(huì)包含以下子目錄：
   • assets：存放靜態(tài)資源文件，如圖片、字體等。
   • components：存放可復(fù)用的 Vue 組件。
   • views：存放頁面級(jí)別的 Vue 組件，通常與路由相關(guān)。
   • router：存放 Vue Router 路由配置文件。
   • store：存放 Vuex 狀態(tài)管理文件。
   • api：存放與后端 API 交互的代碼。
   • utils：存放項(xiàng)目中的工具函數(shù)或輔助函數(shù)。
   • styles：存放全局樣式文件。
   • main.js：應(yīng)用的入口文件，通常包含 Vue 實(shí)例的創(chuàng)建和掛載。
2. public 目錄： 這個(gè)目錄存放靜態(tài)資源，不會(huì)經(jīng)過構(gòu)建處理，可以直接訪問。比如放置一些不需要打包處理的 HTML 文件、favicon.ico 等。
3. dist 目錄： 這是項(xiàng)目構(gòu)建生成的目錄，包含了經(jīng)過構(gòu)建處理后的文件，通常包括打包后的 JavaScript、CSS、HTML 文件等。這個(gè)目錄通常不會(huì)手動(dòng)維護(hù)，而是由構(gòu)建工具自動(dòng)生成。
4. babel.config.js、vue.config.js、package.json 等配置文件： 這些配置文件用于配置項(xiàng)目的構(gòu)建、依賴、Babel 配置等等。其中，vue.config.js 是用于配置 Vue CLI 項(xiàng)目的配置文件。
5. 其他自定義目錄和文件： 除了上述常見的目錄和文件，項(xiàng)目中還可能包含其他自定義的目錄和文件，具體取決于項(xiàng)目的需求和組織。

這只是一個(gè)常見的目錄結(jié)構(gòu)示例，實(shí)際項(xiàng)目中可以根據(jù)需求進(jìn)行調(diào)整和擴(kuò)展。Vue CLI 也提供了快速初始化項(xiàng)目的功能，可以根據(jù)需要選擇預(yù)設(shè)的目錄結(jié)構(gòu)，然后根據(jù)項(xiàng)目的實(shí)際情況進(jìn)行調(diào)整。

63.Vue不同指令中常用的修飾符

Vue.js 提供了一些常用的指令修飾符，用于修改指令的行為。這些修飾符通常以點(diǎn)號(hào)的方式添加到指令后面。以下是一些常用的 Vue.js 指令及其修飾符：

1. v-on (事件監(jiān)聽指令)：

   • .stop：阻止事件冒泡。
   • .prevent：阻止事件的默認(rèn)行為。
   • .capture：使用事件捕獲模式，從外向內(nèi)處理事件。
   • .self：只在事件發(fā)生元素自身時(shí)觸發(fā)處理程序。
   • .once：只觸發(fā)一次事件處理程序。

   <a v-on:click.stop="doSomething">Click me</a>
   
   

2. v-bind (屬性綁定指令)：

   • .prop：將 DOM 屬性綁定到元素屬性而不是 innerHTML。
   • .camel：將綁定的屬性名稱轉(zhuǎn)換為駝峰式。

   <input v-bind:value.prop="message">
   
   

3. v-model (雙向數(shù)據(jù)綁定指令)：

   • .lazy：將輸入事件轉(zhuǎn)換為 change 事件。
   • .number：將輸入值轉(zhuǎn)換為數(shù)字。
   • .trim：去除輸入值的首尾空格。

   <input v-model.lazy="message">
   
   

4. v-show (條件顯示指令)：

   • 無修飾符

   <div v-show="isVisible">Show me</div>
   
   

5. v-if 和 v-else (條件渲染指令)：

   • 無修飾符

   <div v-if="isTrue">True</div>
   <div v-else>False</div>
   
   

6. v-for (循環(huán)渲染指令)：

   • .key：為 v-for 循環(huán)中的元素指定唯一鍵。

   <ul>
     <li v-for="item in items" :key="item.id">{{ item.name }}</li>
   </ul>
   
   

7. v-pre (跳過編譯指令)：

   • 無修飾符

   <div v-pre>{{ message }}</div>
   
   

8. v-cloak (防止閃爍指令)：

   • 無修飾符

   <div v-cloak>{{ message }}</div>
   
   

這些修飾符提供了在使用 Vue.js 指令時(shí)更靈活的選項(xiàng)，可以根據(jù)需要進(jìn)行選擇和組合，以滿足不同的需求。修飾符使得指令的行為更加可定制。

64.webpack的概念、作用、原理、特性、優(yōu)點(diǎn)、缺點(diǎn)、區(qū)別、使用場景

Webpack 是一個(gè)現(xiàn)代的 JavaScript 應(yīng)用程序的靜態(tài)模塊打包工具。它是前端開發(fā)中常用的構(gòu)建工具之一，用于將多個(gè)模塊和資源文件（如 JavaScript、CSS、圖片等）打包成一個(gè)或多個(gè)最終的輸出文件，以便在瀏覽器中加載和運(yùn)行。

以下是關(guān)于 Webpack 的一些重要信息：

• 概念： Webpack 是一個(gè)模塊打包工具，它將應(yīng)用程序的所有資源文件視為模塊，并通過依賴關(guān)系將它們打包成一個(gè)或多個(gè)輸出文件。
• 作用： Webpack 的主要作用是幫助開發(fā)者管理和優(yōu)化前端項(xiàng)目的代碼和資源。它可以處理模塊之間的依賴關(guān)系、實(shí)現(xiàn)代碼分割、處理資源文件、壓縮代碼等等。
• 原理： Webpack 的原理是通過配置文件定義入口文件、輸出文件、加載器（用于處理不同類型的文件）、插件（用于執(zhí)行各種構(gòu)建任務(wù)）等信息，然后根據(jù)這些配置信息進(jìn)行模塊加載、編譯、打包和輸出。
• 特性： Webpack 具有模塊化、代碼分割、懶加載、熱模塊替換（HMR）、插件系統(tǒng)等特性，使開發(fā)者能夠更高效地構(gòu)建和維護(hù)前端項(xiàng)目。
• 優(yōu)點(diǎn)：
  • 有效管理模塊依賴。
  • 實(shí)現(xiàn)代碼分割，減小初始加載時(shí)間。
  • 支持各種資源類型的處理。
  • 強(qiáng)大的插件系統(tǒng)，擴(kuò)展性強(qiáng)。
  • 社區(qū)活躍，有大量的插件和工具可用。
• 缺點(diǎn)：
  • 學(xué)習(xí)曲線較陡峭，配置復(fù)雜。
  • 初次配置可能需要花費(fèi)時(shí)間。
  • 構(gòu)建速度可能會(huì)受到項(xiàng)目規(guī)模的影響。
• 區(qū)別： Webpack 與其他構(gòu)建工具（如 Grunt、Gulp）相比，更側(cè)重于模塊化和代碼分割，具有更強(qiáng)大的生態(tài)系統(tǒng)和更多的社區(qū)支持。
• 使用場景： Webpack 適用于各種類型的前端項(xiàng)目，特別是單頁面應(yīng)用程序（SPA）和大型項(xiàng)目，它能夠有效地管理模塊化代碼、處理各種資源文件、優(yōu)化性能等。當(dāng)項(xiàng)目需要復(fù)雜的構(gòu)建流程、模塊化管理、代碼分割、懶加載等特性時(shí)，Webpack 是一個(gè)不錯(cuò)的選擇。

總之，Webpack 是前端開發(fā)中常用的構(gòu)建工具，它通過模塊化和代碼分割等特性，幫助開發(fā)者更好地組織和管理前端項(xiàng)目，提高項(xiàng)目的可維護(hù)性和性能。

65.如何優(yōu)化webpack配置

優(yōu)化 Webpack 配置是提高前端項(xiàng)目性能和開發(fā)體驗(yàn)的重要步驟之一。以下是一些優(yōu)化 Webpack 配置的常見方法：

1. 代碼分割： 使用 Webpack 的代碼分割功能，將應(yīng)用程序拆分為多個(gè)小塊，實(shí)現(xiàn)按需加載，減少初始加載時(shí)間。

   // webpack.config.js
   optimization: {
     splitChunks: {
       chunks: 'all',
     },
   },
   
   

2. 壓縮代碼： 使用 Webpack 插件來壓縮 JavaScript 和 CSS 文件，減小文件大小。

   // webpack.config.js
   const TerserPlugin = require('terser-webpack-plugin');
   const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
   
   optimization: {
     minimizer: [
       new TerserPlugin(),
       new OptimizeCSSAssetsPlugin(),
     ],
   },
   
   

3. 使用 Tree Shaking： 在配置文件中啟用 Tree Shaking，以刪除未使用的代碼。

   // webpack.config.js
   module.exports = {
     // ...
     optimization: {
       usedExports: true,
     },
   };
   
   

4. 懶加載： 使用動(dòng)態(tài) import 或 require.ensure 實(shí)現(xiàn)懶加載，只在需要時(shí)加載模塊。

   // 懶加載示例
   import('./myModule').then(module => {
     // 使用 module
   });
   
   

5. 啟用緩存： 使用 Webpack 的緩存功能，減少重復(fù)構(gòu)建時(shí)間。

   // webpack.config.js
   cache: {
     type: 'filesystem',
     buildDependencies: {
       config: [__filename],
     },
   },
   
   

6. 使用 CDN： 將不常更改的資源（如第三方庫、字體文件）放在 CDN 上，減輕服務(wù)器負(fù)擔(dān)。

7. 提前加載關(guān)鍵資源： 使用 preload 和 prefetch 標(biāo)簽，預(yù)加載或提前加載關(guān)鍵資源。

8. 減少不必要的插件和 Loader： 移除不必要的 Webpack 插件和 Loader，只保留項(xiàng)目所需的。

9. 分離開發(fā)和生產(chǎn)配置： 將 Webpack 配置分為開發(fā)和生產(chǎn)兩個(gè)文件，通過環(huán)境變量來選擇使用哪個(gè)配置。

10. 使用 Webpack Bundle Analyzer： 使用 Bundle Analyzer 工具分析打包后的文件，查找文件大小過大的模塊。

11. 優(yōu)化圖片資源： 使用 Image Webpack Loader 或 Image Minimizer Webpack Plugin 來優(yōu)化圖片資源。

12. 使用 DllPlugin： 使用 DllPlugin 和 DllReferencePlugin 提前編譯一些不經(jīng)常變化的依賴。

13. 使用緩存組： 在代碼分割配置中使用緩存組，更精細(xì)地控制分割。

以上是一些常見的 Webpack 優(yōu)化方法，具體的優(yōu)化策略會(huì)根據(jù)項(xiàng)目的需求和情況而變化。優(yōu)化 Webpack 配置需要根據(jù)項(xiàng)目的具體情況選擇合適的方法，以提高項(xiàng)目的性能和開發(fā)體驗(yàn)。

66**.Vue data 中某一個(gè)屬性的值發(fā)生改變后，視圖會(huì)立即同步執(zhí)行重新渲染嗎？**

在 Vue 中，當(dāng) data 中某個(gè)屬性的值發(fā)生改變后，視圖不會(huì)立即同步執(zhí)行重新渲染。Vue 采用了一種異步更新的策略來提高性能，以減少不必要的視圖更新次數(shù)。

具體來說，當(dāng)你修改 data 中的某個(gè)屬性時(shí)，Vue 會(huì)將這次修改標(biāo)記為"臟"，但不會(huì)立即觸發(fā)視圖的更新。相反，Vue 會(huì)等待下一個(gè)事件循環(huán)（Event Loop）中的微任務(wù)隊(duì)列執(zhí)行時(shí)，才會(huì)對(duì)臟數(shù)據(jù)進(jìn)行批量處理，將所有的變更一起應(yīng)用到視圖中。這個(gè)過程稱為"異步更新隊(duì)列"。

這種異步更新策略有助于提高性能，因?yàn)樗軌蚝喜⒍鄠€(gè)數(shù)據(jù)變更，減少不必要的重復(fù)渲染。例如，如果在同一個(gè)事件循環(huán)中連續(xù)修改了某個(gè)屬性的值多次，Vue 只會(huì)執(zhí)行一次視圖更新。

盡管 Vue 會(huì)等待下一個(gè)事件循環(huán)才執(zhí)行視圖更新，但對(duì)開發(fā)者來說，這種更新機(jī)制是透明的，你可以像同步操作一樣修改 data 中的數(shù)據(jù)，Vue 會(huì)自動(dòng)處理更新。

如果你需要在數(shù)據(jù)發(fā)生改變后立即執(zhí)行某些操作，你可以使用 Vue 提供的 $nextTick 方法，它會(huì)在下一次 DOM 更新循環(huán)結(jié)束后執(zhí)行回調(diào)函數(shù)。這樣你就可以在視圖更新之后執(zhí)行需要的操作。

// 修改 data 中的屬性
this.message = 'New Message';

// 在下一次 DOM 更新后執(zhí)行回調(diào)
this.$nextTick(() => {
  // 此處可以訪問已經(jīng)更新后的視圖
});

總之，Vue 的異步更新策略和 $nextTick 方法可以幫助你更好地管理數(shù)據(jù)和視圖之間的關(guān)系，提高性能并確保一致的用戶體驗(yàn)。

67.vuex如何實(shí)現(xiàn)數(shù)據(jù)持久化（即刷新后數(shù)據(jù)還保留）？

Vuex是一個(gè)為Vue.js應(yīng)用程序開發(fā)的狀態(tài)管理模式。它采用集中式存儲(chǔ)管理應(yīng)用的所有組件的狀態(tài)，并以相應(yīng)的規(guī)則保證狀態(tài)以一種可預(yù)測的方式發(fā)生變化。但它默認(rèn)不支持?jǐn)?shù)據(jù)持久化，即當(dāng)頁面刷新或應(yīng)用程序重新加載時(shí)，狀態(tài)將丟失。

為了實(shí)現(xiàn)Vuex數(shù)據(jù)持久化，你可以使用第三方插件（如vuex-persistedstate）或自定義存儲(chǔ)方案。以下是一個(gè)簡單的示例，展示如何使用vuex-persistedstate插件來實(shí)現(xiàn)Vuex數(shù)據(jù)持久化：

1. 安裝vuex-persistedstate：

npm install --save vuex-persistedstate

1. 在Vuex store中導(dǎo)入并使用vuex-persistedstate：

import Vue from 'vue'
import Vuex from 'vuex'
import createPersistedState from 'vuex-persistedstate'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    // your state here
  },
  mutations: {
    // your mutations here
  },
  actions: {
    // your actions here
  },
  modules: {
    // your modules here
  },
  plugins: [createPersistedState()]
})

在這個(gè)例子中，我們使用了vuex-persistedstate插件，并在Vuex store的plugins選項(xiàng)中添加了它。這將使所有store中的數(shù)據(jù)在頁面刷新或應(yīng)用程序重新加載時(shí)保持持久化。

請(qǐng)注意，vuex-persistedstate插件默認(rèn)使用localStorage來存儲(chǔ)數(shù)據(jù)。如果你需要使用其他存儲(chǔ)方案，可以傳遞一個(gè)自定義的storage選項(xiàng)給vuex-persistedstate。例如，如果你想使用sessionStorage，可以這樣做：

import Vue from 'vue'
import Vuex from 'vuex'
import createPersistedState from 'vuex-persistedstate'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    // your state here
  },
  mutations: {
    // your mutations here
  },
  actions: {
    // your actions here
  },
  modules: {
    // your modules here
  },
  plugins: [createPersistedState({ storage: window.sessionStorage })]
})

68.vue中 keep-alive 組件的概念、作用、原理、特性、優(yōu)點(diǎn)、缺點(diǎn)、區(qū)別、使用場景

概念：<keep-alive> 是 Vue.js 提供的一個(gè)內(nèi)置組件，用于緩存和保持動(dòng)態(tài)組件（或者說是被包裹的組件）的狀態(tài)，以避免不必要的銷毀和重新創(chuàng)建。它可以在組件切換時(shí)保留組件的狀態(tài)、數(shù)據(jù)和 DOM 結(jié)構(gòu)。

作用：

• 緩存組件：<keep-alive> 可以將其包裹的組件緩存起來，避免多次創(chuàng)建和銷毀組件實(shí)例。
• 保持組件狀態(tài)：緩存的組件保持其狀態(tài)，包括數(shù)據(jù)、DOM 結(jié)構(gòu)和當(dāng)前的活動(dòng)狀態(tài)。
• 提高性能：通過緩存，可以減少不必要的組件渲染，提高頁面性能和響應(yīng)速度。

原理：<keep-alive> 使用了 Vue 內(nèi)置的抽象組件 <component>，它會(huì)根據(jù)內(nèi)部的組件的 key 屬性來管理組件的緩存和激活。當(dāng)一個(gè)組件被包裹在 <keep-alive> 內(nèi)時(shí)，該組件的 beforeDestroy 鉤子不會(huì)被調(diào)用，而是被緩存，以便后續(xù)重新渲染時(shí)復(fù)用。

特性：

• include 和 exclude 屬性：可以通過這兩個(gè)屬性來配置哪些組件需要被緩存或排除在緩存之外。
• max 屬性：可以設(shè)置緩存的組件實(shí)例的最大數(shù)量，當(dāng)超過這個(gè)數(shù)量時(shí)，最早被訪問的組件會(huì)被銷毀。

優(yōu)點(diǎn)：

• 提高性能：避免了多次創(chuàng)建和銷毀組件，減少了不必要的性能開銷。
• 保持狀態(tài)：緩存的組件可以保持其狀態(tài)和數(shù)據(jù)，用戶切換時(shí)無需重新加載數(shù)據(jù)。

缺點(diǎn)：

• 占用內(nèi)存：緩存的組件會(huì)占用一定的內(nèi)存，如果緩存過多組件可能會(huì)導(dǎo)致內(nèi)存占用增加。

區(qū)別：

• <keep-alive> 主要用于緩存動(dòng)態(tài)組件或視圖，而 vuex 主要用于全局狀態(tài)管理。
• <keep-alive> 只能用于緩存組件，vuex 可以用于管理任何類型的數(shù)據(jù)。

使用場景：

• 切換頁簽或選項(xiàng)卡：當(dāng)用戶在不同的頁簽之間切換時(shí)，可以使用 <keep-alive> 緩存各個(gè)頁簽的組件，以提高切換速度。
• 路由導(dǎo)航：在路由導(dǎo)航切換時(shí)，可以使用 <keep-alive> 緩存路由組件，以減少不必要的網(wǎng)絡(luò)請(qǐng)求。
• 彈窗和對(duì)話框：可以使用 <keep-alive> 緩存彈窗或?qū)υ捒蚪M件，以提高響應(yīng)速度。
• 數(shù)據(jù)列表：當(dāng)用戶瀏覽大量數(shù)據(jù)列表時(shí)，可以使用 <keep-alive> 緩存列表頁的組件，以減少重新加載數(shù)據(jù)的時(shí)間。

示例：

<template>
  <div>
    <button @click="toggleComponent">Toggle Component</button>
    <keep-alive>
      <component :is="currentComponent"></component>
    </keep-alive>
  </div>
</template>

<script>
import FirstComponent from './FirstComponent.vue';
import SecondComponent from './SecondComponent.vue';

export default {
  data() {
    return {
      currentComponent: 'FirstComponent',
    };
  },
  methods: {
    toggleComponent() {
      this.currentComponent = this.currentComponent === 'FirstComponent' ? 'SecondComponent' : 'FirstComponent';
    },
  },
  components: {
    FirstComponent,
    SecondComponent,
  },
};
</script>

在上述示例中，使用了 <keep-alive> 來緩存兩個(gè)不同的組件，并通過按鈕切換它們的顯示。這可以幫助提高組件切換時(shí)的性能和用戶體驗(yàn)。

70.vue中的路由模式的概念、作用、特性、優(yōu)點(diǎn)、缺點(diǎn)、區(qū)別、使用場景

Vue 中的路由模式指的是路由的工作方式和URL的展示形式。Vue Router 支持三種主要的路由模式：哈希模式（Hash）、歷史模式（History）、和抽象模式（Abstract）。

1. 哈希模式（Hash）：

• 概念： 哈希模式使用URL中的哈希部分（#）來管理路由狀態(tài)，所有的路由都被解析為相對(duì)于根路徑的哈希值。
• 作用： 用于在不同路由之間進(jìn)行切換，并保持頁面無需重新加載。
• 特性： 使用 # 符號(hào)來表示路由，例如 http://example.com/#/route。
• 優(yōu)點(diǎn)： 不需要特殊配置服務(wù)器，可以在前端單頁應(yīng)用中使用。
• 缺點(diǎn)： URL 中含有 # 符號(hào)，不夠直觀，可能不太友好。

2. 歷史模式（History）：

• 概念： 歷史模式使用瀏覽器的 pushState 和 replaceState 方法來管理路由狀態(tài)，使URL看起來像普通的URL。
• 作用： 提供更加直觀的URL，不包含 # 符號(hào)。
• 特性： 使用普通的URL，例如 http://example.com/route。
• 優(yōu)點(diǎn)： URL更直觀，不含 # 符號(hào)，更友好。
• 缺點(diǎn)： 需要服務(wù)器配置來支持，因?yàn)橹苯釉L問某個(gè)路由會(huì)導(dǎo)致404錯(cuò)誤。

3. 抽象模式（Abstract）：

• 概念： 抽象模式并不直接處理URL，而是依賴于底層的路由引擎（例如vue-router、vue-native-router等）的實(shí)現(xiàn)。
• 作用： 封裝了路由引擎的細(xì)節(jié)，開發(fā)者只需關(guān)心組件和路由的關(guān)系。
• 特性： 對(duì)于開發(fā)者而言，使用抽象模式無需關(guān)心URL的具體形式，僅需要配置好路由規(guī)則即可。
• 優(yōu)點(diǎn)： 隱藏了底層的路由實(shí)現(xiàn)細(xì)節(jié)，開發(fā)更加便捷。
• 缺點(diǎn)： 不夠透明，難以直接查看和操作URL。

區(qū)別和使用場景：

• 哈希模式適用于不需要服務(wù)器配置的前端單頁應(yīng)用，且對(duì)URL格式不敏感的情況。
• 歷史模式適用于需要更直觀URL格式的應(yīng)用，但需要服務(wù)器配置以處理前端路由的情況。
• 抽象模式適用于需要封裝路由細(xì)節(jié)，關(guān)注組件和路由的開發(fā)場景，常用于框架內(nèi)部實(shí)現(xiàn)。

通常來說，選擇哪種路由模式取決于你的項(xiàng)目需求和服務(wù)器配置情況。如果你希望URL更加友好且不包含 # 符號(hào)，可以選擇歷史模式，但需要配置服務(wù)器來支持。如果對(duì)URL格式不敏感，可以使用哈希模式，無需額外配置。如果需要封裝路由細(xì)節(jié)，可以使用抽象模式。文章來源地址http://www.zghlxwxcb.cn/news/detail-733193.html

到了這里，關(guān)于Vue知識(shí)系列（7）每天10個(gè)小知識(shí)點(diǎn)的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！