Vue知识系列（7）每天10个小知识点

---

点赞，你的认可是我创作的动力！

⭐️ 收藏，你的青睐是我努力的方向！

✏️ 评论，你的意见是我进步的财富！

---

系列文章目录

Vue知识系列（1）每天10个小知识点

Vue知识系列（2）每天10个小知识点

Vue知识系列（3）每天10个小知识点

Vue知识系列（4）每天10个小知识点

Vue知识系列（5）每天10个小知识点

Vue知识系列（6）每天10个小知识点

知识点

61.Vue过滤器的概念、作用、特性、优点、缺点、区别、使用场景

Vue 的过滤器（Filters）是一种用来处理文本格式化的功能。它们允许你在插值表达式 {{ }} 中使用管道符 |，将数据经过一系列的处理后再显示在视图中。以下是关于 Vue 过滤器的概念、作用、特性、优点、缺点、区别和使用场景的详细说明：

概念：

• Vue 过滤器是一种可以在模板中对文本进行转换和格式化的功能。
• 过滤器可以用在两个大括号插值表达式 {{ }}、v-bind 表达式和 v-model 绑定中。

作用：

• 格式化数据：过滤器可以将数据以特定的方式进行格式化，比如日期格式化、货币格式化等。
• 数据处理：过滤器可以对数据进行一些处理操作，比如大小写转换、字符串截取等。

特性：

• 可串联：多个过滤器可以串联使用，数据会按照过滤器的顺序依次处理。
• 全局和局部：Vue 支持全局注册和局部注册过滤器。

优点：

• 使模板更清晰：通过将数据处理逻辑移到模板之外，使模板更加简洁易懂。
• 可复用性：可以在不同的地方复用相同的过滤器函数。
• 分离关注点：将数据处理和视图显示分离，提高代码的可维护性。

缺点：

• 性能：过滤器会在每次渲染时都被调用，如果过滤器逻辑复杂或数据量大，可能影响性能。
• 不适用于所有场景：并不是所有的数据处理都适合使用过滤器，某些复杂的逻辑可能更适合在组件内部处理。

区别：

• 过滤器是一种全局可用的功能，而计算属性（Computed Properties）是组件内部的计算属性，可以根据数据的变化实时更新。
• 过滤器适合用于简单的文本格式化和数据处理，而计算属性更适合处理复杂的计算逻辑。

使用场景：

• 日期格式化：将日期数据格式化为指定的显示格式。
• 文本截取：截取长文本并显示部分内容。
• 字符串转换：将字符串转换为大写或小写。
• 货币格式化：将数字数据格式化为货币显示。
• 数据处理：对数据进行一些处理，如过滤、排序等。

示例：

<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 中使用过滤器来格式化文本和数据，以及如何定义和注册过滤器函数。过滤器提供了一种简单而强大的方式来处理模板中的文本和数据。

62.vue目录结构

Vue.js 并没有强制要求使用特定的目录结构，但通常会遵循一种常见的目录结构，以便组织和管理项目代码。这个常见的目录结构通常包括以下目录和文件：

1. src 目录： 这是项目的主要源代码目录，包含了 Vue 组件、路由、状态管理、API 请求等等。在 src 目录下，通常会包含以下子目录：
   • assets：存放静态资源文件，如图片、字体等。
   • components：存放可复用的 Vue 组件。
   • views：存放页面级别的 Vue 组件，通常与路由相关。
   • router：存放 Vue Router 路由配置文件。
   • store：存放 Vuex 状态管理文件。
   • api：存放与后端 API 交互的代码。
   • utils：存放项目中的工具函数或辅助函数。
   • styles：存放全局样式文件。
   • main.js：应用的入口文件，通常包含 Vue 实例的创建和挂载。
2. public 目录： 这个目录存放静态资源，不会经过构建处理，可以直接访问。比如放置一些不需要打包处理的 HTML 文件、favicon.ico 等。
3. dist 目录： 这是项目构建生成的目录，包含了经过构建处理后的文件，通常包括打包后的 JavaScript、CSS、HTML 文件等。这个目录通常不会手动维护，而是由构建工具自动生成。
4. babel.config.js、vue.config.js、package.json 等配置文件： 这些配置文件用于配置项目的构建、依赖、Babel 配置等等。其中，vue.config.js 是用于配置 Vue CLI 项目的配置文件。
5. 其他自定义目录和文件： 除了上述常见的目录和文件，项目中还可能包含其他自定义的目录和文件，具体取决于项目的需求和组织。

这只是一个常见的目录结构示例，实际项目中可以根据需求进行调整和扩展。Vue CLI 也提供了快速初始化项目的功能，可以根据需要选择预设的目录结构，然后根据项目的实际情况进行调整。

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

Vue.js 提供了一些常用的指令修饰符，用于修改指令的行为。这些修饰符通常以点号的方式添加到指令后面。以下是一些常用的 Vue.js 指令及其修饰符：

1. v-on (事件监听指令)：

   • .stop：阻止事件冒泡。
   • .prevent：阻止事件的默认行为。
   • .capture：使用事件捕获模式，从外向内处理事件。
   • .self：只在事件发生元素自身时触发处理程序。
   • .once：只触发一次事件处理程序。

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

2. v-bind (属性绑定指令)：

   • .prop：将 DOM 属性绑定到元素属性而不是 innerHTML。
   • .camel：将绑定的属性名称转换为驼峰式。

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

3. v-model (双向数据绑定指令)：

   • .lazy：将输入事件转换为 change 事件。
   • .number：将输入值转换为数字。
   • .trim：去除输入值的首尾空格。

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

4. v-show (条件显示指令)：

   • 无修饰符

   <div v-show="isVisible">Show mediv>
   
   

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

   • 无修饰符

   <div v-if="isTrue">Truediv>
   <div v-else>Falsediv>
   
   

6. v-for (循环渲染指令)：

   • .key：为 v-for 循环中的元素指定唯一键。

   <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 指令时更灵活的选项，可以根据需要进行选择和组合，以满足不同的需求。修饰符使得指令的行为更加可定制。

64.webpack的概念、作用、原理、特性、优点、缺点、区别、使用场景

Webpack 是一个现代的 JavaScript 应用程序的静态模块打包工具。它是前端开发中常用的构建工具之一，用于将多个模块和资源文件（如 JavaScript、CSS、图片等）打包成一个或多个最终的输出文件，以便在浏览器中加载和运行。

以下是关于 Webpack 的一些重要信息：

• 概念： Webpack 是一个模块打包工具，它将应用程序的所有资源文件视为模块，并通过依赖关系将它们打包成一个或多个输出文件。
• 作用： Webpack 的主要作用是帮助开发者管理和优化前端项目的代码和资源。它可以处理模块之间的依赖关系、实现代码分割、处理资源文件、压缩代码等等。
• 原理： Webpack 的原理是通过配置文件定义入口文件、输出文件、加载器（用于处理不同类型的文件）、插件（用于执行各种构建任务）等信息，然后根据这些配置信息进行模块加载、编译、打包和输出。
• 特性： Webpack 具有模块化、代码分割、懒加载、热模块替换（HMR）、插件系统等特性，使开发者能够更高效地构建和维护前端项目。
• 优点：
  • 有效管理模块依赖。
  • 实现代码分割，减小初始加载时间。
  • 支持各种资源类型的处理。
  • 强大的插件系统，扩展性强。
  • 社区活跃，有大量的插件和工具可用。
• 缺点：
  • 学习曲线较陡峭，配置复杂。
  • 初次配置可能需要花费时间。
  • 构建速度可能会受到项目规模的影响。
• 区别： Webpack 与其他构建工具（如 Grunt、Gulp）相比，更侧重于模块化和代码分割，具有更强大的生态系统和更多的社区支持。
• 使用场景： Webpack 适用于各种类型的前端项目，特别是单页面应用程序（SPA）和大型项目，它能够有效地管理模块化代码、处理各种资源文件、优化性能等。当项目需要复杂的构建流程、模块化管理、代码分割、懒加载等特性时，Webpack 是一个不错的选择。

总之，Webpack 是前端开发中常用的构建工具，它通过模块化和代码分割等特性，帮助开发者更好地组织和管理前端项目，提高项目的可维护性和性能。

65.如何优化webpack配置

优化 Webpack 配置是提高前端项目性能和开发体验的重要步骤之一。以下是一些优化 Webpack 配置的常见方法：

1. 代码分割： 使用 Webpack 的代码分割功能，将应用程序拆分为多个小块，实现按需加载，减少初始加载时间。

   // 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. 懒加载： 使用动态 import 或 require.ensure 实现懒加载，只在需要时加载模块。

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

5. 启用缓存： 使用 Webpack 的缓存功能，减少重复构建时间。

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

6. 使用 CDN： 将不常更改的资源（如第三方库、字体文件）放在 CDN 上，减轻服务器负担。

7. 提前加载关键资源： 使用 preload 和 prefetch 标签，预加载或提前加载关键资源。

8. 减少不必要的插件和 Loader： 移除不必要的 Webpack 插件和 Loader，只保留项目所需的。

9. 分离开发和生产配置： 将 Webpack 配置分为开发和生产两个文件，通过环境变量来选择使用哪个配置。

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

11. 优化图片资源： 使用 Image Webpack Loader 或 Image Minimizer Webpack Plugin 来优化图片资源。

12. 使用 DllPlugin： 使用 DllPlugin 和 DllReferencePlugin 提前编译一些不经常变化的依赖。

13. 使用缓存组： 在代码分割配置中使用缓存组，更精细地控制分割。

以上是一些常见的 Webpack 优化方法，具体的优化策略会根据项目的需求和情况而变化。优化 Webpack 配置需要根据项目的具体情况选择合适的方法，以提高项目的性能和开发体验。

66**.Vue data 中某一个属性的值发生改变后，视图会立即同步执行重新渲染吗？**

在 Vue 中，当 data 中某个属性的值发生改变后，视图不会立即同步执行重新渲染。Vue 采用了一种异步更新的策略来提高性能，以减少不必要的视图更新次数。

具体来说，当你修改 data 中的某个属性时，Vue 会将这次修改标记为"脏"，但不会立即触发视图的更新。相反，Vue 会等待下一个事件循环（Event Loop）中的微任务队列执行时，才会对脏数据进行批量处理，将所有的变更一起应用到视图中。这个过程称为"异步更新队列"。

这种异步更新策略有助于提高性能，因为它能够合并多个数据变更，减少不必要的重复渲染。例如，如果在同一个事件循环中连续修改了某个属性的值多次，Vue 只会执行一次视图更新。

尽管 Vue 会等待下一个事件循环才执行视图更新，但对开发者来说，这种更新机制是透明的，你可以像同步操作一样修改 data 中的数据，Vue 会自动处理更新。

如果你需要在数据发生改变后立即执行某些操作，你可以使用 Vue 提供的 $nextTick 方法，它会在下一次 DOM 更新循环结束后执行回调函数。这样你就可以在视图更新之后执行需要的操作。

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

// 在下一次 DOM 更新后执行回调
this.$nextTick(() => {
  // 此处可以访问已经更新后的视图
});

总之，Vue 的异步更新策略和 $nextTick 方法可以帮助你更好地管理数据和视图之间的关系，提高性能并确保一致的用户体验。

67.vuex如何实现数据持久化（即刷新后数据还保留）？

Vuex是一个为Vue.js应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。但它默认不支持数据持久化，即当页面刷新或应用程序重新加载时，状态将丢失。

为了实现Vuex数据持久化，你可以使用第三方插件（如vuex-persistedstate）或自定义存储方案。以下是一个简单的示例，展示如何使用vuex-persistedstate插件来实现Vuex数据持久化：

1. 安装vuex-persistedstate：

npm install --save vuex-persistedstate

1. 在Vuex store中导入并使用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()]
})

在这个例子中，我们使用了vuex-persistedstate插件，并在Vuex store的plugins选项中添加了它。这将使所有store中的数据在页面刷新或应用程序重新加载时保持持久化。

请注意，vuex-persistedstate插件默认使用localStorage来存储数据。如果你需要使用其他存储方案，可以传递一个自定义的storage选项给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 组件的概念、作用、原理、特性、优点、缺点、区别、使用场景

概念： 是 Vue.js 提供的一个内置组件，用于缓存和保持动态组件（或者说是被包裹的组件）的状态，以避免不必要的销毁和重新创建。它可以在组件切换时保留组件的状态、数据和 DOM 结构。

作用：

• 缓存组件： 可以将其包裹的组件缓存起来，避免多次创建和销毁组件实例。
• 保持组件状态：缓存的组件保持其状态，包括数据、DOM 结构和当前的活动状态。
• 提高性能：通过缓存，可以减少不必要的组件渲染，提高页面性能和响应速度。

原理： 使用了 Vue 内置的抽象组件 ，它会根据内部的组件的 key 属性来管理组件的缓存和激活。当一个组件被包裹在 内时，该组件的 beforeDestroy 钩子不会被调用，而是被缓存，以便后续重新渲染时复用。

特性：

• include 和 exclude 属性：可以通过这两个属性来配置哪些组件需要被缓存或排除在缓存之外。
• max 属性：可以设置缓存的组件实例的最大数量，当超过这个数量时，最早被访问的组件会被销毁。

优点：

• 提高性能：避免了多次创建和销毁组件，减少了不必要的性能开销。
• 保持状态：缓存的组件可以保持其状态和数据，用户切换时无需重新加载数据。

缺点：

• 占用内存：缓存的组件会占用一定的内存，如果缓存过多组件可能会导致内存占用增加。

区别：

• 主要用于缓存动态组件或视图，而 vuex 主要用于全局状态管理。
• 只能用于缓存组件，vuex 可以用于管理任何类型的数据。

使用场景：

• 切换页签或选项卡：当用户在不同的页签之间切换时，可以使用 缓存各个页签的组件，以提高切换速度。
• 路由导航：在路由导航切换时，可以使用 缓存路由组件，以减少不必要的网络请求。
• 弹窗和对话框：可以使用 缓存弹窗或对话框组件，以提高响应速度。
• 数据列表：当用户浏览大量数据列表时，可以使用 缓存列表页的组件，以减少重新加载数据的时间。

示例：

<template>
  <div>
    <button @click="toggleComponent">Toggle Componentbutton>
    <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>

在上述示例中，使用了 来缓存两个不同的组件，并通过按钮切换它们的显示。这可以帮助提高组件切换时的性能和用户体验。

70.vue中的路由模式的概念、作用、特性、优点、缺点、区别、使用场景

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

1. 哈希模式（Hash）：

• 概念： 哈希模式使用URL中的哈希部分（#）来管理路由状态，所有的路由都被解析为相对于根路径的哈希值。
• 作用： 用于在不同路由之间进行切换，并保持页面无需重新加载。
• 特性： 使用 # 符号来表示路由，例如 http://example.com/#/route。
• 优点： 不需要特殊配置服务器，可以在前端单页应用中使用。
• 缺点： URL 中含有 # 符号，不够直观，可能不太友好。

2. 历史模式（History）：

• 概念： 历史模式使用浏览器的 pushState 和 replaceState 方法来管理路由状态，使URL看起来像普通的URL。
• 作用： 提供更加直观的URL，不包含 # 符号。
• 特性： 使用普通的URL，例如 http://example.com/route。
• 优点： URL更直观，不含 # 符号，更友好。
• 缺点： 需要服务器配置来支持，因为直接访问某个路由会导致404错误。

3. 抽象模式（Abstract）：

• 概念： 抽象模式并不直接处理URL，而是依赖于底层的路由引擎（例如vue-router、vue-native-router等）的实现。
• 作用： 封装了路由引擎的细节，开发者只需关心组件和路由的关系。
• 特性： 对于开发者而言，使用抽象模式无需关心URL的具体形式，仅需要配置好路由规则即可。
• 优点： 隐藏了底层的路由实现细节，开发更加便捷。
• 缺点： 不够透明，难以直接查看和操作URL。

区别和使用场景：

• 哈希模式适用于不需要服务器配置的前端单页应用，且对URL格式不敏感的情况。
• 历史模式适用于需要更直观URL格式的应用，但需要服务器配置以处理前端路由的情况。
• 抽象模式适用于需要封装路由细节，关注组件和路由的开发场景，常用于框架内部实现。

通常来说，选择哪种路由模式取决于你的项目需求和服务器配置情况。如果你希望URL更加友好且不包含 # 符号，可以选择历史模式，但需要配置服务器来支持。如果对URL格式不敏感，可以使用哈希模式，无需额外配置。如果需要封装路由细节，可以使用抽象模式。