Skip to Content
Nextra 4.0 is released 🎉
面试总结面试总结2

面试总结2

1.webpack打包的流程

webpack构建流程 

2.Vue3 watchEffect 和 watch 有什么区别

Vue3 watch, watchEffect, computed的区别 

3.Promise的状态

ES6中 Promise 

4.meta标签的作用

Meta 标签 

5.MvvM框架的理解

MVVM是Model-View-ViewModel的简写。即【模型】-【视图】-【视图模型】

  • 【模型】(Model): 指的是后端传递的数据
  • 【视图】(View): 指的是所看到的页面
  • 【视图模型】(ViewModel): mvvm模式的核心, 它是连接view和model的桥梁。

视图模型有两个方向:

一是将【模型】转化成【视图】, 即将后端传递的数据转化成所看到的页面。实现的方式是数据绑定。

二是将【视图】转化成【模型】, 即将所看到的页面转化成后端的数据。实现的方式是: DOM事件监听。

这两个方向都实现的, 我们称之为数据的双向绑定。

总结:

在MVVM的框架下视图和模型是不能直接通信的。它们通过viewModel来通信, ViewModel通常要实现一个observer观察者, 当数据发生变化, ViewModel能够监听到数据的这种变化, 然后通知到对应的视图做自动更新, 而用户操作视图, ViewModel也能监听到视图的变化, 然后通知数据做改动, 这实际上就实现了数据的双向绑定。并且MVVM中的view和ViewModel可以互相通信。

Vue就是基于MVVM实现的一套框架, 在vue中, 【模型】指的是JavaScript中的数据, 如对象, 数组等。【视图】指的是页面视图。【视图模型】指的是vue的实例化对象。

Vue最独特的特性: 响应式系统。vue是响应式的, 也就是说当我们的数据变更时, vue会帮你更新所有网页中用到它的地方。关于这个响应式原理, 官方已经讲得很清楚, 请参考 

6.flex的优缺点

说说flexbox(弹性盒布局模型), 以及适用场景? 

优点：

  1. 灵活的布局：Flex可以简便地实现各种复杂的布局，无需多层嵌套。
  2. 响应式布局：Flex布局中的项目可以根据容器的大小自动调整其尺寸和顺序。
  3. 对齐方便：Flex提供了丰富的对齐功能，可以快速对齐子元素。
  4. 动画效果良好：Flex中的元素改变大小和顺序时，不会出现重绘重排的问题。
  5. 易于学习和使用：Flex的学习曲线较为平滑，相对于传统布局方式更为简单。

缺点：

  1. 兼容性：Flex布局在较老的浏览器中可能不被支持，需要注意兼容性问题。
  2. 不适应于过于复杂的布局：Flex在处理极其复杂的布局时可能会显得力不从心。
  3. 需要时间去熟悉：Flex布局需要一定时间去理解其所有属性和如何应用它们来解决布局

7.微信小程序发布流程

小程序发布流程 

8.怎么让Ajax请求同步

Ajax(Asynchronous JavaScript and XML)最初的设计就是异步的，这意味着当发送请求时，浏览器不会等待服务器的响应就会继续执行后续的JavaScript代码。这使得用户界面(UI)在请求处理时不会冻结，从而提供了更好的用户体验。

然而，有时你可能需要同步请求，即浏览器会等待服务器的响应，然后再继续执行后续的JavaScript代码。但请注意，同步请求可能会阻塞UI，导致不良的用户体验，特别是在网络延迟较高的情况下。

以下是使用JavaScript和jQuery设置Ajax请求为同步和异步的方法：

异步请求(默认)

在原生JavaScript中，你可以使用fetch API或XMLHttpRequest来发送异步请求。这里是一个使用fetch的例子

fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => {
    console.log(data);
  })
  .catch(error => {
    console.error('Error:', error);
  });

在jQuery中，你可以使用$.ajax方法并设置async属性为true(这其实是默认的，所以你可以省略这个设置)

$.ajax({
  url: 'https://api.example.com/data',
  type: 'GET',
  async: true, // 默认是异步的，所以你可以省略这个设置
  success: function(data) {
    console.log(data);
  },
  error: function(error) {
    console.error('Error:', error);
  }
});

同步请求

在原生JavaScript中，你可以使用XMLHttpRequest并设置其open方法的第三个参数为false来发送同步请求

var xhr = new XMLHttpRequest();
xhr.open('GET', 'https://api.example.com/data', false); // 第三个参数设置为false表示同步请求
xhr.send();
 
if (xhr.status === 200) {
  console.log(xhr.responseText);
} else {
  console.error('Error:', xhr.statusText);
}

9.Seo优化怎么提升排名

  1. ‌关键字研究与优化‌：了解和分析目标受众使用的关键词和短语，通过分析更好地提供内容和服务来满足用户的需求。将关键字有效地融入到网站内容中，以便搜索引擎更容易识别网站并将其与搜索查询相匹配‌
  2. 内容优化‌：提供高质量的内容，确保内容与关键词高度相关，同时为用户提供有价值的信息。关键词应自然地融入内容，而不是被迫插入‌
  3. 优化网站结构‌：拥有一个清晰易导航的网站结构可以提升用户的浏览体验，同时也有助于搜索引擎更高效地抓取和索引网页内容‌
  4. 响应式设计‌：随着移动设备的普及，确保网站能够适应不同的屏幕尺寸和设备，提供良好的用户体验，从而获得更好的搜索排名‌
  5. ‌优化页面加载速度‌：通过优化图片大小、压缩代码、使用缓存等技巧提高网站的加载速度，减少用户的流失率‌
  6. ‌社交媒体整合‌：利用社交媒体提高品牌知名度，吸引更多的目标受众，增加网站的曝光度和流量‌

10.Vue3的v-model和Vue2有什么不同

Vue3的v-model和Vue2有什么不同 

11.uni-app用的最多的一个周期

onLoad(options)

参数options是其他页面传过来的数据

12.uni-app组件生命周期

与使用的vue版本周期相同

13.JavaScript如何实现多线程

JavaScript如何实现多线程 

JavaScript本质上是单线程的，这意味着它一次只能执行一个任务

尽管JavaScript是单线程的，但我们可以通过以下技术模拟多线程行为

  1. Web Workers
  2. 定时器和回调
  3. Promise
  4. Node.js

使用场景

模拟多线程对于以下场景非常有用：

  • 执行长时间运行的任务，例如计算或网络请求，而不会冻结用户界面。
  • 同时执行多个操作，例如数据处理和用户交互。
  • 提高应用程序的响应性和性能

需要注意的是，这些技术并不真正实现多线程。 JavaScript仍然是单线程的，但这些技术提供了一种模拟多线程行为的方法，以提高应用程序的效率和性能

14.Ajax请求原理

Ajax原理是什么?如何实现? 

15.React Router原理

说说你对React Router的理解?常用的Router组件有哪些? 

16.token无感刷新

前端token无感刷新 

17.用户体验

// TODO

Last updated on
面试总结1面试总结3