• No151.精选前端面试题，享受每天的挑战和学习

    在这里插入图片描述

    🤍 前端开发工程师（主业）、技术博主（副业）、已过CET6
    🍨 阿珊和她的猫_CSDN个人主页
    🕠 牛客高级专题作者、在牛客打造高质量专栏《前端面试必备》
    🍚 蓝桥云课签约作者、已在蓝桥云课上架的前后端实战课程《Vue.js 和 Egg.js 开发企业级健康管理项目》、《带你从入门到实战全面掌握 uni-app》

    文章目录

    Vue里keep-alive的理解

    在 Vue.js 中， 是一个抽象组件，用于在 Vue 组件之间缓存和管理状态。

    组件的主要目的是将包裹的组件保留在内存中，而不是销毁它们。这样做可以避免在组件切换时频繁地创建和销毁组件实例，提高性能和用户体验。

    使用 组件的基本用法是将需要缓存的组件包裹在 标签中，例如：

    <template>
  <div>
    <keep-alive>
      <component-a>component-a>
    keep-alive>
  div>
template>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7

    在上述示例中， 是被 包裹的组件。当 首次被渲染时，它会被缓存并留存在内存中。之后，如果组件被切换到其他地方（比如切换到其他页面），它不会被销毁，而是保持在缓存中。当再次切换回来时，它会从缓存中取出并重新渲染，而不是重新创建一个新的实例。

    除了基本用法之外， 组件还提供了一些配置选项和钩子函数，用于控制缓存和激活过程。下面是一些常用的选项和钩子函数：

    • include：指定哪些组件应该被缓存，可以是组件名称或组件实例。
    • exclude：指定哪些组件不应该被缓存。
    • max：指定最大缓存的组件实例数量，当缓存数量超过该值时，最早缓存的组件将被销毁。
    • activated 和 deactivated：这两个钩子函数分别在组件被激活和停用时调用，可以用来执行一些特定的操作。

    总的来说， 组件是一个强大的工具，可以优化 Vue 应用程序的性能，特别是在需要频繁切换组件的场景中。通过将组件缓存到内存中，可以减少组件的创建和销毁，提升应用的响应速度和用户体验。

    怎么解决跨域问题，讲讲nginx

    要解决跨域问题，可以使用代理服务器（如 Nginx）来进行配置。Nginx 是一个高性能的开源 Web 服务器，它可以用作反向代理服务器来处理跨域请求。

    下面是使用 Nginx 配置解决跨域问题的一般步骤：

    1. 安装和配置 Nginx：首先，需要在服务器上安装并配置 Nginx。你可以遵循 Nginx 的官方文档来完成这个步骤。

    2. 打开 Nginx 配置文件：Nginx 的配置文件通常位于 /etc/nginx 目录下。使用编辑器打开 Nginx 主配置文件，一般是 nginx.conf 或 sites-available/default。

    3. 配置反向代理：在 Nginx 配置文件的 server 块中添加以下配置来设置反向代理：

      server {
  listen 80;
  server_name your-domain.com;

  location /api {
    proxy_pass http://api.example.com;
    # 可能还需要其他相关配置
  }
}

      • 1
      • 2
      • 3
      • 4
      • 5
      • 6
      • 7
      • 8
      • 9

      上述配置中，使用 location 指令来匹配需要进行跨域请求的 URL 路径（例如 /api），然后使用 proxy_pass 指令将请求转发给实际的后端 API 服务器（例如 http://api.example.com）。确保根据实际情况进行相应的配置修改。

    4. 保存并退出配置文件。

    5. 重新加载 Nginx 配置：执行以下命令，重新加载 Nginx 配置文件使其生效。

      sudo service nginx reload

      • 1

    6. 测试跨域请求：现在，你可以在前端应用中通过访问 Nginx 代理服务器来进行跨域请求。将你的前端代码中的 API 请求地址修改为匹配 Nginx 配置中的代理路径，例如 http://your-domain.com/api。

    通过设置通过 Nginx 进行反向代理，将前端请求转发到后端 API 服务器，实现了跨域访问，因为浏览器的同源策略限制是基于域名的，不同域名之间的请求会被阻止。使用 Nginx 进行反向代理可以绕过这种限制，实现跨域请求。

    需要根据实际的项目需求和服务器架构来进行具体的 Nginx 配置。如果需要进一步定制和优化配置，你可以参考 Nginx 的官方文档以及相关资源。

    webpack中loader和plugin有哪些

    在 webpack 中，Loaders 和 Plugins 是两个不同的概念，用于处理不同类型的任务。

    1. Loaders（加载器）：

      • Babel-loader：用于将 ES6+ 代码转换为兼容的 JavaScript 代码。
      • CSS-loader：用于解析 CSS 文件，并处理其中的导入和 URL 引用。
      • Style-loader：将 CSS 代码注入到 HTML 页面中的