前端技术面常见问题(Vue+JS+C3+H5)

1.vue是如何将元素渲染到屏幕上的浏览器请求后如何渲染到屏幕

简化版浏览器发起请求-->服务器响应请求-->vue-router处理路由规则，根据路由规则去决定加载哪个组件-->决定好去具体加载哪一个组件后，该组件将被渲染；根据组件内的生命周期钩子去请求数据-->数据请求完后渲染模板-->虚拟DOM与实际DOM进行对比，更新不同的部分-->渲染到屏幕

详细版浏览器发送请求-->服务器响应请求-->Vue路由处理请求（Vue-router进行路由管理，Vue-router根据浏览器请求的路径匹配相应的路由规则，并决定加载哪个组件）-->组件渲染（在组件的生命周期钩子函数中，可以进行数据的初始化、异步数据的获取等操作）-->数据的获取和处理（在生命周期钩子函数中可以发送HTTP请求或者使用vuex来获取数据）-->模板渲染（一旦组件的数据准备好，Vue将根据组件模板中的指令将数据动态的渲染到对应的HTML元素上）-->DOM更新（Vue会将虚拟DOM与实际DOM经行比较，并找出需要更新的部分，然后只更新改变的部分）-->最终浏览器会将更新的DOM渲染到屏幕上，用户就可以看到最新的页面内容了

2.如何判断同源

判断的准则：协议、主机、端口是否全部相同方法：创建URL对象，通过URL对象可以解析和操作URL，通过比较它们的属性判断是否同源

ini 复制代码

function isSameOrigin(url1, url2) {
  const parsedUrl1 = new URL(url1);
  const parsedUrl2 = new URL(url2);
 
  return (
    parsedUrl1.protocol === parsedUrl2.protocol &&
    parsedUrl1.host === parsedUrl2.host &&
    parsedUrl1.port === parsedUrl2.port
  );
}
 
// 调用函数
const result = isSameOrigin('https://www.example.com', 'https://subdomain.example.com');
console.log(result); // 输出 false

3.vue2与vue3的区别，或者是vue3有什么优化

1）性能提升：Vue 3 的性能比 Vue 2 有显著提升，包括更快的挂载和更新速度以及更小的内存占用。 2）组合式 API：引入了组合式 API（例如 setup 函数、ref、reactive），提供了更灵活的组件逻辑组织方式，尤其在处理大型或复杂组件时更为高效。 3）更好的 TypeScript 支持：Vue 3 从头开始就用 TypeScript 重写，提供了更好的类型推断和更完善的 TypeScript 支持。 4）响应式系统的重写：Vue 3 使用 Proxy 重写了响应式系统，替代了 Vue 2 中基于 Object.defineProperty 的实现。这使得 Vue 3 能够更高效地追踪变化，同时支持更多类型的数据结构。 5）更小的体积：通过摇树优化（tree-shaking），Vue 3 的体积比 Vue 2 更小 6）编译器优化：Vue 3 的编译器带来了更多优化，如静态提升、片段标记等，有助于减少运行时的工作量。

4.响应式布局有什么了解

响应式布局是一种网页设计方法，旨在使网页能够在不同尺寸的设备上（如手机、平板电脑、桌面电脑等）良好地显示。响应式设计的核心是使用可伸缩的布局、灵活的图像和媒体查询，使得网站能够自动适应用户的屏幕尺寸、平台和方向。 1）弹性布局：使用百分比、弹性盒子（Flexbox）或网格（Grid）布局，而非固定宽度，使得布局可以根据屏幕尺寸变化。 2）媒体查询：CSS媒体查询允许根据不同的屏幕尺寸和特性应用不同的样式规则。 3）可伸缩的图像和媒体内容：确保图像和视频等内容在不同设备上均能正确显示。 4）字体和元素大小调整：调整字体大小和元素尺寸以提高可读性和易用性。5）优化的交互和导航：针对不同设备（尤其是触摸屏设备）优化用户界面和导航。

5.如何让一个元素不可见

1）使用display属性 display：none（完全隐藏元素并且不占据布局空间） 2）使用visibility属性 visibility：hidden（可以使元素不可见但仍然占据布局空间） 3）remove()方法直接从DOM树中移除

6.你如何理解闭包，用途

我的理解是，闭包就是能够读取其他函数内部变量的函数。由于在Javascript语言中，只有函数内部的子函数才能读取局部变量，因此可以把闭包简单理解成"定义在一个函数内部的函数"。所以，在本质上，闭包就是将函数内部和函数外部连接起来的一座桥梁。

用途： 1）封装私有变量和方法

scss 复制代码

function createCounter() {
  let count = 0; // count 是一个私有变量
 
  function increment() { // increment 是一个私有方法
    count++;
    console.log(count);
  }
 
  return increment;
}
 
const counter = createCounter();
counter(); // 输出 1
counter(); // 输出 2
counter(); // 输出 3

2）延续局部变量的生命周期

ini 复制代码

function createTimer() {
  let seconds = 0;
 
  setInterval(function() {
    seconds++;
    console.log(seconds);
  }, 1000);
}
 
createTimer();

在这个示例中，createTimer 函数定义了一个局部变量 seconds，然后创建了一个定时器来每秒钟递增 seconds 变量的值并输出。如果不使用闭包，当 createTimer 函数执行结束后，seconds 变量就会被销毁，定时器也无法继续执行。但是由于定时器的回调函数是一个闭包，它可以一直访问到 createTimer 函数的作用域中的 seconds 变量，从而使得 seconds 变量的生命周期得以延续。 3）保存状态

scss 复制代码

function createLogger() {
  let logs = [];
 
  return function(message) { // 返回一个内部函数
    logs.push(message); // 使用外部作用域中的 logs 变量
    console.log(logs);
  }
}
 
const logger = createLogger();
logger("Hello"); // 输出 ["Hello"]
logger("World"); // 输出 ["Hello", "World"]

4）部分应用函数

javascript 复制代码

function add(a, b) {
  return a + b;
}
 
function add5(b) {
  return add(5, b);
}
 
console.log(add5(10)); // 输出 15
console.log(add5(20)); // 输出 25

在这个示例中，add 函数接受两个参数，返回它们的和。然后我们定义了一个新的函数 add5，它接受一个参数 b，并调用 add 函数来计算 5 和 b 的和。由于 add5 函数使用了 add 函数，因此可以将其视为 add 函数的部分应用。

7.原生和vue的区别

1）原生JS要编写大量的代码去进行状态管理和操作DOM，而Vue提供了组件化和数据绑定等特性，让开发者专注于业务逻辑的实现，减少了繁琐的 DOM 操作和状态管理代码，提高了开发效率和代码可维护性 2）原生JS的稳定性受到浏览器引擎和环境的影响，而Vue通过大量的测试和优化，具有良好的稳定性和性能

8.promise的三个状态有哪些，如何进入准备？如果被拒绝了还可以回到准备和成功吗？

进行中（pending），成功（resolved），失败（rejected）当一个Promise被创建后，他的状态为pending 当Promise成功完成时，它的状态会从pending变为resolved 当Promise失败时，状态会从pending变为rejected

如果一旦变为rejected，就不能再回到pending状态了（但是可以通过获取返回值，并将其变为pending，但是这时就不是将Promise的状态修改了而是创建了新的Promise）

9.你是如何学习的

10.token session cookie区别

区别：1）存储位置不同：token存在client session存在server cockie存在client 2）访问速度：session<cockie<token 3) 安全性不同：cockie<session<token 4）有效期不同：session<token<cockie 5）使用场景不同： token：适合分布式系统和前后端分离的架构 session：适合传统的服务端渲染应用 cockie：适用于任何场景 session和token本质上是没有区别的（session+cockie组合使用是主流解决方法），都是对用户身份的认证机制，只是他们实现的校验机制不同而已（session保存在server，通过redis等中间件获取来校验；token保存在client，通过签名校验的方式去校验），多数场景上使用session会更合理，但如果在单点登录，一次性认证上，使用token会更合适。

11.原型链

这是JS实现继承和共享的机制 JS原型链：在调用一个对象的某个属性或者是某个方法时，它首先会在这个对象本身去找，如果找不到则去它的原型去找，原型找不到则去原型的原型去找，一直找到Object.prototype（到达顶层），如果还是找不到，就返回undefined。 Vue原型链： a. 首先，检查实例自身是否有该方法，如果有，则直接执行。 b. 如果实例自身没有该方法，则沿着原型链向上查找，即通过 __proto__属性（或 Object.getPrototypeOf 方法）访问到 Vue 构造函数的原型上。 c. 如果在 Vue 构造函数的原型上找到了该方法，则执行。 d. 如果在 Vue 构造函数的原型上仍然没有找到该方法，则继续沿着原型链向上查找，直到找到该方法或到达原型链的顶端（即 Object.prototype）为止。

12.div和span的区别

1）展示形式不同：div是block元素，span是inline元素 2）作用范围不同：div是通常用于页面的划分，用其包含其他标签和元素，是一个容器元素；span是文本容器，一般用于对文字内容进行样式调整 3）语义：div是没有语义的元素，span可以用于为文字添加特殊的意义，例如强调某个词或者给文本添加超链接

13.你如何理解JS作用域，介绍一下JS有哪些作用域

JS的作用域是可访问变量的集合，函数和对象同样是变量。 JS中作用域： 1）全局作用域：声明在函数或代码块之外的变量就是全局变量 2）局部作用域：定义在函数内部的变量 3）块级作用域：通过let和const声明的变量具有块级作用域，即这些变量仅在它们被声明的代码块内有效（例如for循环或if语句） 4）词法作用域（实现闭包的基础）：函数的作用域在函数定义时就已经被确定，而不是在函数调用时。

function 复制代码

    var outerVar = 'I am outside!';

    function inner() {
        console.log(outerVar); // 访问外部函数的变量
    }

    return inner;
}

var myInner = outer();
myInner(); // 输出: 'I am outside!'

在这个例子中，inner函数被定义在outer函数内部。即使outer函数执行完毕并且inner函数在全局作用域中被调用，inner函数仍然能够访问outerVar变量。这是因为inner函数的作用域链在其定义时就已经包括了outer函数的作用域。

14.next()

用于迭代器访问下一个元素（调用它可以返回迭代器中的下一个值）一个可迭代对象（Iterable）是指具有 Symbol.iterator 属性的对象，在调用该属性时会返回一个迭代器对象。迭代器对象需要实现一个 next() 方法来返回序列中的下一个元素，直到序列结束时返回 done: true；常见的可迭代对象有数组、字符串、Map、Set，最常见的是数组。

let 复制代码

let iterator = numbers[Symbol.iterator]();

console.log(iterator.next()); // 输出：{ value: 1, done: false }
console.log(iterator.next()); // 输出：{ value: 2, done: false }
console.log(iterator.next()); // 输出：{ value: 3, done: false }
console.log(iterator.next()); // 输出：{ value: undefined, done: true }

15.介绍一下fetch函数

使用 fetch() 函数发送请求时，需要传入一个 URL 参数，指定要请求的资源的地址。接下来，使用 .then() 方法处理响应对象 response，并将其解析为 JSON 格式（或其他格式，如 response.text()、response.blob() 等）。然后，再次使用 .then() 方法处理解析后的数据。如果在请求过程中出现错误，可以使用 .catch() 方法捕获并处理错误。它是原生 JavaScript 提供的一种现代化的方式，用于替代传统的 XMLHttpRequest 对象。

javascript 复制代码

fetch(url)
 
  .then(response => {
 
    // 处理响应
 
    if (response.ok) {
 
      return response.json(); // 将响应解析为 JSON
 
    } else {
 
      throw new Error('请求失败');
 
    }
 
  })
 
  .then(data => {
 
    // 处理解析后的数据
 
    console.log(data);
 
  })
 
  .catch(error => {
 
    // 处理错误
 
    console.error(error);
 
  });

16.Vue中组件通信的方法有哪些

1）通过props和事件event 2）provide和inject 3）pinia和vuex 4）$refs（父）和ref（子） 5）作用域插槽slot

17.Vue3相比Vue2的优点

1）性能优化 2)响应式系统的优化 3）组合式API 4）更好的TS支持 5）更小的体积 6）编译器优化

18.Vue相比jQuery的优点

1）Vue具有数据绑定和响应式系统 2）Vue支持组件化开发，jQuery则更侧重于直接操作DOM 3）Vue通过虚拟DOM去提高性能 4）Vue的生态系统更加强大 5）Vue易学习

19.vuex和pinia的常用功能

javascript 复制代码

export const useCounterStore = defineStore('counter', () => {
  const count = ref(0)
  function increment() {
    count.value++
  }
 
  return { count, increment }
})

20.pinia如何实现持久化

persist: true

21.数组常用方法

1)pop() 2)push() 3)shift() 4)unshift()

22.vue-router的常见功能

1）编程式和声明式导航 2）命名路由和命名视图 3）路由守卫 4）路由懒加载 5）h5的历史模式和hash模式