前端面试八股

Vue 

Vue双向数据绑定 深入响应式原理

1、scoped原理

 2、组件中data为什么是函数？

 3、如何解决跨域 

1. 使用代理 在开发环境下，你可以配置一个代理来转发API请求，以解决跨域问题。在 vite.config.ts 中进行配置：https://cn.vitejs.dev/config/server-options.html

   server: {
     // http://localhost:5173/api/login -> http://www.test.com/login
     proxy: {
       //api是自行设置的请求前缀，任何请求路径以/api开头的请求将被代理到对应的target目标
       '/api': {
         target: http://www.test.com, //目标域名
         changeOrigin: true, //需要代理跨域
         rewrite: (path) => path.replace(/^\/api/, ''), //路径重写，把'/api'替换为''
         ws: true,// 是否开启 websocket 代理，默认为 false       
       },
     },
   },
   

2. JSONP 如果你需要与不支持CORS的旧版API进行通信，你可以使用JSONP（JSON with Padding）来获取数据。Vue没有直接支持JSONP，但你可以使用第三方库或自行封装实现JSONP请求。

3. CORS（跨域资源共享） 在后端服务中进行配置，允许特定域名的跨域请求。

   const express = require('express');
   const app = express();
   
   app.use((req, res, next) => {
     res.header('Access-Control-Allow-Origin', 'http://your-vue-app.com');
     res.header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE');
     res.header('Access-Control-Allow-Headers', 'Content-Type');
     next();
   });
   
   // 其他路由和中间件
   

4. 使用反向代理 如果你部署的是前后端分离的应用，你可以考虑在部署时使用反向代理服务器来统一处理跨域请求。比如使用Nginx等服务器进行反向代理配置。

4、JavaScript原型链、继承

5、ws: true 的具体用途

（1）双向通信：WebSocket 允许客户端和服务器之间建立持久连接，双方可以随时发送消息。这与传统的 HTTP 请求-响应模型不同，后者是单向的。
（2）实时数据：当需要实时更新数据时（例如，股票价格、聊天消息等），WebSocket 是一个理想的选择。启用 WebSocket 代理后，客户端可以通过 /api 路径与服务器进行实时通信。
（3）避免 CORS 问题：通过代理 WebSocket 连接，可以避免跨域请求带来的问题。代理会将请求转发到目标服务器，确保连接的顺利建立。
（4）简化开发：在开发过程中，使用代理可以方便地测试 WebSocket 功能，而不需要修改客户端代码中的连接地址。