3.针对性问答
3－1.你们为什么要选择vue.js呢，它给你们解决了什么问题?
3-1. 我们选择Vue.js是因为它具有许多优秀的特性，如组件化开发、响应式数据绑定和虚拟DOM等。Vue.js可以提高开发效率，使得代码更易于维护，并且提供了良好的用户体验。
3－2.谈谈对vue生命周期的理解?
3-2. Vue生命周期是指组件从创建、更新到销毁的整个过程中所经历的一系列钩子函数的调用。它包括了beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy和destroyed等钩子函数。通过这些钩子函数，我们可以在组件的不同阶段执行相应的逻辑和操作。
3－3.v-if 和 v-show有什么区别?
3-3. v-if是条件渲染指令，根据条件动态地渲染或销毁元素，并重新生成/移除DOM节点。而v-show是基于CSS的显示/隐藏指令，通过控制display属性来切换元素的可见性。v-if在切换时有较高的初始渲染成本，但在切换频繁时性能较好，而v-show则在初始渲染时有较高的计算成本，但在切换频繁时性能更加稳定。
3－4.vue.js中组件之间是如何通信的?
3-4. Vue.js中组件之间的通信可以通过props属性和事件来实现。父组件通过props向子组件传递数据，子组件可以接收并使用这些数据。而子组件可以通过触发事件（$emit）并携带参数向父组件传递数据。
3－5.vue中数据双向绑定原理了解吗？
3-5. Vue中的数据双向绑定是通过v-model指令实现的。它会自动将表单元素的value与Vue实例中的数据进行双向绑定，当表单元素的值发生变化时，相关的数据也会相应更新，反之亦然。
3－6.如果让你实现一个基本的双向数据绑定，那你是什么思路呢？
3-5. Vue中的数据双向绑定是通过v-model指令实现的。它会自动将表单元素的value与Vue实例中的数据进行双向绑定，当表单元素的值发生变化时，相关的数据也会相应更新，反之亦然。
3－7.MVVM和MVC有什么区别?
3-7. MVVM和MVC都是常见的前端架构模式，MVVM是Model-View-ViewModel的缩写，而MVC是Model-View-Controller的缩写。与MVC不同，MVVM将View和ViewModel直接关联起来，使得数据的改变可以立即反馈到View上，同时ViewModel也可以响应View的交互操作。MVVM模式更加关注处理View和ViewModel之间的数据绑定和交互，降低了代码的耦合度，提高了开发效率。
3－8.有没有用过其他的JS框架?
3-8. 是的，我还使用过React框架进行前端开发。React是一个被广泛应用的JavaScript库，它以组件化开发为核心，通过构建可复用和自包含的组件来构建用户界面。
3－9.对前端代码的自动化测试有没有了解?有没有使用过前端代码自动测试框架呢？
3-9. 我对前端代码的自动化测试有一定了解，我使用过Jest和Mocha等前端自动化测试框架进行单元测试和集成测试。这些测试框架可以帮助我们编写可靠的测试用例，并确保代码规范和质量。
第四部分_JS基础
4－1.说说JS中的数据类型
4-1. 在JavaScript中，数据类型可以分为两类：基本数据类型和引用数据类型。基本数据类型包括字符串、数字、布尔值、null和undefined。引用数据类型包括对象、数组和函数。
4－2.JS中的 ＝＝和＝＝＝有什么区别？
4-2. 在JavaScript中，==是相等运算符，它会进行类型转换后比较两个值是否相等。而===是严格相等运算符，它不会进行类型转换，只有在值的类型和值都相等的情况下才返回true。例如，1 == ‘1’会返回true，但1 === ‘1’会返回false。
4－3.JS中的深拷贝和浅拷贝有什么区别？
4-3. 深拷贝和浅拷贝是指对于对象或数组的复制操作时的不同方式。浅拷贝只复制对象或数组的引用，而不复制其内容。深拷贝则会递归复制对象或数组的所有内容。当原对象或数组发生改变时，浅拷贝会受到影响，而深拷贝不会受到影响。
4－4.如果让你实现一个深拷贝，有什么思路?
4-4. 实现深拷贝的思路可以通过递归遍历对象或数组，并创建一个新的对象或数组来存储复制后的内容。需要判断每个属性的类型，如果为对象或数组，则继续递归调用深拷贝方法。
4－5.简述一下对原型，构造函数以及实例的理解
4-5. 原型是JavaScript中的一个对象，在创建对象实例时被用作模板。构造函数是用来创建对象实例的函数，通常以大写字母开头。实例是通过构造函数创建的一个具体的对象。
4－6.什么是闭包?闭包解决了什么问题？闭包会导致什么问题呢？
4-6. 闭包是指一个函数可以访问其词法作用域之外的变量。它由一个函数和一个被该函数创建的词法环境组合而成。闭包可以解决变量作用域和数据私有性的问题。但闭包也会导致内存泄漏问题，因为即使函数执行完毕，闭包依然保留对外部变量的引用，导致变量无法被垃圾回收机制回收。
4－7.如何理解JS中的this关键词?
4-7. 在JavaScript中，this关键字指的是当前执行代码的上下文对象。它的值取决于函数的调用方式。在全局作用域中，this指向全局对象（如window）。在对象方法中，this指向调用该方法的对象。在事件处理程序中，this指向触发事件的元素。在使用构造函数创建对象时，this指向新创建的对象。
4－8.之前有没有解决过跨域问题?在你们项目里。当时是怎么解决的?
4-8. 解决跨域问题的方法有多种，其中一种常见且简单的方法是使用服务器端设置响应头部信息。通常使用CORS（跨来源资源共享）协议来实现跨域资源的访问。服务器端通过设置Access-Control-Allow-Origin头部信息来允许特定源的请求访问资源。在项目中，可以在服务器端进行相关的配置来解决跨域问题。例如，常见的配置包括设置Access-Control-Allow-Origin、Access-Control-Allow-Methods和Access-Control-Allow-Headers等头部信息来允许特定的请求来源、请求方法和请求头部。
CSS基础篇
1.P元素和div元素，都是块元素，两者之间有什么区别呢？
P元素和div元素都是块级元素，但二者之间有一些区别。 P元素是用于表示段落的标签，通常用于包裹文本内容。它会自动添加上下边距，使得各个段落之间有一定的间距。 div元素是一个通用的容器标签，没有预定义的样式或语义。它可以用于将多个元素组合在一起，并且通过CSS来设置其样式。
2.谈谈你对CSS盒子模型的理解?
CSS盒子模型是指包裹在HTML元素周围的一个矩形框，它由四个部分组成：内容区域、内边距、边框和外边距。 内容区域是被实际内容填充的区域，内边距是内容区域与边框之间的空白区域，边框是围绕内容和内边距的线，外边距是边框与相邻元素之间的空白区域。
3.如何水平垂直居中一个页面元素?还有什么其他方式吗？
- 水平垂直居中一个页面元素的常见方式有：
- 使用Flexbox布局：通过设置父容器为display: flex;以及align-items: center和justify-content: center属性可以实现水平垂直居中。
- 使用position属性：通过设置元素的position为absolute，并结合top、left、right和bottom属性来实现居中。
- 使用transform属性：通过设置元素的position为absolute，并将left和top都设为50%，再使用translate()函数来调整元素的位置。
4.清除浮动的方式有哪些?他们之间有哪些区别?
- 清除浮动常用的方式包括：
- 使用clear属性：可以设置clear:both来清除浮动，但需要在浮动元素下方添加一个空元素并设置clear属性。
- 使用溢出属性：可以给父容器添加overflow: hidden或overflow: auto属性来清除浮动，但需要注意可能会造成内容溢出被隐藏的问题。
- 使用clearfix技巧：可以给父容器添加类名clearfix，并在CSS中定义该类选择器的::after伪元素设置content:””、display:block和clear:both。
5.重绘和回流有什么区别？
- 重绘（Repaint）和回流（Reflow）是浏览器渲染过程中的两个关键步骤。
- 重绘：当元素的样式发生改变但不影响其布局时，浏览器会重新绘制元素的外观，例如修改颜色、背景等。
- 回流：当页面布局发生改变时，浏览器需要重新计算并更新元素的几何属性，然后进行重新布局。回流触发会导致其他与之相关的元素也被迫重新回流。回流显著影响性能。
6.（你说你做过移动端开发，对响应式布局了解吗？）实现响应式布局有哪些方式?
- 响应式布局的实现方式有：
- 使用媒体查询（Media Queries）：通过为不同的屏幕尺寸定义不同的CSS样式，以适配不同的设备。
- 弹性网格布局（Flexbox）：使用弹性容器和项目属性，使得元素能够灵活地自适应不同的屏幕尺寸和布局要求。
- CSS栅格系统：借助栅格系统将页面划分为多个等宽的列，达到适应不同屏幕尺寸的效果。
- CSS框架：一些流行的CSS框架如Bootstrap或Foundation提供了响应式的组件和布局工具，简化了开发过程。
7.有没有用过一些CSS框架?
- CSS框架，例如Bootstrap和Tailwind CSS。这些框架提供了预定义的样式和组件，能够快速构建响应式的用户界面，提高开发效率。
8.当我在浏览器中输入URL，一直到页面显示，这个中间过程发生了哪些事情呢？（说的越具体越好）
- 当在浏览器中输入URL后，主要经历以下过程：
- DNS解析：将输入的域名解析成对应的IP地址。
- 建立连接：通过IP地址建立与服务器的TCP连接。
- 发送请求：浏览器向服务器发送HTTP请求，包括请求头和请求体等信息。
- 服务器处理请求：服务器接收、解析请求，并做相应的处理，如查询数据库、读取文件等。
- 返回响应：服务器生成HTTP响应，包含响应状态码、响应头和响应体等信息。
- 页面渲染：浏览器根据收到的响应内容解析HTML结构，构建DOM树，并进行CSS解析生成渲染树。然后浏览器根据渲染树来进行布局和绘制。
- 资源加载：浏览器根据解析到的HTML内容发起对其他外部资源（如CSS、JavaScript、图片等）的请求，并在得到响应后进行相应的处理和加载。
- 加载完毕：当所有资源都加载完成后，页面显示完整内容，并触发相应的事件（如DOMContentLoaded和load事件）。
9.说几条web前端的优化策略吧。
- 一些常见的前端优化策略包括：
- 压缩和合并资源：压缩HTML、CSS、JavaScript等文件大小，减少网络传输时间，并将多个文件合并为一个减少请求次数。
- 使用缓存：通过设置HTTP缓存相关头部信息使得浏览器可以缓存静态文件，从而减少服务器的负载和提高页面加载速度。
- 图片优化：选择适合场景的图片格式、压缩图像以减小文件大小，使用懒加载或按需加载技术来延迟加载图片。
- 异步加载：将不影响首屏渲染的JS文件进行异步加载，避免阻塞页面渲染。使用惰性加载（Lazy Loading）延迟加载非关键内容。
第五部分，综合能力
1.你在项目中遇到过哪些大坑，那当时是怎么解决的?
- 在项目中遇到的大坑包括：
- 性能问题：页面加载过慢或内存占用过高等。解决方式包括优化代码结构、减少网络请求、使用缓存等。
- 跨浏览器兼容性问题：不同浏览器对某些CSS或JavaScript特性的支持可能存在差异，需要针对性地解决兼容性问题，例如使用前缀、polyfill等。
- 代码质量问题：代码重复、命名不规范、可读性差等。通过代码审查、规范制定以及使用lint工具进行静态分析可以改善代码质量。
2.在你们团队中，你有没有一些突出的亮点可以在这分享一下
- 在团队中我的亮点包括：
- 细致入微：我注重细节和精益求精，在项目开发过程中深入理解需求并提出有效的解决方案。
- 团队合作：我乐于与团队成员合作，在团队中有良好的沟通和协作能力，能够积极分享知识和经验，并且愿意帮助他人解决问题。
- 学习能力强：我对新技术和行业趋势保持关注，并持续学习和提升自己的技能，能够快速适应新的工作环境和项目需求。
3.那你提到前端工程实践，那项目中的package.json有什么作用?它里面都有哪些内容?
- package.json文件是Node.js项目中的配置文件，用于管理项目的依赖和脚本等。它包含了以下内容：
- “name”：项目名称。
- “version”：项目版本号。
- “description”：项目描述信息。
- “dependencies”：项目所依赖的第三方模块及其版本号。
- “devDependencies”：项目开发过程中所需的第三方模块及其版本号。
- “scripts”：定义了一些命令脚本，可以通过npm进行运行。
- “main”：指定了入口文件。
- “repository”：项目的代码仓库信息。
- “license”：项目采用的许可证信息。
6.对webpack比较熟是吧，那你对webpack的使用有哪些优化建议呢？
- 对于webpack的使用，一些优化建议包括：
- 使用ES6模块语法：尽量使用import和export关键字进行模块导入和导出。
- 使用Tree Shaking：通过在构建过程中去除未使用的代码来减小打包体积。
- Code Splitting：将应用程序的代码拆分为多个较小的部分，使得每个部分可以独立加载和缓存。
- 开启缓存：利用webpack的缓存机制，避免重新编译没有改变的模块。
- 压缩输出：使用webpack插件压缩和优化输出的代码。
7.你平常业余时间都是怎么学习的呢，看什么书，浏览什么网站？
在业余时间，我经常阅读相关的技术书籍、浏览技术博客和社区，以了解最新的前端技术趋势和最佳实践。我参与一些在线课程或培训来学习新技术，并通过实践项目来巩固所学的知识。
8.职业规划是什么样的呢？
我的职业规划是成为一名资深前端工程师，不断提升自己的技术能力和团队管理能力，以解决复杂的技术问题并带领团队开发出高质量的产品。同时，我也希望能够担任技术顾问的角色，为团队提供指导和支持，推动技术创新和团队发展。
1、vue的双向绑定原理是什么？里面的关键点在哪里？ Vue的双向绑定原理是基于Object.defineProperty或者Proxy来实现的，其关键点在于数据劫持，即对数据的读取和修改进行拦截，在数据发生变化时自动更新视图
2、实现水平垂直居中的方式？ 实现水平垂直居中的方式有多种，比如使用Flex布局、绝对定位、margin负值等。
3、常用伪元素有哪一些？ 常用的伪元素有before和after。
4、移动端如何适配不同屏幕尺寸？ 移动端可以通过设置meta标签中的viewport属性来适配不同屏幕尺寸，例如设置width=device-width、initial-scale=1等。
5、本地存储有哪一些？他们三者有什么区别？ 常见的本地存储方式有cookie、localStorage和sessionStorage，它们的区别在于作用域、存储容量和过期时间等方面。
6、JS的数据类型？如何判断js的数据类型? JavaScript的数据类型包括Number、String、Boolean、Object、Null和Undefined等，可以使用typeof、instanceof和Object.prototype.toString.call()等方法来判断数据类型
7、说一下ES6的新特性有哪些？ ES6的新特性包括let和const关键字、箭头函数、模板字符串、解构赋值、类和继承、模块化等。
8、Let、const、var三者有什么区别？ let和const是块级作用域的关键字，var是函数作用域的关键字，let和const声明的变量不能重复声明，const声明的变量不可修改。
9、数组去重有哪些办法？ 数组去重的方法包括利用构造函数Set的去重功能、使用循环遍历和对象属性去重等。
10、说一下深拷贝和浅拷贝，如何自己实现一个深拷贝？ 深拷贝和浅拷贝是指在复制对象时，是否对其内部的子对象进行递归复制。实现深拷贝可以使用JSON.parse(JSON.stringify(obj))、递归复制等方法。
11、Vue的生命周期有哪一些？说一下它们每个阶段做什么操作？ Vue的生命周期包括beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy和destroyed等阶段，每个阶段对应着不同的操作，例如数据初始化、DOM挂载和销毁等。
12、组件通讯方式有哪一些？ 组件通讯方式有props、$emit、$parent/$children、provide/inject和$refs等。
13、Vuex有几个属性及作用？ Vuex的属性包括state、getters、mutations、actions和modules等，它们用于管理Vue应用中的状态。
14、Vue的监听属性和计算属性有什么区别？ Vue的监听属性和计算属性都用于监测数据变化，但监听属性是一个函数，需要手动调用，而计算属性是一个属性，会自动计算并缓存结果
15、说一下防抖和节流。怎么实现？ 防抖和节流是用于控制函数执行频率的方法，防抖是在一定时间内只执行最后一次操作，节流是在一定时间内只执行一次操作。可以通过setTimeout和时间戳等方式实现。
16、Vue的导航守卫有哪一些？ Vue的导航守卫包括全局前置守卫、全局后置钩子、路由独享守卫和组件内的守卫等
17、你的登录拦截怎么实现的？ 登录拦截可以通过路由守卫、请求拦截和响应拦截等方式实现
18、有用过图表吗？用的多吗？ 常见的图表库包括ECharts、Highcharts、D3等
19、闭包是什么？如何实现？ 闭包是指函数内部可以访问外部函数的变量，可以用于封装私有变量和实现柯里化等操作。
20、Vue2.0和vue3.0有什么区别？ Vue2.0和Vue3.0的区别在于性能优化、组合式API、响应式系统和虚拟DOM等方面。
21、Vue常用的指令有哪些？ Vue常用的指令包括v-model、v-for、v-if、v-show、v-bind、v-on等。
22、v-If和v-show有什么区别？ v-if和v-show的区别在于前者在条件为false时会销毁对应的DOM元素，而后者只是在样式上隐藏元素。
23、v-for为什么要加一个key？ v-for需要加key属性是为了帮助Vue识别节点的唯一性，提高渲染效率。
24、你是如何封装一个组件的？ 封装一个组件需要考虑组件的输入和输出，可以使用props和$emit等方式实现。
25、有自己从0到1搭建过项目吗？ 从0到1搭建一个完整的项目需要考虑项目架构、技术选型、开发流程、测试和部署等方面
26、有用过uni-app吗？ uni-app是一款基于Vue的跨平台开发框架，可以用于快速开发小程序、H5、APP等应用。
27、你会写后台吗？有搞过服务端渲染吗？ 后台开发需要掌握服务器端语言和数据库等技术，服务端渲染可以提高页面的首屏加载速度和SEO效果。
28、说一下你项目中遇到的难点，如何解决？ 在项目中遇到的难点可能包括架构设计、性能优化和业务逻辑等方面，需要通过调试和优化等方式解决
29、Url到浏览器的一个过程有哪些步骤？ URL到浏览器的过程包括DNS解析、建立TCP连接、发送HTTP请求、服务器处理请求、浏览器解析渲染页面等步骤
30、如何实现小程序的request封装及拦截？ 可以通过封装request函数和使用拦截器等方式实现小程序的请求封装和拦截。
31、在vue的项目应用中，不使用框架，怎么封装？ 在Vue项目中不使用框架可以使用原生的HTML、CSS和JavaScript来实现，需要手动处理数据和事件等方面。
32、什么是Js原型？原型链是什么？ JavaScript的原型是指每个对象都有一个原型对象，原型对象又有自己的原型，形成了一条原型链。
33、组件通讯方式有哪些？ 组件通讯方式包括props、$emit、$parent/$children、provide/inject和$refs等。
34、用闭包的原理做过哪些？ 闭包可以用于实现柯里化、封装私有变量和缓存等操作。
35、作用域是什么？ 作用域是指变量的可访问范围，JavaScript中有全局作用域和函数作用域等
36、操作数组的方式有哪些？ 操作数组的方式包括遍历数组、添加和删除元素、数组去重和排序等。
37、0.1 + 0.2 等于 0.3吗？为什么？如何解决？ 0.1 + 0.2不等于0.3，这是因为JavaScript采用的是IEEE 754浮点数标准，存在精度问题。可以使用toFixed方法处理。
38、keep-alive是什么？有哪几个生命周期阶段？ keep-alive是Vue中的一个组件，用于缓存组件实例，提高组件的渲染效率，其生命周期包括activated和deactivated等阶段
39、判断一个变量是否是数组，有哪些办法？ 判断一个变量是否是数组可以使用Array.isArray和instanceof等方法。
40、判断一个变量是否是对象，有哪些办法？ 判断一个变量是否是对象可以使用typeof和Object.prototype.toString.call()等方法。
41、对象/数组常用方法有哪些？ 对象/数组常用方法包括push、pop、shift、unshift、slice、splice、concat、map、filter、reduce等。
42、创建一个空数组/空对象有哪些方式？ 创建一个空数组可以使用[]或new Array()，创建一个空对象可以使用{}或new Object()。
43、哪些遍历方式会改变原数组？ 使用forEach、map、filter、reduce等遍历方式不会改变原数组，而使用push、pop、shift、unshift、splice等方法会改变原数组
44、Set和Map各是什么？ Set是一种数据结构，用于存储唯一值，Map是一种键值对数据结构，用于存储任意类型的键和值
45、介绍一下promise。 Promise是一种异步操作管理的解决方案，用于解决回调地狱问题，其特点是链式调用和状态机制
46、Promise通常会解决三种问题
(1)链式回调
(2)同时发起几个异步请求，谁先有结果就拿谁的
(3)发起多个请求，等到所有请求后再做下一步处理
这三种方式promise是怎么处理的？
Promise可以通过then方法实现链式回调，通过Promise.all方法实现同时发起多个异步请求，通过Promise.race方法实现等待多个异步请求的结果
47、如何改变一个函数a的上下文？ 可以使用bind、apply和call等方法改变一个函数的上下文
48、Call和replay有什么区别？ call和apply都是用于改变函数上下文的方法，区别在于传入参数的方式不同
49、Evenbus是什么东西？ EventBus是一种事件发布/订阅的机制，可以实现组件之间的通讯
50、Vue中普通的生命周期大概有哪些？ Vue中普通的生命周期包括beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy和destroyed等阶段。
51、父子组件生命周期执行顺序是怎么样的？ 父子组件生命周期执行顺序是父beforeCreate -> 父created -> 父beforeMount -> 子beforeCreate -> 子created -> 子beforeMount -> 子mounted -> 父mounted。
52、mixins有几个生命周期阶段？ mixins有beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy和destroyed等生命周期阶段。
53、弹性布局，一行两列，一列固定宽，如何实现？ 实现一行两列，一列固定宽的水平垂直居中布局可以使用Flex布局，父元素设置display: flex、align-items: center和justify-content: center，左侧元素设置flex: 1，右侧元素设置固定宽度
54、Flex：1 包含哪三种属性 Flex：1包含flex-grow、flex-shrink和flex-basis三个属性，分别表示元素在剩余空间中的占比、元素在空间不足时的缩放比例和元素的基准大小。
