八股文

1.vue的双向绑定原理
Vue 的双向绑定原理是通过数据劫持以及发布订阅模式来实现的。

底层原理是使用 Object.defineProperty() 方法转换成 getter 和 setter。

当我们去修改 data 中的属性时，就会触发 setter 方法通知订阅了该属性的 Watcher 对象进行更新。

这种机制使得数据和视图之间可以双向同步，这就是vue的双向绑定。

 

2.vue的生命周期
创建前/后：beforeCreate和created
渲染前/后：beforeMount和mounted
数据更新前/后：beforeUpdate和updated
销毁前/后：beforeDestory和destoryed

 

3.vue的diff算法
Vue中diff 算法是在虚拟DOM的基础上实现的，它通过比较旧虚拟DOM树和新的虚拟DOM树，来找到需要进行更新的节点，它更新的时候是只更新当前节点和下面的子节点，主要是提高页面性能和用户体验。diff 算法底层原理是用双指针的算法进行比较，通过优化、增量更新、异步更新等一些方式来提高性能和效率。

ps:Vue 的 diff 算法可以类比为穿衣服，首先比较新旧衣柜中的第一件衣服，如果不同则直接换上整套新衣服；如果相同则比较下一件，直到发现有不同的衣服为止。在比较的过程中，可以通过添加唯一标识（比如衣服的颜色、款式等）来提高效率，避免重复比较。diff 算法的目的是尽可能地减少 DOM 操作，提高页面性能和用户体验。

 

4.一个页面从输入URL到页面加载显示完成，这个过程中都发生了什么？
1.DNS 解析：将 URL 中的域名解析成 IP 地址。
2.建立 TCP 连接：浏览器和服务器之间建立一个 TCP 连接，用于数据传输。
3.发送 HTTP 请求：浏览器向服务器发送 HTTP 请求，请求中包含了要访问的资源路径、请求方法、请求头等信息。
4.服务器处理请求：服务器收到请求后，会根据请求中的内容进行相应的处理，并将结果封装成一个 HTTP 响应返回给浏览器。
5.接收响应内容：浏览器接收到响应内容后会对其进行解析，进行 DOM 树构建，同时还会下载并解析 CSS、JavaScript 等资源。
6.页面渲染：浏览器在解析完 HTML、CSS 和 JavaScript 后，会将它们绘制成网页并最终在屏幕上显示出来。

 

5.es6的新特性
1.let 和 const：用于声明块级作用域的变量和常量，取代了 var 关键字。
2.箭头函数：使用箭头（=>）来定义函数，简化了函数表达式的写法。
3.模板字符串：使用反引号（`）包含字符串，可以在其中插入变量和表达式。
4.解构赋值：通过模式匹配的方式将对象或数组中的元素提取出来并赋值给变量。
5.扩展运算符：使用三个点（...）将数组或对象展开成多个元素或属性。
6.类和继承：使用 class 来定义类，使用 extends 实现继承。
7.Promise 对象：用于异步编程，解决了回调地狱的问题。
8.async/await：基于 Promise 对象实现的异步编程语法，使得异步代码更加可读和易于理解。

 

6.js的循环机制
js是一门单线程语言，同一时间只能做一件事，单线程可能会出现阻塞的问题。所以js分了同步任务和异步任务，同步任务进入主线程，主执行栈会立即执行。
异步任务会进入浏览器进行管理，然后进入任务队列中，当主线程中所有的同步任务全部执行完，才会执行队列中的异步任务，以上的一个操作不断循环就叫做事件循环机制。
先执行顺序：同步代码 - 异步代码(微任务)promise.then(xxx) - 异步代码(宏任务)setTimeout(xxx)

 

7.promise是什么？
promise是es6中的一种异步编程解决方案，它是一个链式调用，里面有.then .catch .all三个方法。.then的话里面包含两个参数，一个resolved(成功)，一个rejected(失败)，.then一般接收成功的回调 .catch就是捕捉失败的回调 .all就是都会回调
promise是同步函数，then方法本身是同步执行，then方法中的内容加入微任务异步执行

 

8.解释computed的原理
Vue 的 computed 原理是基于响应式数据的衍生属性，计算属性的本质是一个函数，它会在模板渲染时自动求值，并且会进行缓存。当依赖的响应式数据发生变化时，computed 属性才会重新计算，否则直接从缓存中获取值。这种机制可以避免重复计算，提高了程序的性能和效率。

 

9.闭包的理解
闭包可以理解成一个函数内部的函数。它有两个作用，第一个作用是保护，第二个作用就是保存。
保护就是函数之间会形成一个私有作用域，不受外部干扰，它很适合模块化开发。第二个就是保存，当一个函数返回另一个引用数据类型，被外界所接收了就会形成不销毁的作用域，它就会一直存在在堆内存里，它很容易造成内存泄漏。
ps：内存泄漏就是浏览器无法回收代码的内存

 

10.原型链是什么？
JavaScript 中的每个对象都有一个原型对象，通过该对象可以实现属性和方法的继承。这些原型对象又可以形成一条链，被称为原型链。在查找对象的属性或者方法时，如果当前对象没有，则会向其原型对象中查找，直到找到为止。因此，原型链是 JavaScript 中实现继承和属性共享的重要机制。

 

11.什么是深拷贝、什么是浅拷贝？
浅拷贝：创建一个新对象，这个对象对原始对象进行拷贝。如果属性是基本类型，拷贝的就是基本类型的值，如果属性是引用类型，拷贝的就是内存地址，所以如果其中一个对象改变了这个地址，就会影响到另一个对象。
深拷贝会拷贝所有的属性，并拷贝属性指向的动态分配的内存。当对象和它所引用的对象一起拷贝时即发生深拷贝。深拷贝相比于浅拷贝速度较慢并且花销较大。拷贝前后两个对象互不影响。

 

12.vue2和vue3的区别
1.双向数据绑定的原理不同，vue2使用Object.defineProperty进行数据劫持，结合发布订阅者模式来实现，vue3使用proxy来实现

2.vue3增加了组合型api，代码更简洁了

3.生命周期这块vue3增加了setup,替代了beforeCreate和Created，其他生命周期的名字也发生了变化

4.v-if和v-for的优先级发生了变化，vue2中v-for的优先级高于v-if，vue3中v-if的优先级高于v-for

 

13.vue和react的区别
1.设计思想：react是函数式思想，使用jsx语法，all in js；vue是响应式思想，也是基于数据可变的，把html css js组合到一起。
2.渲染方式：react默认当状态改变时会重新渲染所有子组件，通过shouldComponentUpdate这个生命周期方法控制；vue在渲染过程中会跟踪每个组件的依赖关系，不需要渲染整个组件树。
3.性能：react适合大中型项目，vue中小型项目。
4.vue支持指令，react没有。
5.react是单向数据流，vue是双向数据绑定。

 

14.平时都是用什么实现跨域的？
跨域的解决方式有3种：JSONP技术、后端同事打开CORS功能、自己配置反向代理
JSONP：script标签的src发起一个请求，它不受浏览器的同源策略的一个限制，但是只支持get请求。
CORS：需要浏览器和服务器同时打开，在请求头中添加 ContentType:application/json属性和属性值。
反向代理：利用nginx创建一个代理服务器，这个服务器的域名跟浏览器要访问的域名一致，通过这个代理服务器修改cookie中的域名访问来http接口，通过反向代理实现跨域。

 

15.call、apply、bind的异同
相同点：apply、call、bind三者都可以利用后续参数传参
不同点：首先call和bind的参数都是以逗号隔开的这样一种形式，然后apply的参数是以数组的形式存在。bind是返回对应函数，便于稍后调用；apply、call则是立即调用 。

 

16.Vue中key有什么作用
key的作用主要是为了高效的更新虚拟DOM，如果没有唯一key，页面上删除一条标签，由于不知道是哪一条，所有要把全部的虚拟dom重新渲染，如果知道key为x标签被删除掉，只需要把渲染的dom为x的标签去掉即可。

 

17.Vue项目中如何实现模块化

1.组件化：Vue框架使用组件化的方式进行开发，在一个Vue应用程序中，所有的功能模块都可以封装成一个个独立的组件。这些组件由HTML、CSS和JavaScript组成，每个组件只负责自己的一部分功能，可以实现高内聚低耦合。

2.Vuex状态管理：Vuex是一个专门为Vue.js设计的状态管理库，用于集中管理各个组件之间共享的数据。通过Vuex，可以将数据的读取和修改操作封装成单独的模块，提高应用的可维护性和可扩展性。

3.路由管理：Vue-Router是Vue.js官方提供的路由管理工具，用于管理应用程序的URL路径与视图之间的映射关系。可以将不同功能模块对应的视图组件分别放置在不同的页面中，并且通过路由管理器来控制页面之间的跳转和传递数据。

4.按需加载：Webpack是一个常用的前端打包工具，可以将多个模块打包成一个或多个文件。在Vue应用程序中，可以通过Webpack的动态导入特性，实现按需加载功能模块，提高应用的性能和用户体验。

综上所述，Vue前端项目可以通过组件化、状态管理、路由管理和按需加载等技术手段，实现模块化开发，提高应用的可维护性、可扩展性和性能。

 

18.水平垂直居中
1.Flex 布局：使用 display: flex 和 align-items、justify-content 属性可以实现一个元素在其父容器中水平垂直居中。
css
.container {
display: flex;
align-items: center; /* 垂直居中 */
justify-content: center; /* 水平居中 */
}
2.绝对定位和负边距：将要居中的元素使用绝对定位，并设置 top 和 left 值为 50%，再通过 margin 负值来使其偏移自身宽高的一半。
css
.container {
position: relative;
}
.center {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%); /* 通过 margin 负值使其偏移自身宽高的一半 */
}
3.Grid 布局：使用 display: grid 和 place-items 属性可以实现一个元素在其父容器中水平垂直居中。
css
.container {
display: grid;
place-items: center; /* 水平垂直居中 */
}

 

 

19.对Vue单页面的理解

Vue单页面又简称为SPA，是一种通过 Ajax 技术实现无刷新页面跳转，可以使用 Vue CLI 工具、Vue Router、Vuex 和 Axios 等工具和插件来快速构建。它具有页面切换快、用户体验好、代码结构清晰等优点，但不利于 SEO。 

 

20.Vue的两种路由方式

Hash模式：URL 中的 # 后面部分被称为哈希值，其实际内容交由浏览器处理，不会发送到服务器端。在 Vue.js 中使用默认的路由模式就是 Hash 模式。优点是在不支持 HTML5 History API 的浏览器中也可以正常运行，避免了因为刷新页面而导致路由丢失的问题；缺点是 URL 中带有 # 符号，不够美观，对于 SEO 不友好。

History模式：URL 中没有 # 符号，而是直接以路径形式呈现。在使用 History 模式时，需要服务器端配置支持，即当用户访问一个不存在的路由时，服务器应该返回同一页面而不是 404 错误。优点是 URL 看起来更加美观，更加符合现代 Web 应用程序的要求，支持服务端渲染、SEO；缺点是在不支持 HTML5 History API 的浏览器中无法正常运行，刷新页面时会发出真正的 HTTP 请求，可能会导致 404 错误。