面试常考JavaScript和Vue.js问题解答

本文整理了一些面试中常见的JavaScript和Vue.js问题，并提供详细的解答，帮助你更好地准备面试，提升你的技能水平。

JavaScript基础

原生JS封装Ajax: 使用XMLHttpRequest对象实现发送请求和处理响应的封装函数，支持GET、POST等请求方法，以及异步和同步模式。
自定义对象添加属性: 使用点语法或方括号语法来添加属性，例如 obj.prop = value 或 obj['prop'] = value。
ES5怎么创建类，ES6怎么创建类: ES5创建类可以使用构造函数和原型的组合方式，ES6创建类可以使用class关键字来定义，支持类继承和静态方法等特性。
class关键字声明一个类是对象吗: class关键字声明一个类是定义一个构造函数和原型的语法糖，它本身不是一个对象。
null与undefined的区别: null表示一个空对象指针，表示变量没有被赋值；undefined表示一个未定义的值，表示变量没有被声明或者被声明但没有被赋值。
setTimeout与setInterval的区别各自优缺点: setTimeout是在指定时间后执行一次回调函数，只执行一次；setInterval是每隔指定时间就执行一次回调函数，会一直重复执行。setTimeout相对于setInterval更加灵活，但需要手动控制执行次数。
js小数运算的精度: 由于JS采用的是双精度浮点数表示法，存在精度损失的问题。可以通过将小数转化为整数进行计算，或使用第三方库（如Decimal.js）来解决精度问题。
var与let区别: var是ES5中声明变量的方式，作用域是函数级别；let是ES6中声明变量的方式，作用域是块级别。let具有更好的封闭性和可控性，可以避免变量提升和暂时性死区问题。
forEach数组1到5 >=3时候 return,一共遍历几次? 使用forEach遍历数组1到5，当遍历到3时会返回，一共遍历了3次。
定时器里console.log(1),时间写了0,定时器外console.log(2)。打印的顺序是什么？为什么? 打印的顺序是先打印2，再打印1。因为定时器是异步执行的，会先执行完同步代码，再执行异步代码。

Vue.js基础

Vuex的原理，原来项目用过吗，怎么用的: Vuex的原理是基于Vue的响应式系统和全局状态管理，通过集中管理组件中共享的状态数据，使得组件间的通信更加方便和可靠。在项目中使用过，主要是通过定义state、mutations、actions和getters等模块来管理数据和业务逻辑。
选择器有哪些、新增的是哪些: 选择器有ID选择器、类选择器、标签选择器、属性选择器、伪类选择器等，新增的有CSS3选择器和jQuery选择器。
v-if与v-show的区别: v-if是动态地添加或删除DOM元素，如果条件为false，则DOM元素会被销毁；v-show是动态地控制DOM元素的显示或隐藏，如果条件为false，则DOM元素会被隐藏但不会被销毁。
组件封装: 可以根据业务需求将常用的UI组件或业务组件进行封装，提高代码复用性和可维护性。常见的封装方式有函数式组件、类组件、高阶组件、插槽等。
有没有用过插槽插槽的作用: 插槽是一种组件的内容分发机制，允许父组件在子组件中指定可变的内容。通过插槽，可以实现父组件向子组件传递任意的HTML结构和数据。
mixin混入: mixin是一种代码复用机制，可以将多个组件共有的代码提取出来形成一个混入对象，然后将其混入到组件中。通过mixin，可以实现组件的代码复用、分离业务逻辑和增强组件功能等效果。
生命周期: Vue组件的生命周期包括创建阶段、挂载阶段、更新阶段和销毁阶段，每个阶段都有对应的生命周期钩子函数，可以在其中执行相应的操作。
什么放到created什么放到mounted: 放到created的操作一般是与数据相关的，例如初始化数据、异步请求数据、订阅事件等；放到mounted的操作一般是与DOM相关的，例如操作DOM元素、绑定事件、调用第三方库等。
Vue组件传值有哪几种，分别怎么用? Vue组件传值有props、事件、$emit、$parent、$children等方式，可以根据具体的业务需求和组件关系来选择合适的方式。
vue数据同步原理: Vue的数据同步原理是基于数据劫持和发布者-订阅者模式。Vue在数据发生改变时会通知所有订阅者，进而更新视图。
父子组件生命周期: 父组件的生命周期会先于子组件的生命周期执行，子组件的生命周期会后于父组件的生命周期执行。
vue-router钩子，全局和局部的: Vue-router钩子分为全局和局部两种，包括beforeEach、beforeResolve、afterEach、beforeEnter等。全局钩子作用于所有路由，局部钩子作用于特定路由。可以通过钩子来控制路由的跳转、处理权限验证等操作。
解释vue.config.js: vue.config.js是Vue项目的配置文件，可以通过配置该文件来实现自定义Webpack配置、设置代理、打包优化等操作。
在data中有一个空的对象,用vue的什么方法往对象里添加属性（vue.set） 使用Vue.set方法可以向一个空对象中添加属性，例如Vue.set(obj, 'prop', value)。

常见问题

git merge和git rebase的区别（还有git相关一些问题，实际开发怎么用的，谁去合并，代码冲突咋整）: merge是将两个分支的修改合并到一起产生一个新的提交，而rebase则是将当前分支的修改基于另一个分支的最新提交进行重放，使得提交历史更加线性和干净。在实际开发中，一般使用merge来合并较为复杂的分支，使用rebase来处理个人分支或对主干分支做出的小修改。对于代码冲突，需要通过手动解决或使用Git mergetool来进行合并。
跨域: 跨域是指在浏览器端向不同域名、不同端口、不同协议的服务器发送请求时，会受到同源策略的限制。可以通过JSONP、CORS、代理等方式来解决跨域问题。
vue怎么实现权限管理: Vue实现权限管理可以通过路由守卫、动态路由、v-if等方式来控制组件的访问权限。
问了一些后端的问题，了不了解node.js，用过吗？做了啥，还有数据库啥的，下面就闲聊啦: 后端相关问题主要涉及Node.js、数据库等方面。对于Node.js，了解其基本的API和模块，可以使用它来搭建服务器和开发后端应用。数据库方面，需要了解SQL和NoSQL数据库的基本概念和使用方法，以及如何使用ORM框架来操作数据库。
浏览器兼容性问题: 在开发时需要考虑不同浏览器和不同设备的兼容性问题，可以通过使用polyfill、前缀、媒体查询、flex布局等方式来解决兼容性问题。
项目介绍有啥核心的项目可以介绍一下: 可以介绍一些你参与过的项目，重点描述你负责的模块和技术难点，并突出项目中你所发挥的作用和取得的成果。
组件通信: 组件通信可以通过props、事件、Vuex等方式来实现。props是父组件向子组件传递数据的方式；事件是子组件向父组件发送消息的方式；Vuex是集中管理共享状态的方式，可以实现组件间的数据共享和通信。
前后台联调: 前后台联调可以通过模拟数据、代理、调试工具等方式来实现，可以使用Postman、Fiddler等工具来模拟后端接口，使用代理工具（如Charles）来调试前端请求和响应，使用调试工具（如Chrome DevTools）来调试代码和排查问题。
tree组件的使用，知道同步树异步树吗，: tree组件是一种树形结构展示的UI组件，可以通过递归组件、插槽、动态数据等方式来实现。同步树和异步树的区别在于数据的加载方式不同，同步树是在页面加载时一次性加载所有数据，而异步树是在需要时通过异步请求加载数据。
项目搭建，给你一个老项目你会配置啥? 项目搭建可以通过脚手架工具（如Vue CLI、Create React App等）来实现，也可以手动配置Webpack、Babel等构建工具。主要需要进行的配置包括开发环境、生产环境、路由配置、状态管理、样式处理、代码分割等。
组件的封装，你都封装哪些组件? 可以介绍你封装的组件，例如常用的UI组件、业务组件等，并说明封装的思路和目的。
pack.json中srcipt的作用， scripts是定义项目中的命令脚本，可以通过npm run [script]来执行。常见的scripts包括start、build、test等，分别用于启动开发服务器、打包构建、运行测试等。
生命周期: 可以介绍Vue组件的生命周期，以及每个阶段可以进行的操作。
本地存储cookies， 可以使用document.cookie来进行本地存储和读取，也可以使用localStorage和sessionStorage等Web Storage API来实现。需要注意的是，cookies存在一些安全和大小限制，不适合存储大量数据和敏感信息。
1,fiex布局怎么用？用fiex布局怎么写一个左侧固定宽，右侧自适应: Flex布局是一种新的布局方式，可以方便地实现各种布局效果，例如左侧固定宽，右侧自适应。可以使用display: flex和flex-direction等属性来设置Flex布局。
promise处理什么的？怎么用？async await 怎么实现两个异步请求同时发送: promise处理的是异步操作，通过then方法和catch方法来处理异步操作的成功和失败。async/await是ES2017引入的异步编程语法糖，可以让异步代码看起来像同步代码一样，通过await关键字来暂停异步操作的执行，并等待其完成后再继续执行。可以使用Promise.all方法来实现两个异步请求同时发送。
http有多少种请求头: HTTP请求头有常见的User-Agent、Content-Type、Authorization等，具体的请求头可以根据具体的业务需求进行设置。
小程序用过吗? 小程序是一种轻量级的应用开发框架，主要用于开发微信小程序。其特点是能够快速开发和上线小程序，具有较好的性能和用户体验。可以使用类似于Vue的组件化开发方式来开发小程序，也支持原生的API和第三方库。
用过vuex吗，干嘛用的? Vuex是Vue的状态管理库，用于集中管理组件之间共享的状态数据。可以通过定义state、mutations、actions和getters等模块来管理数据和业务逻辑。Vuex主要用于解决组件间通信和状态共享的问题。
闭包是什么？什么情况会出现闭包，用闭包做过什么? 闭包是指函数和声明该函数的词法环境的组合，可以使得函数访问外部变量和参数，并保持其引用不被释放。常见的闭包应用包括函数柯里化、延迟执行、模块化等。
moment.js怎么用的 Moment.js是一款流行的JavaScript日期处理库，可以用于日期格式化、日期计算、日期比较等操作。
vant做什么的 Vant是一款基于Vue的移动端UI组件库，包含丰富的组件和主题样式，可以快速构建高质量的移动应用。
axios发送请求前一般要做什么处理 使用axios发送请求前一般需要进行请求拦截和响应拦截处理，包括设置请求头、显示loading、响应错误处理等操作。
const a = 1 && 2,打印a的结果是什么? const a = 1 && 2的结果是2，因为1 && 2会先计算1为真，再计算2为真，所以最终结果为2。
git版本控制系统用什么命令解决冲突? 可以使用git mergetool命令来解决冲突。

其他

描述自己做的项目，会问一些功能的实现步骤 可以介绍一些你参与过的项目，重点描述你负责的模块和技术难点，并突出项目中你所发挥的作用和取得的成果。
怎么判断这个字符串是回文字符串 可以通过将字符串反转后与原字符串比较，如果相同则为回文字符串。
echarts的背景颜色渐变 可以使用backgroundColor属性和gradient选项来设置Echarts图表背景颜色的渐变效果。
js和ts的区别 JavaScript和TypeScript都是面向对象的编程语言，TypeScript是JavaScript的超集，在JavaScript的基础上增加了类型检查、接口、泛型等特性，可以提高代码的可读性和可维护性。
Vue template 到 render 的过程 Vue模板到渲染的过程是通过编译器将模板转换为渲染函数的过程。编译器会解析模板，生成抽象语法树（AST），然后根据AST生成渲染函数。渲染函数会根据数据渲染出最终的DOM结构。
对 React 和 Vue 的理解，它们的异同 React和Vue都是流行的前端框架，它们都采用了组件化开发模式，并使用虚拟DOM来提高渲染效率。React更注重性能和灵活性，而Vue更注重易用性和学习曲线。
父组件中含子组件，父子组件的生命周期如何进行 父组件的生命周期会先于子组件的生命周期执行，子组件的生命周期会后于父组件的生命周期执行。例如，父组件的created钩子函数会先于子组件的created钩子函数执行，父组件的mounted钩子函数会先于子组件的mounted钩子函数执行。
介绍ES6新的基础数据类型 ES6新增了几个新的基础数据类型，包括Symbol、Set、Map等。
介绍迭代器 迭代器是一种用于遍历可迭代对象的机制。它可以使用next方法来获取下一个元素，并通过done属性判断是否已经遍历完毕。
ES 6遍历的方法和区别 ES6提供了几种新的遍历方法，包括for...of、forEach、map、filter、reduce等。for...of用于遍历可迭代对象，forEach用于遍历数组并执行回调函数，map用于对数组元素进行映射，filter用于过滤数组元素，reduce用于对数组元素进行累加操作。
介绍类数组 类数组是指具有length属性和数字索引的非数组对象，例如arguments对象、NodeList对象等。可以使用Array.from方法将类数组转换为真正的数组。
父子组件生命周期 父组件的生命周期会先于子组件的生命周期执行，子组件的生命周期会后于父组件的生命周期执行。
uniapp条件编译 UniApp的条件编译允许开发者根据不同的平台进行代码的编译，例如针对Android、iOS、H5等平台进行不同的代码编译。
文件上传以及优化 文件上传可以通过HTML的<input type='file'>标签实现，可以使用FormData对象来封装文件数据，并使用XMLHttpRequest对象发送请求。文件上传的优化可以通过压缩文件、使用分块上传、使用多线程上传等方式来实现。
栈和堆 栈和堆是内存中的两种数据结构。栈用于存储函数调用、局部变量等数据，具有先进后出（LIFO）的特性；堆用于存储对象、数组等数据，具有动态分配和释放的特性。
获取元素方式(api) 可以使用document.getElementById()、document.getElementsByTagName()、document.getElementsByClassName()等方法来获取DOM元素。
兄弟元素转为父子元素(append) 可以使用appendChild()方法将兄弟元素添加到父元素中。
会使用原生ajax请求数据(核心原理) 可以使用XMLHttpRequest对象来发送Ajax请求，其核心原理是使用open()方法打开一个HTTP连接，使用send()方法发送请求，使用onreadystatechange事件监听请求状态，并通过readyState属性判断请求状态，根据status属性判断请求结果。
路由和vuex路由守卫(关于路由很多) Vue Router是一个用于实现路由功能的库，它可以根据URL地址渲染不同的组件。路由守卫是一种用于控制路由访问权限的机制，可以在路由跳转前后进行一些操作，例如权限验证、数据预加载等。
简述一下包的优缺点 包是一种用于组织和管理代码的机制。包的优点是方便代码复用、提高代码可维护性、降低代码耦合度等；缺点是可能导致代码体积增大、依赖关系复杂、调试难度增加等。
现有三个异步方法(text1,text2,text3),如何实现同步代码内容: 可以使用Promise的Promise.all方法来实现多个异步方法的同步执行。

总结

本文整理了一些面试中常见的JavaScript和Vue.js问题，并提供详细的解答，希望对你有所帮助。在准备面试时，除了要掌握基础知识之外，还要注重实际项目的经验，能够清晰地表达自己的想法和思路。祝你面试顺利！