面经
wyx 4/25/2023 vue
# Vue响应式原理详解
# Vue2
# 谈谈你对vite的了解
# 什么是vite
# webpack和vite区别
# 在项目中配置过哪些webpack
# 有哪些微服务架构
# 对node开发后端
# 配置CDN（loader）
# 除了http请求还有什么方式沟通服务器端吗
# hash路由合history路由区别
# 区别
URL格式不同
- hash模式：http://www.example.com/#/path/to/page
- history模式：http://www.example.com/path/to/page
# 用法
hash模式：
- URL路径中#后面的部分称为hash值，利用了 window 可以监听 onhashchange 事件来实现的，是用来指导浏览器动作的，不会被包含在http请求当中，所以对于后端服务器来说，hash值并不重要，因此前端可以自由地使用hash值来实现一些特殊的功能，例如单页应用程序的路由。
- 每一次改变hash值，都会在浏览器的访问历史中增加一个记录，保存在window.hisotry当中，使用
后退按钮可以回到上一个位置。 - 通过 window.onhashchange 监听 hash 的改变，借此实现无刷新跳转的功能。
- hash模式是根据hash值来发生改变，根据不同得值，渲染指定DOM位置的不同数据
history模式：
- URL的路径部分会被包含在HTTP请求中，因此后端服务器需要配合前端路由来实现页面跳转和数据请求的功能。前端的URL必须和向发送请求后端URL保持一致，否则会报404错误。
因为 history 模式的时候路径会随着 http 请求发送给服务器，项目打包部署时，需要后端配置 nginx，当应用通过 vue-router 跳转到某个页面后，因为此时是前端路由控制页面跳转，虽然url改变，但是页面只是内容改变，并没有重新请求，所以这套流程没有任何问题。但是，如果在当前的页面刷新一下，此时会重新发起请求，如果 nginx 没有匹配到当前url，就会出现404的页面。
- 利用了 HTML5 History Interface 中新增的 pushState() 和 replaceState() 方法来实现无刷新跳转的功能。这两个方法应用于浏览器的历史记录栈，在当前已有的 back、forward、go 的基础之上，它们提供了对历史记录进行修改的功能。只是当它们执行修改时，虽然改变了当前的 URL，但浏览器不会向后端发送请求。
- 会对低版本浏览器有兼容性
在Vue.js中，使用hash模式和history模式的方法是通过Vue Router的mode属性来控制的。默认情况下，Vue Router使用hash模式，可以通过下面的代码来开启history模式：
const router = new VueRouter({ mode: 'history', routes: [...], });1
2
3
4
# vuex与pinia区别
# es6,Promise
# es6 set和map区别
# nextTick
在Vue中nextTick是一个异步方法，用于在DOM更新之后执行回调函数，以确保DOM已经更新完毕，它解决了一些DOM更新后需要进行操作的问题
- nextTick的实现原理是通过使用微任务或宏任务来执行回调函数
- 在浏览器中,Vue会首先尝试使用Promise.then,MutationObserver,setImmediate等微任务宏任务来延迟执行回调函数;如果以上方法都不可用,Vue会降级使用setTimeOut来延迟执行回调函数
具体实现原理：
- 在Vue中nextTick方法会将传入的回调函数存储在一个队列中
- 在Vue内部，维持一个执行队列和一个标志位，用于记录是否正在执行回调函数
- 当调用nextTick方法时，Vue会首先将回调函数存储到队列中，并检查是否有正在执行的回调函数
- 如果没有正在执行的回调函数，则将标志位设置为true，然后通过微任务或者宏任务延迟执行回调函数
- 在执行微任务或宏任务的时候，Vue会遍历队列中的所有回调函数，并依次执行，如果在执行的过程中，队列中又添加了新的回调函数，那么这些新的回调函数会被添加到队列的末尾
- 当所有的回调函数执行完毕之后，将标志位设置成false，表示执行队列为空，等待下一次执行nextTick
通过使用异步延迟执行回调函数的方式,Vue可以在DOM更新之后立即进行操作,以确保操作的准确性和有效性
