南京xw-面试记录(vue相关)

跨域的方式有哪些? 这些方式有哪些弊端?

跨域（Cross-Origin）指的是在浏览器环境下，当一个网页的 JavaScript 代码向其他域发送请求或获取其他域资源时，由于同源策略限制，会导致请求被阻止。为了实现跨域请求，常见的方式包括以下几种：

1. JSONP（JSON with Padding）：通过动态创建<script>标签，将需要获取的数据包装在回调函数中返回，从而实现跨域请求。但是 JSONP 只支持 GET 请求，且只能获取数据，无法进行其他类型的交互。
2. CORS（Cross-Origin Resource Sharing）：CORS 是一种机制，通过在服务器端设置响应头，允许浏览器跨域访问资源。使用 CORS 需要服务器端的支持，并且需要在客户端发送请求时设置适当的请求头，以获得服务器的许可。
3. WebSocket：WebSocket 是一种全双工通信协议，允许在单个 TCP 连接上进行跨域通信。由于 WebSocket 建立在 HTTP 连接之上，需要服务器端支持 WebSocket 协议。
4. 代理（Proxy）: 使用服务器端代理来转发请求，将跨域请求转换为同源请求。客户端向同源代理发送请求，代理服务器再向目标服务器发送请求并返回结果给客户端。这种方法需要在服务器端进行额外配置。

这些跨域方式各有优缺点：

• JSONP 虽然简单易用，但只支持 GET 请求，且存在安全性问题，容易受到 XSS 攻击。
• CORS 是现代浏览器推荐的跨域解决方案，支持各种类型的请求，但需要服务器端进行相应配置，并且需要浏览器的支持。
• WebSocket 可以实现实时的双向通信，但需要服务器端支持 WebSocket 协议。
• 代理方式可以克服同源策略的限制，但需要额外配置代理服务器。

1. JSONP 示例：

function handleResponse(data) {
  // 处理获取到的数据
  console.log(data);
}

var script = document.createElement('script');
script.src = 'http://api.example.com/data?callback=handleResponse';
document.body.appendChild(script);

2. CORS 示例：

var xhr = new XMLHttpRequest();
xhr.open('GET', 'http://api.example.com/data', true);
xhr.withCredentials = true;  // 如果需要发送凭据，需要设置此项
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    var data = JSON.parse(xhr.responseText);
    // 处理获取到的数据
    console.log(data);
  }
};
xhr.send();

3. WebSocket 示例：

javascriptCopy Code
var socket = new WebSocket('ws://api.example.com/socket');
socket.onopen = function() {
  // 连接建立后的操作
  console.log('WebSocket 连接已建立');
};
socket.onmessage = function(event) {
  // 接收到消息的处理
  var data = JSON.parse(event.data);
  console.log(data);
};
socket.onclose = function() {
  // 连接关闭后的操作
  console.log('WebSocket 连接已关闭');
};

4.以下是使用 Node.js 的 Express 框架实现一个简单的代理服务器的示例代码：

const express = require('express');
const http = require('http');
const https = require('https');
const url = require('url');

const app = express();

app.use('/proxy', (req, res) => {
  // 解析客户端请求的 URL
  const requestUrl = url.parse(req.url);
  
  // 设置目标服务器的地址和路径
  const options = {
    hostname: 'api.example.com',  // 目标服务器的域名或 IP 地址
    path: requestUrl.path,        // 客户端请求的路径
    method: req.method,           // 客户端请求的方法
    headers: req.headers          // 客户端请求的头部信息
  };
  
  // 根据请求协议选择相应的模块发送代理请求
  const proxyReq = (requestUrl.protocol === 'https:') ? https.request : http.request;
  
  // 发送代理请求
  const request = proxyReq(options, (response) => {
    // 将目标服务器的响应转发给客户端
    res.writeHead(response.statusCode, response.headers);
    response.pipe(res);
  });
  
  // 将客户端请求的数据传递给目标服务器
  req.pipe(request);
});

// 启动 Express 应用程序
const port = 8080;
app.listen(port, () => {
  console.log(`代理服务器已启动，监听端口 ${port}`);
});

这段代码创建了一个 Express 应用程序，并使用中间件函数处理 /proxy 路径下的所有请求，将客户端请求转发到目标服务器，并将目标服务器的响应返回给客户端。你可以根据实际情况修改 hostname 和 port 的值，以及其他请求相关的参数。请确保目标服务器允许来自代理服务器的请求，并根据实际需求进行适当的配置和处理。

请谈谈对原型链的理解？

原型链是JavaScript中实现对象之间继承关系的机制，通过对象的__proto__属性连接起来形成一条链式结构。在查找属性或方法时，会按照原型链向上查找，直到找到或到达链尾。原型链可以实现属性和方法的共享和继承。

原型链的顶端是Object.prototype。

请谈谈作用域链的理解？

作用域链是JavaScript中用于查找变量和函数的链式结构。它由多个执行上下文的变量对象组成，通过作用域链，内部执行上下文可以访问外部执行上下文中的变量和函数。作用域链的形成是由函数的定义位置决定的。

执行上下文是JavaScript代码执行时所创建的环境。它包含了变量、函数和其他相关信息。执行上下文分为全局执行上下文和函数执行上下文两种类型。在创建阶段，JavaScript引擎会创建变量对象、建立作用域链和确定this指向。在执行阶段，代码开始执行。执行上下文按照栈的先进后出原则进行创建和销毁。

请解释一下什么是闭包？

闭包（Closure）是指函数可以访问自己的词法作用域以及外部函数的变量，即使在外部函数执行结束后仍然可以访问这些变量。它通过捕获变量的方式形成了一个封闭的作用域环境，使得函数可以继续访问这些变量。

闭包的特点：

• 函数内部定义的函数可以访问外部函数的变量，即使外部函数已经执行完毕。
• 闭包通过保留对外部变量的引用，延长了这些变量的生命周期，避免了被垃圾回收机制回收。

闭包的实现依赖于作用域链的机制。作用域链是指内部函数可以访问外部函数的变量，而外部函数无法访问内部函数的变量。当定义一个函数时，会创建一个闭包，其中包含了当前函数的作用域和所捕获的变量。

下面是一个简单的 JavaScript 闭包示例：

function outerFunction() {
  var outerVariable = 'Hello';

  function innerFunction() {
    console.log(outerVariable);
  }

  return innerFunction;
}

var closure = outerFunction();
closure(); // 输出：Hello

在上述示例中，innerFunction 是一个内部函数，它被定义在 outerFunction 内部，并且可以访问 outerFunction 的变量 outerVariable。即使 outerFunction 已经执行完毕，我们依然可以通过调用 closure 函数来访问并打印出 outerVariable 的值。

通过闭包，我们可以创建私有变量和函数，实现信息隐藏和封装，以及创建模块化的代码结构。但需要注意，闭包可能导致内存泄漏，因为被捕获的变量无法被垃圾回收机制释放。因此，在使用闭包时，需要注意合理管理内存，避免滥用。

你知道webpack中的loader和plugin吗？

是的，Webpack是一个现代化的前端打包工具，它可以将多个模块打包成一个或多个浏览器可识别的文件。在Webpack中，Loader和Plugin是两个非常重要的概念。

Loader是用于对模块源代码进行转换的工具，它可以处理各种类型的文件，并将其转换为JavaScript模块。例如，当Webpack遇到一个CSS文件时，就需要使用CSS Loader将其转换为JavaScript模块，从而使Webpack可以处理它。

Plugin是用于扩展Webpack功能的工具，它可以在Webpack构建过程中执行一些额外的任务。例如，可以使用HtmlWebpackPlugin插件来自动生成HTML文件，或使用UglifyJS插件来压缩JavaScript代码。

Webpack的Loader和Plugin都可以通过npm安装，然后在Webpack配置文件中进行配置和使用。通常情况下，需要根据项目需求选择合适的Loader和Plugin，并进行组合使用，以实现最佳的打包效果。

以下是一个使用Webpack中的Loader和Plugin的代码示例：

假设我们的项目中有一个名为app.js的JavaScript文件和一个名为style.css的CSS文件，我们需要将它们打包成一个浏览器可识别的文件。我们可以使用Webpack来完成这个任务。

首先，在项目中安装必要的依赖：

npm install webpack webpack-cli css-loader style-loader html-webpack-plugin --save-dev

然后，创建一个Webpack配置文件webpack.config.js，配置Loader和Plugin：

const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './src/app.js',
  output: {
    filename: 'bundle.js',
    path: __dirname + '/dist'
  },
  module: {
    rules: [
      {
        test: /.css$/,
        use: ['style-loader', 'css-loader']
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html'
    })
  ]
};

在上述代码中，我们使用了两个Loader：css-loader和style-loader。当Webpack遇到一个CSS文件时，会首先使用css-loader将其转换为JavaScript模块，然后再使用style-loader将其动态地插入到HTML文件中。

此外，我们还使用了一个Plugin：HtmlWebpackPlugin。它可以自动生成HTML文件，并将打包后的JavaScript文件自动引入到HTML文件中。

最后，运行Webpack命令进行打包：

npx webpack

以上就是一份简单的使用Webpack中的Loader和Plugin的代码示例。

vue2和vue3中watch的区别？

1. 语法不同：Vue2中使用watch属性定义观察者，而Vue3中使用watch()函数。
2. 自动清除：Vue3中的观察者默认情况下会在组件卸载时自动清除，避免了内存泄漏问题。
3. 懒执行：Vue3中的观察者默认情况下是懒执行的，只有当被观察的数据发生变化时才会执行回调，提高了性能。

而Vue2中的watch存在一个弊端，就是无法监听到对象或数组内部属性的变化。例如，我们只能通过监听数组本身的变化来检测到数组中元素的变化，而无法直接监听数组中某个元素的变化。这个问题可以通过深度监听或者手动触发watcher来解决，但会增加代码的复杂度。Vue3中则可以通过选项deep或ref来轻松地实现监听对象或数组内部属性的变化。

以下是在Vue2中如何监听对象或数组内部属性的变化的例子：

// Vue2中监听对象或数组内部属性的变化
export default {
  data() {
    return {
      person: {
        name: 'Alice',
        age: 20
      },
      list: ['a', 'b', 'c']
    }
  },
  watch: {
    person: {
      handler(newVal, oldVal) {
        console.log('person变化了', newVal, oldVal)
      },
      deep: true // 深度监听对象的变化
    },
    list: {
      handler(newVal, oldVal) {
        console.log('list变化了', newVal, oldVal)
      },
      deep: true // 深度监听数组的变化
    }
  },
  mounted() {
    // 使用Vue.set方法修改内部属性
    this.$set(this.person, 'name', 'Bob')

    // 手动触发watcher
    this.list.splice(0, 1, 'd')
  }
}

在上述代码中，我们定义了一个person对象和一个list数组，并使用watch来观察它们的变化。在mounted钩子中，我们使用Vue.set方法和手动触发watcher来模拟数据的变化。

需要注意的是，在Vue2中如果要监听对象或数组内部属性的变化，需要设置deep选项为true，以深度监听对象或数组的变化。而当使用Vue.set方法修改内部属性时，Vue会自动触发watcher；而在手动触发watcher时，需要调用数组的变异方法（如splice）来触发watcher，才能监听到内部属性的变化。

vue2和Vue3中响应式有什么不同？vue2中Object.defineproperty有什么弊端？它能对数组进行监控吗？

vue2的响应式原理：

在Vue2中，使用了Object.defineProperty的方式实现响应式。具体原理如下：

1. 在组件初始化时，对data选项中的属性进行递归地劫持，通过Object.defineProperty将每个属性转换为getter和setter。
2. 在模板编译过程中，对使用到data属性的地方添加依赖，建立起响应式的依赖关系。
3. 当组件渲染时，如果访问了响应式属性，会触发相应的getter，在getter中收集该属性的依赖。
4. 当响应式属性发生变化时，会触发相应的setter，通知依赖进行更新，从而实现视图的响应式更新。

这种基于Object.defineProperty的响应式原理虽然简单有效，但也存在一些限制，如无法监听新增属性、无法监听数组索引和长度的变化等。

vue3的响应式原理：

在Vue3中，采用了Proxy的方式实现响应式。具体原理如下：

1. 在组件初始化时，通过Proxy代理对象，拦截对数据的访问和修改操作。
2. 当访问数据时，会触发Proxy的get拦截器，收集相关的依赖。
3. 当修改数据时，会触发Proxy的set拦截器，通知依赖进行更新。
4. Vue3使用了基于代理的观察机制，能够精确追踪到组件模板中实际使用的数据，从而减少不必要的更新。

由于Proxy的强大功能和灵活性，Vue3的响应式系统在性能和功能上都有了显著的提升。它可以监听任意深度的对象属性，并且能够监听数组索引和长度的变化。此外，Vue3还支持Map、Set和WeakMap等集合类型的响应式处理，使得开发者能够更方便地处理复杂的数据结构。

下面是使用Object.defineProperty和Proxy的代码示例：

使用Object.defineProperty：

// 定义一个对象
const obj = {}

// 使用Object.defineProperty将属性转换为响应式
Object.defineProperty(obj, 'message', {
  get() {
    console.log('访问了message属性')
    return this._message
  },
  set(value) {
    console.log('修改了message属性')
    this._message = value
  }
})

// 访问属性
console.log(obj.message) // 输出: 访问了message属性

// 修改属性
obj.message = 'Hello, Object.defineProperty!' // 输出: 修改了message属性

在上面的示例中，我们使用Object.defineProperty将obj对象的message属性转换为响应式。当我们访问和修改message属性时，会触发相应的get和set函数，从而实现响应式的效果。

使用Proxy：

// 创建一个目标对象
const target = {
  message: 'Hello, Proxy!'
}

// 创建一个代理对象
const proxy = new Proxy(target, {
  get(target, key) {
    console.log('访问了' + key + '属性')
    return target[key]
  },
  set(target, key, value) {
    console.log('修改了' + key + '属性')
    target[key] = value
  }
})

// 访问属性
console.log(proxy.message) // 输出: 访问了message属性

// 修改属性
proxy.message = 'Hello, Proxy!' // 输出: 修改了message属性

在上面的示例中，我们使用Proxy创建了一个代理对象proxy，将target对象进行代理。当我们访问和修改proxy的属性时，会触发相应的get和set拦截器函数，从而实现响应式的效果。

你用过插槽吗？在什么场景下会使用它?

在常见的业务场景中，我们通常会使用Vue的插槽。以下是一些常见的业务场景：

1. 布局组件：当我们需要创建一个通用的布局组件，但希望每个具体页面能够在不同位置插入自定义内容时，可以使用插槽。通过在布局组件中定义插槽，我们可以在各个页面中根据需要插入内容，从而实现灵活的布局。
2. 列表渲染：当我们需要展示一个列表，并且每个列表项的内容可能不同，可以使用插槽。通过在列表组件中定义插槽，在使用列表组件时，可以为每个列表项传入不同的内容，以实现个性化的展示。
3. 表单验证：当我们需要对表单进行验证，并且验证结果需要以特定的方式展示时，可以使用插槽。通过在表单组件中定义插槽，我们可以在验证结果组件中插入自定义的错误提示信息，从而实现对表单验证结果的定制化展示。

总的来说，Vue的插槽功能可以在需要动态插入内容或定制化展示的场景中发挥作用。它提供了一种灵活的组件通信机制，使得我们能够更好地构建可复用和可扩展的Vue组件。

你知道BFC吗？

是的，我知道BFC，它代表“块级格式化上下文”（Block Formatting Context），是一种Web页面渲染的一部分，用于控制块级盒子的布局和浮动元素的交互。

BFC是一个独立的渲染区域，具有自己的布局规则，可以包含浮动的元素，并且不会与外部元素发生重叠。在BFC中，每个盒子的左外边缘会触碰到容器的左边缘，而右边缘也同样如此。因此，BFC内部的所有元素都会形成一个紧密的排列，不会出现浮动元素造成的高度塌陷问题。

BFC主要解决以下几类问题：

1. 清除浮动：当一个容器内部存在浮动元素时，如果没有清除浮动，容器的高度将会塌陷，导致页面布局混乱。通过创建BFC，可以使得容器的高度被内部浮动元素撑开，从而避免高度塌陷的问题。
2. 避免margin重叠：当两个相邻的盒子都设置了margin时，它们的margin会发生重叠，导致间距变小。通过将其中一个盒子放入BFC中，可以避免margin重叠的问题。
3. 防止文字环绕：当一个容器包含浮动元素时，容器的文字可能会围绕着浮动元素排列，影响页面布局。通过创建BFC，可以使得文字不会环绕浮动元素，保持页面布局的稳定性。

解决以上问题的主要方法是通过设置容器的CSS属性来创建BFC。常见的创建BFC的方式有以下几种：

1. 设置overflow属性为非visible值，例如hidden、auto等。
2. 设置display属性为inline-block、table-cell、table-caption、flex、grid等。
3. 设置float属性为left、right。
4. 设置position属性为absolute或fixed。

总的来说，通过创建BFC可以有效地解决一些页面布局中常见的问题，避免布局混乱和不可预期的显示效果。

浏览器的文字最小为12px，如何展示更小的字(用css中的scale)?

根据浏览器的最小字号限制，直接使用CSS无法将字体大小设置为小于12px。但是可以通过一些技巧实现在视觉上看起来更小的字体效果。以下是一些常用的方法：

1. 使用transform缩放：可以使用transform: scale()属性将文本进行缩放，从而达到视觉上缩小字体的效果。例如，transform: scale(0.8); 将字体缩小为原来的80%。

.small-text {
  transform: scale(0.8);
}

2. 使用伪元素和缩放：可以创建一个伪元素，然后对其应用缩放效果，并将原始文本隐藏。这样可以实现视觉上缩小字体的效果。

.small-text::before {
  content: attr(data-text);
  transform: scale(0.8);
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  white-space: nowrap;
}
.small-text {
  font-size: 12px;
  color: transparent;
}

HTML示例：

<span class="small-text" data-text="Small Text"></span>

3. 使用像素单位的位移：通过设置text-indent属性为负值，将文本向左位移，从而实现视觉上缩小字体的效果。

.small-text {
  font-size: 12px;
  text-indent: -2px;
}

需要注意的是，这些方法只是视觉上缩小字体的效果，实际上字体的物理大小仍然是12px或更大。因此，用户可以通过浏览器的缩放功能来调整页面的显示比例，以适应自己的阅读需求。同时，还要注意这些方法可能会影响到文字的可读性和交互体验，使用时需要谨慎权衡。

请描述一下你最近的项目(警务系统)，里面主要负责什么功能?你是怎么设计权限的呢？权限是只到页面级吗？

在设计一个前端网站的权限系统时，可以考虑以下几个方面：

1. 用户角色：确定不同用户所属的角色，例如管理员、普通用户等。
2. 权限级别：确定每个角色拥有的权限级别，例如读取、创建、编辑、删除等。
3. 路由权限控制：根据用户角色和权限级别，控制用户能够访问的路由或页面。

下面是一个简单的前端权限设计的示例代码：

// 定义角色和对应的权限级别
const roles = {
  admin: 3,
  user: 1,
  guest: 0,
};

// 模拟当前登录用户的角色和权限级别（可从后端获取）
const currentUser = {
  role: 'admin',
};

// 定义路由和需要的权限级别
const routes = [
  { path: '/dashboard', requiredRole: 1 },
  { path: '/users', requiredRole: 3 },
  { path: '/settings', requiredRole: 3 },
];

// 检查当前用户是否有权限访问某个路由
function checkAccess(path) {
  const route = routes.find((r) => r.path === path);
  if (route) {
    const requiredRole = route.requiredRole;
    const userRole = roles[currentUser.role];
    if (userRole >= requiredRole) {
      return true; // 有权限
    }
  }
  return false; // 无权限
}

// 在路由守卫中使用权限检查
router.beforeEach((to, from, next) => {
  if (checkAccess(to.path)) {
    next(); // 有权限，继续访问
  } else {
    next('/403'); // 无权限，跳转到权限不足页面
  }
});

在上述示例中，我们定义了三个角色（admin、user、guest）和对应的权限级别。然后定义了一些路由，每个路由都需要指定所需的最低权限级别。在路由守卫中，我们使用checkAccess()函数来检查当前用户是否有权限访问某个路由。如果有权限，就继续访问；如果没有权限，则跳转到权限不足页面。

请注意，上述代码只是一个简单示例，实际项目中可能需要更复杂的权限控制逻辑和数据结构。此外，前端权限设计只是起到一定的限制作用，真正的权限验证应该在后端进行，前端只是提供用户友好的界面和错误提示。

websocket和http有什么区别？

WebSocket和HTTP是两种不同的网络通信协议，它们在功能和使用上有一些明显的区别。

1. 连接方式：

   • HTTP是无状态的连接方式，即每次请求都需要建立一个新的连接，服务器处理完请求后立即关闭连接。每个HTTP请求都需要携带完整的请求头和数据，造成了较大的开销。
   • WebSocket则是一种全双工通信协议，它通过在客户端和服务器之间建立一个长连接，实现实时的双向数据传输。WebSocket连接只需建立一次，可以持续保持连接状态，可以随时进行数据的发送和接收。

2. 数据格式：

   • HTTP协议传输的数据通常是文本或二进制数据，但每次传输数据时都需要在请求头中明确指定数据的类型和长度。
   • WebSocket支持以文本或二进制数据的形式传输数据，而且不需要在每次传输时都指定数据的类型和长度。

3. 通信效率：

   • 由于HTTP是无状态的连接方式，每次请求都需要重新建立连接，因此在频繁通信的场景下，HTTP的开销较大。
   • WebSocket建立了长连接，在连接保持的情况下可以进行实时的双向通信，从而减少了连接建立的开销，提高了通信效率。

4. 服务器推送：

   • HTTP是请求-响应模式，客户端发起请求后，服务器才会响应。服务器不能主动向客户端推送数据，只能等待客户端的请求。
   • WebSocket支持服务器主动向客户端推送数据，服务器和客户端可以随时发送消息，实现实时的双向通信。

总结来说，HTTP协议是一种无状态的请求-响应协议，适用于客户端需要定期向服务器请求数据的场景；而WebSocket是一种全双工通信协议，适用于需要实时双向通信的场景，如聊天应用、实时游戏等。

vue2和vue3的生命周期的区别?

Vue 2 生命周期：

1. beforeCreate: 在实例初始化之后、数据观测 (data observer) 和 event/watcher 事件配置之前调用。
2. created: 在实例创建完成后被立即调用。此时实例已完成以下配置：数据观测 (data observer)，属性和方法的运算，watch/event 事件回调。
3. beforeMount: 在挂载开始之前被调用，相关的 render 函数首次被调用。
4. mounted: el 挂载到实例上后调用该钩子。此时，实例的 ��和��被新创建的��.el和el被新创建的vm.el 替换，可以操作 DOM 元素。
5. beforeUpdate: 数据更新时调用，发生在虚拟 DOM 重新渲染和打补丁之前。可以在该钩子中对数据进行改变操作。
6. updated: 虚拟 DOM 重新渲染和打补丁后调用。此时组件 DOM 已更新。
7. beforeDestroy: 实例销毁之前调用。在这一步，实例仍然完全可用。
8. destroyed: 实例销毁后调用。该钩子被调用后，Vue 实例指示的所有东西都会解绑定，所有事件监听器会被移除，所有子实例也会被销毁。

以下是Vue 3中的正确生命周期函数名称和时机：

1. setup: 在组件实例创建之前调用。在这个阶段可以进行响应式数据的初始化、函数的定义以及将需要暴露给模板的数据和方法返回。
2. onBeforeMount: 在挂载开始之前被调用，相关的渲染函数首次被调用。
3. onMounted: 组件实例已经被挂载到DOM后调用。此时，组件的模板已经渲染成真实的DOM元素，可以对DOM进行操作。
4. onBeforeUpdate: 数据更新时调用，发生在重新渲染和打补丁之前。可以在这个钩子中对数据进行改变操作。
5. onUpdated: 重新渲染和打补丁完成后调用。此时组件DOM已经更新。
6. onBeforeUnmount: 在组件即将卸载和删除之前调用。可以在此处清理定时器、取消订阅等操作。
7. onUnmounted: 组件已经卸载和删除后调用。该钩子被调用后，组件实例将不再被保留。

请注意，这些是Vue 3中的正确生命周期函数名称和时机。在Vue 3中，使用Composition API的方式来编写组件，通过setup函数来处理组件的配置和逻辑。

关于el挂载、Vue函数使用和向后台发送请求的时机：

• el挂载：在Vue 2和Vue 3中，都是在mounted生命周期钩子中进行el挂载操作。此时，Vue实例的$el和el已经被替换，并且可以对DOM进行操作。
• Vue函数使用：Vue函数的使用通常发生在Vue实例创建之前的配置过程中，如beforeCreate和created生命周期钩子中。这是进行Vue函数调用和配置的合适时机。
• 向后台发送请求：向后台发送请求通常发生在Vue实例的生命周期钩子中，如created或mounted。可以在这些钩子中使用Vue的内置方法（如axios、fetch等）来发送HTTP请求。

父组件能控制子组件的生命周期吗？

父组件不能直接控制子组件的生命周期，但是可以通过向子组件传递props属性的方式，间接地影响子组件的生命周期。同时，父组件还可以在子组件销毁前，通过将子组件从父组件中移除的方式，间接地影响子组件的生命周期。 在Vue中，父组件无法直接控制子组件的生命周期。然而，可以通过改变props属性的值来影响子组件的行为。以下是一个示例代码，展示了如何通过props属性控制子组件的生命周期。

父组件：

<template>
  <div>
    <button @click="toggleChildComponent">Toggle Child Component</button>
    <child-component :show="showChild" />
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      showChild: true
    };
  },
  methods: {
    toggleChildComponent() {
      this.showChild = !this.showChild;
    }
  }
};
</script>

子组件：

<template>
  <div v-if="show">
    <!-- 子组件的内容 -->
  </div>
</template>

<script>
export default {
  props: {
    show: {
      type: Boolean,
      required: true
    }
  },
  created() {
    console.log('子组件被创建');
  },
  beforeUnmount() {
    console.log('子组件即将卸载');
  }
};
</script>

在上面的代码中，父组件通过showChild属性的值来控制子组件的显示与隐藏。当点击按钮时，toggleChildComponent方法会改变showChild的值，从而影响子组件的渲染。当showChild为true时，子组件会被渲染并触发子组件的created生命周期钩子函数；当showChild为false时，子组件会被销毁并触发子组件的beforeUnmount生命周期钩子函数。

请注意，在Vue 3中，生命周期钩子函数的命名已经有所变化。beforeUnmount在Vue 2中是beforeDestroy，created在Vue 2中是mounted。这里的示例代码是基于Vue 2的生命周期钩子函数命名习惯编写的。

虽然父组件无法直接控制子组件的生命周期，但可以通过改变props属性的值来达到间接控制子组件生命周期的效果。

vue2中data为什么是一个函数?

通过使用函数返回新的数据对象，Vue能够确保每个组件实例都拥有独立的数据状态，避免了共享数据带来的问题。这样，每个组件实例可以自由地修改自己的数据，而不会影响其他组件实例。

vue2中的Object.defineproperty有个弊端就是它只能对对象已有的属性进行监控，对于新增的属性不能监控，如何解决这个问题(我回答的是给对象或数组重新分配空间，但面试官说vue2中本身就有一个函数处理这个问题)

Vue 2中的Object.defineProperty确实存在监控新增属性的限制，而对于新增属性的处理，Vue提供了Vue.set或this.$set方法来解决这个问题。

Vue.set方法接收三个参数：要操作的对象、要设置的属性名、要设置的属性值。它会在对象上添加一个新属性，并触发视图的更新。示例代码如下：

// 在Vue组件中使用Vue.set
export default {
  data() {
    return {
      user: {
        name: 'Tom',
        age: 18
      }
    };
  },
  methods: {
    updateUser() {
      Vue.set(this.user, 'gender', 'male');
    }
  }
}

在上面的代码中，当调用updateUser方法时，通过Vue.set方法向user对象中添加了一个新属性gender。Vue.set方法可以保证这个新属性会被响应式地监控，从而触发视图的更新。

除了Vue.set方法外，还可以使用this.$set方法，用法与Vue.set相同。this.$set是实例方法，在Vue组件中可直接使用。

vue2中组件间传值有哪些方法？

1. Props（父子组件通信）：父组件通过props属性将数据传递给子组件。在子组件中，可以通过props选项接收父组件传递的数据。这种方式适用于父子组件之间的简单通信。

2. 自定义事件（子组件向父组件通信）：子组件可以通过$emit方法触发自定义事件，并通过事件参数传递数据给父组件。父组件可以通过监听子组件触发的事件，并在相应的事件处理函数中获取子组件传递的数据。这种方式适用于子组件向父组件通信的场景。

3. 事件总线（非父子组件通信）：可以创建一个独立的Vue实例作为事件总线，用于在组件间进行通信。可以通过事件总线实例的$on方法监听事件，通过$emit方法触发事件，并传递数据。这种方式适用于非父子组件之间的通信。

4. Vuex（全局状态管理）：Vuex是Vue的官方状态管理库，用于管理应用程序的共享状态。可以在任何组件中使用Vuex来读取和修改共享状态。通过定义和注册Vuex的state和mutations，可以在不同组件间共享数据。这种方式适用于大型应用程序或需要多个组件共享状态的场景。

5. refs（父组件访问子组件）：父组件可以使用‘ref‘属性给子组件标记一个引用。然后，父组件可以通过‘refs（父组件访问子组件）：父组件可以使用‘ref‘属性给子组件标记一个引用。然后，父组件可以通过‘refs`来访问子组件实例，从而读取或修改子组件的数据。这种方式适用于父组件需要直接访问子组件的场景。 以下是各种方式的代码示例：

6. Props（父子组件通信）：

<!-- 父组件 -->
<template>
  <div>
    <child :message="text"></child>
  </div>
</template>
<script>
import Child from './Child.vue'
export default {
  components: {
    Child
  },
  data() {
    return {
      text: 'Hello World!'
    }
  }
}
</script>

<!-- 子组件 -->
<template>
  <div>{{ message }}</div>
</template>
<script>
export default {
  props: ['message']
}
</script>

2. 自定义事件（子组件向父组件通信）：

<!-- 子组件 -->
<template>
  <div>
    <button @click="handleClick">Click Me!</button>
  </div>
</template>
<script>
export default {
  methods: {
    handleClick() {
      this.$emit('my-event', { message: 'Hello World!' })
    }
  }
}
</script>

<!-- 父组件 -->
<template>
  <div>
    <child @my-event="handleEvent"></child>
  </div>
</template>
<script>
import Child from './Child.vue'
export default {
  components: {
    Child
  },
  methods: {
    handleEvent(data) {
      console.log(data.message)
    }
  }
}
</script>

3. 事件总线（非父子组件通信）：

// 创建一个事件总线实例
const eventBus = new Vue()

// 发送事件并传递数据
eventBus.$emit('my-event', { message: 'Hello World!' })

// 监听事件并接收数据
eventBus.$on('my-event', data => {
  console.log(data.message)
})

4. Vuex（全局状态管理）：

// store.js
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    message: 'Hello World!'
  },
  mutations: {
    updateMessage(state, message) {
      state.message = message
    }
  },
  actions: {
    updateMessage({ commit }, message) {
      commit('updateMessage', message)
    }
  }
})

// 父组件
<template>
  <div>
    <p>{{ message }}</p>
    <button @click="update">Update</button>
  </div>
</template>
<script>
import { mapState, mapActions } from 'vuex'
export default {
  computed: {
    ...mapState(['message'])
  },
  methods: {
    ...mapActions(['updateMessage']),
    update() {
      this.updateMessage('Hello Vuex!')
    }
  }
}
</script>

5. $refs（父组件访问子组件）：

<!-- 父组件 -->
<template>
  <div>
    <child ref="myChild"></child>
    <button @click="handleClick">Click Me!</button>
  </div>
</template>
<script>
import Child from './Child.vue'
export default {
  components: {
    Child
  },
  methods: {
    handleClick() {
      console.log(this.$refs.myChild.message)
    }
  }
}
</script>

<!-- 子组件 -->
<template>
  <div>{{ message }}</div>
</template>
<script>
export default {
  data() {
    return {
      message: 'Hello World!'
    }
  }
}
</script>

事件总线有什么弊端？

事件总线的使用虽然方便，但也存在一些弊端：

1. 全局变量污染：事件总线实例是一个全局对象，多个组件之间共享相同的事件总线实例，可能导致命名冲突和全局变量污染。如果不小心在不同组件中使用相同的事件名称，可能会导致意外的行为。
2. 难以追踪和调试：由于事件总线是一个全局对象，当应用程序变得复杂时，很难追踪哪个组件触发了事件、哪个组件监听了事件，以及事件的传递路径。这可能使代码的维护和调试变得困难。
3. 耦合度高：使用事件总线进行组件通信会增加组件之间的耦合度。因为任何一个组件都可以监听和触发任何一个事件，所以组件之间的关系变得相互依赖，不容易维护和理解组件之间的关系。
4. 性能影响：由于事件总线是一个全局对象，当应用程序中触发了大量的事件时，事件的处理会变得缓慢，可能会对性能产生一定的影响。

鉴于以上弊端，对于简单的父子组件通信，推荐使用Props；对于非父子组件通信，可以考虑使用Vuex或其他状态管理库来管理共享状态，或者使用更具体的通信方式，如自定义事件等。只有在特定的情况下，事件总线才是一种适用的解决方案。

如何用css画三角形？

可以使用 CSS 的 border 属性来绘制三角形。以下是几种常见的方法：

1. 使用 border 属性：

.triangle {
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 100px solid red;
}

2. 使用伪元素 before 或 after：

.triangle {
  position: relative;
  width: 100px;
  height: 100px;
}

.triangle::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 100px solid red;
}

3. 使用 transform 和 rotate：

.triangle {
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 100px solid red;
  transform: rotate(45deg);
}

在这个例子中，我们先使用 border 属性绘制一个等腰直角三角形，然后通过 transform 属性对其进行旋转变换，使其成为一个等边直角三角形。这里的角度可以根据实际需要进行调整。

值得注意的是，这种方法虽然简单易用，但是在绘制大量三角形时可能会影响性能，因为每个三角形都需要旋转变换一次。在此情况下，建议使用其他方法来绘制三角形。

4. 使用 clip-path 属性

clip-path 属性可以用来剪切元素的显示区域，我们可以利用它来实现各种形状的三角形：

.triangle {
  width: 100px;
  height: 100px;
  background-color: red;
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}

在这个例子中，我们使用 polygon() 函数来定义一个三角形，它接受一系列点的坐标作为参数，从而实现任意形状的三角形。

css中clip-path 属性有什么作用？

clip-path 属性是 CSS3 中用来剪裁元素显示区域的属性，它可以通过各种方式来定义一个剪裁路径。

剪裁路径可以是 SVG 路径、基本形状（如圆形、矩形、多边形等）或函数（如 polygon()、circle()、ellipse() 等），用来定义一个复杂的非矩形区域。元素只会在剪裁路径所定义的区域内显示，超出该区域的部分会被隐藏。

以下是一个使用 clip-path 剪裁圆形的示例：

cssCopy Code
.circle {
  width: 200px;
  height: 200px;
  background-color: red;
  clip-path: circle(100px);
}

在这个例子中，我们使用 circle() 函数来定义一个半径为 100 像素的圆形剪裁路径，从而将元素剪裁为圆形。

需要注意的是，clip-path 属性目前还未被所有浏览器支持，部分浏览器可能需要加上厂商前缀（如 -webkit-clip-path）。此外，一些旧版浏览器可能无法支持 clip-path 属性，因此在使用时需要做好兼容性处理。

call apply bind 有什么区别？

call, apply 和 bind 是 JavaScript 中用于改变函数执行上下文的方法，它们之间有以下区别：

1. call 方法：

   • call 方法允许我们显式地指定函数执行时的上下文对象（即函数内部的 this 值）和传递参数。
   • call 方法的语法是函数对象后跟 call 方法，并接受一个上下文对象作为第一个参数，后面可以跟随多个参数。
   • 通过 call 方法调用函数时，参数需要按照顺序传递。例如：func.call(context, arg1, arg2, ...)

2. apply 方法：

   • apply 方法与 call 方法类似，也允许我们显式地指定函数执行时的上下文对象和传递参数。
   • 与 call 方法不同的是，apply 方法接受一个数组或类数组对象作为参数列表。
   • 在使用 apply 方法调用函数时，参数需要以数组形式传递。例如：func.apply(context, [arg1, arg2, ...])

3. bind 方法：

   • bind 方法会创建一个新函数，并将原函数的执行上下文绑定到指定的对象上。
   • bind 方法的返回值是一个新函数，我们可以稍后调用该函数来触发原函数的执行。
   • bind 方法允许我们在绑定上下文的同时，也可以预先传递参数。
   • 在使用 bind 方法时，参数需要按照顺序传递。例如：var newFunc = func.bind(context, arg1, arg2, ...)，然后可以通过 newFunc() 来调用函数。

总结：

• call 和 apply 方法是直接调用函数并指定上下文对象和参数，它们的区别在于参数的传递方式。
• bind 方法创建一个新函数，并将原函数绑定到指定的上下文对象上，可以预先传递参数。

call apply bind源码?

1. call 方法的实现：

Function.prototype.call = function(context, ...args) {
  // 判断上下文对象是否为 null 或 undefined，如果是，则设置为全局对象（浏览器环境下为 window）
  context = context || window;

  // 将当前函数作为上下文对象的一个属性
  context.__fn__ = this;

  // 执行函数，并将参数传入
  const result = context.__fn__(...args);

  // 删除上下文对象上的临时属性
  delete context.__fn__;

  // 返回函数执行结果
  return result;
};

2. apply 方法的实现：

Function.prototype.apply = function(context, args) {
  // 判断上下文对象是否为 null 或 undefined，如果是，则设置为全局对象（浏览器环境下为 window）
  context = context || window;

  // 将当前函数作为上下文对象的一个属性
  context.__fn__ = this;

  // 执行函数，并传入参数数组
  const result = context.__fn__(...args);

  // 删除上下文对象上的临时属性
  delete context.__fn__;

  // 返回函数执行结果
  return result;
};

3. bind 方法的实现：

Function.prototype.bind = function(context, ...args) {
  const self = this;

  return function(...innerArgs) {
    // 使用 call 方法来改变函数的执行上下文，并传入参数
    return self.call(context, ...args, ...innerArgs);
  };
};

上述代码是简化的示例，实际的 call、apply 和 bind 方法的实现会更复杂，涉及到更多的边界条件和兼容性处理。不同的 JavaScript 引擎和浏览器可能有不同的实现方式。

vue router hash模式和browser模式的区别，分别有什么优缺点?

Vue Router 提供了两种模式来管理路由：Hash 模式和 History 模式。

1. Hash 模式：

   • Hash 模式将路由信息存储在 URL 的哈希（#）部分，例如 http://example.com/#/home。
   • Hash 模式不会触发页面刷新，路由信息的变化只会改变哈希值，不会向服务器发送请求。
   • 在使用 Hash 模式时，服务端只需配置一个固定的页面来响应所有路由请求。
   • Hash 模式的 URL 兼容性好，可以在所有浏览器中正常运行。

2. History 模式：

   • History 模式使用 HTML5 History API 来管理路由，将路由信息存储在浏览器的历史记录中，例如 http://example.com/home。
   • History 模式可以通过修改 URL 的路径来表示路由的变化，不需要哈希值。
   • 在使用 History 模式时，服务端需要配置来确保在任何路由下都返回同一个页面。
   • History 模式可以提供更加友好的 URL，但需要服务器的支持，并且在一些较旧的浏览器中可能不被支持。

优点和缺点：

Hash 模式的优点：

• 兼容性好：Hash 模式可以在所有浏览器中正常运行，不需要服务器的特殊配置。
• 简单易用：无需服务端配合，前端开发者可以轻松地使用 Hash 模式进行开发和调试。
• 部署简单：只需将静态资源部署到任意一个支持静态文件的服务器上即可。

Hash 模式的缺点：

• URL 不够美观：URL 中会包含 # 符号，对于用户来说可能不够友好。
• 有安全风险：Hash 值变化不会触发页面刷新，可能存在一些安全风险，如 XSS 攻击。

History 模式的优点：

• URL 更加美观：History 模式的 URL 没有 # 符号，对于用户来说更加友好。
• 兼容性良好：大多数现代浏览器都支持 HTML5 History API。
• 服务端渲染支持：配合服务端渲染，可以更好地支持 SEO。

History 模式的缺点：

• 兼容性较差：一些较老的浏览器版本（如 IE9 及以下）不支持 History API。
• 需要服务端配置：为了确保在任何路由下都返回同一个页面，需要在服务端进行配置。
• 部署相对复杂：需要确保服务端正确配置，以及在部署时处理 URL 重定向。

根据具体项目需求和实际情况，可以选择适合的路由模式。如果不需要考虑兼容性和服务端配置，且对 URL 美观性有较高要求，可以选择 History 模式；如果需要兼容性好且部署简单，可以选择 Hash 模式。

下面是使用 Vue Router 实现 Hash 模式和 History 模式的示例代码：

// 安装 Vue Router
npm install vue-router

// main.js
import Vue from 'vue';
import VueRouter from 'vue-router';
import Home from './components/Home.vue';
import About from './components/About.vue';

Vue.use(VueRouter);

const router = new VueRouter({
  mode: 'hash', // 使用 hash 模式
  // mode: 'history', // 使用 history 模式
  routes: [
    { path: '/', component: Home },
    { path: '/about', component: About }
  ]
});

new Vue({
  router,
  render: h => h(App)
}).$mount('#app');

在上述示例中，我们首先安装了 Vue Router，并在 main.js 中引入 Vue Router 和相关组件。然后，我们创建了一个 VueRouter 实例，并通过 mode 属性来设置路由模式，可以选择 'hash' 或 'history'。接着，定义了两个路由路径和对应的组件。最后，将 VueRouter 实例传递给 Vue 实例，并通过 $mount() 方法将应用挂载到 HTML 中。

当使用 Hash 模式时，URL 将包含 # 符号，如 http://example.com/#/about。当使用 History 模式时，URL 将更加友好，如 http://example.com/about。根据需要选择合适的模式即可。

请注意，在使用 History 模式时，还需要进行服务器端配置，以确保在任何路由下都返回同一个页面。具体的服务器配置方法可以根据实际情况来进行调整。

冒泡排序和快速排序的区别?

冒泡排序（Bubble Sort）和快速排序（Quick Sort）都是常见的排序算法，它们的主要区别在于排序的方式和性能。

1. 冒泡排序：

   • 冒泡排序是一种简单的排序算法，它重复地遍历待排序的列表，比较相邻元素并交换它们的位置，直到整个列表排序完成。
   • 冒泡排序的基本思想是通过不断地交换相邻元素将最大的元素逐渐移到列表末尾。
   • 冒泡排序的时间复杂度为 O(n^2)，其中 n 是列表的长度。

下面是使用 JavaScript 实现冒泡排序的代码示例：

function bubbleSort(arr) {
  const len = arr.length;
  for (let i = 0; i < len - 1; i++) {
    for (let j = 0; j < len - i - 1; j++) {
      if (arr[j] > arr[j + 1]) {
        // 交换相邻元素的位置
        [arr[j], arr[j + 1]] = [arr[j + 1], arr[j]];
      }
    }
  }
  return arr;
}

const arr = [5, 3, 8, 4, 2];
console.log(bubbleSort(arr)); // 输出 [2, 3, 4, 5, 8]

2. 快速排序：

   • 快速排序是一种高效的排序算法，它采用分治的思想，将原始列表分成较小的子列表，然后递归地对子列表进行排序，最终将它们合并成有序的列表。
   • 快速排序的基本思想是选择一个中间元素作为基准（pivot），将列表中比基准小的元素移到基准的左侧，比基准大的元素移到基准的右侧，然后对左右两个子列表进行递归排序。
   • 快速排序的平均时间复杂度为 O(n log n)，最坏情况下的时间复杂度为 O(n^2)，其中 n 是列表的长度。

下面是使用 JavaScript 实现快速排序的代码示例：

function quickSort(arr) {
  if (arr.length <= 1) {
    return arr;
  }

  const pivotIndex = Math.floor(arr.length / 2);
  const pivot = arr.splice(pivotIndex, 1)[0];
  const left = [];
  const right = [];

  for (let i = 0; i < arr.length; i++) {
    if (arr[i] < pivot) {
      left.push(arr[i]);
    } else {
      right.push(arr[i]);
    }
  }

  return quickSort(left).concat([pivot], quickSort(right));
}

const arr = [5, 3, 8, 4, 2];
console.log(quickSort(arr)); // 输出 [2, 3, 4, 5, 8]

在上述示例中，我们首先定义了 bubbleSort 函数来实现冒泡排序，以及 quickSort 函数来实现快速排序。然后，我们分别使用这两个函数对一个数组进行排序，并输出排序后的结果。

需要注意的是，快速排序是一种递归算法，在每一轮排序中选择一个基准元素，并将列表划分为两部分。然后，对左右两个子列表递归地进行排序，最终合并得到有序的列表。而冒泡排序则是通过不断地交换相邻元素的位置来实现排序。因此，快速排序通常比冒泡排序更加高效。

浅拷贝和深拷贝的区别?

浅拷贝（Shallow Copy）和深拷贝（Deep Copy）是在编程中常用的两种对象复制方式，它们的主要区别在于复制的程度和对原始对象的影响。

1. 浅拷贝：

   • 浅拷贝是指创建一个新对象，新对象的一部分属性和原始对象相同，但引用类型的属性仍然共享同一个内存地址。
   • 浅拷贝只复制了对象的引用，而不是创建一个全新的对象副本。当修改浅拷贝后的对象时，原始对象也会受到影响。
   • 浅拷贝通常使用一些简单的方法，如 Object.assign()、Array.slice() 或扩展运算符(...) 来实现。

下面是一个使用 JavaScript 实现浅拷贝的示例：

const obj1 = { name: 'Alice', age: 25, hobbies: ['reading', 'painting'] };
const obj2 = Object.assign({}, obj1);

obj2.age = 30;
obj2.hobbies.push('swimming');

console.log(obj1); // { name: 'Alice', age: 25, hobbies: ['reading', 'painting', 'swimming'] }
console.log(obj2); // { name: 'Alice', age: 30, hobbies: ['reading', 'painting', 'swimming'] }

在上述示例中，我们使用 Object.assign() 方法将 obj1 对象浅拷贝到 obj2 对象。当我们修改 obj2 对象的属性时，obj1 对象也会受到影响。这是因为 obj2 和 obj1 共享了同一个 hobbies 数组的引用。

2. 深拷贝：

   • 深拷贝是指创建一个全新的对象，新对象的所有属性都与原始对象相同，包括引用类型的属性。
   • 深拷贝会递归地复制原始对象及其所有嵌套对象，确保新对象与原始对象完全独立，修改其中一个对象不会影响另一个对象。
   • 深拷贝可以使用递归算法或者一些库函数来实现，如 JSON.parse(JSON.stringify())、Lodash 的 cloneDeep() 等。

下面是一个使用 JavaScript 实现深拷贝的示例：

const obj1 = { name: 'Alice', age: 25, hobbies: ['reading', 'painting'] };
const obj2 = JSON.parse(JSON.stringify(obj1));

obj2.age = 30;
obj2.hobbies.push('swimming');

console.log(obj1); // { name: 'Alice', age: 25, hobbies: ['reading', 'painting'] }
console.log(obj2); // { name: 'Alice', age: 30, hobbies: ['reading', 'painting', 'swimming'] }

在上述示例中，我们使用 JSON.stringify() 将 obj1 对象转换为字符串，然后再使用 JSON.parse() 将字符串转换为新的对象 obj2。这样可以实现深拷贝，确保修改 obj2 对象不会影响 obj1 对象。

需要注意的是，深拷贝可能会引入额外的性能开销和内存消耗，尤其是在处理大型、嵌套层级较深的对象时。因此，在选择使用浅拷贝还是深拷贝时，需要根据具体情况进行权衡。