前端面试深度解析：JS、Vue与Git核心知识点

"这份文档是2020-2021年前端开发工程师面试题的汇总，涵盖了JS、Git、Vue等关键知识点，旨在帮助面试者全面准备面试。" JS相关知识点： 1. **闭包**：闭包是指有权访问另一个函数作用域中的变量的函数，创建闭包的常见方式是通过在一个函数内部创建另一个函数。闭包可以用来保存私有变量，实现数据封装，也可用于内存优化。 2. **原型链**：JS中每个对象都有一个[[Prototype]]内部属性，通常通过`__proto__`或`Object.getPrototypeOf()`访问。当试图访问对象的一个属性时，如果该对象没有这个属性，会查找其原型，直到找到该属性或到达原型链的末尾。 3. **继承**：JS的继承可以通过原型链、构造函数、组合继承、原型式继承、寄生式继承、寄生组合式继承等方式实现。ES6引入了类和`class`关键字，但实质上仍然是基于原型的继承。 4. **原生事件绑定**：JavaScript原生事件绑定包括`addEventListener`和`removeEventListener`方法，它们允许我们添加和移除事件处理程序，而不会导致内存泄漏。 5. **DOM操作**：常见的DOM操作包括`getElementById`、`getElementsByClassName`、`getElementsByTagName`、`querySelector`、`querySelectorAll`等，以及创建、插入、删除节点的方法如`createElement`、`appendChild`、`removeChild`。 6. **JS设计模式**：设计模式是解决常见编程问题的模板，如单例模式、观察者模式等，它们提供了可复用的解决方案。 7. **面向对象理解**：JS的面向对象特性体现在构造函数、原型和实例之间，通过`new`关键字创建对象实例，利用原型实现属性和方法的共享。 8. **数组方法**：常见的数组方法包括`push`、`pop`、`shift`、`unshift`、`slice`、`splice`、`concat`、`join`、`indexOf`、`forEach`、`map`、`filter`等。 9. **数组遍历方法**：`for...of`、`for...in`、`forEach`、`map`、`filter`、`some`、`every`等，它们各有不同的使用场景和行为差异。 10. **作用域与作用域链**：JS的作用域决定了变量的可见性，全局作用域和局部作用域是最基本的两种。作用域链确保了对变量的查找顺序，从当前作用域开始，向上搜索直至全局作用域。 11. **URL到页面加载过程**：从输入URL到页面加载完成，涉及DNS解析、TCP连接、HTTP请求、HTML解析、CSS和JS执行、资源加载等多个步骤。 12. **事件代理**：事件代理（事件委托）是利用事件冒泡或捕获机制，将事件监听器添加到父元素上，处理子元素的事件，减少内存消耗和提高性能。 13. **数据类型**：JS有七种数据类型，包括基本类型（Undefined、Null、Boolean、Number、String、Symbol、BigInt）和引用类型（Object）。 Git相关知识点： 1. **跨域解决方案**：CORS（跨源资源共享）、JSONP（JSON with Padding）、代理服务器等方法可以解决浏览器同源策略限制下的跨域问题。 JS高级概念： 1. **同步与异步**：同步执行阻塞代码执行，异步则不会，常用于非阻塞I/O操作，如定时器、回调函数、Promise、async/await等。 2. **HTTP状态码**：状态码分为五类，如2XX表示成功，4XX表示客户端错误，5XX表示服务器错误，具体含义根据三位数字来解读。 Vue相关知识点： 1. **Vue特点**：Vue的核心特性是声明式渲染、虚拟DOM、组件化、响应式数据绑定、易于上手和集成。 2. **基本指令**：Vue提供了诸如`v-if`、`v-for`、`v-bind`、`v-on`等指令，用于控制视图与数据的交互。 3. **Vue组件数据**：组件内的`data`必须是函数，以确保每个组件实例有自己的数据副本，避免数据污染。 4. **v-if与v-show**：两者都能实现条件渲染，v-if有更高的切换开销，v-show有更高的初始渲染开销。 5. **自定义指令**：Vue允许自定义指令，实现特定功能，如DOM操作、事件监听等。 6. **生命周期钩子**：Vue组件有多个生命周期钩子，如`beforeCreate`、`created`、`beforeMount`、`mounted`等，便于在不同阶段执行逻辑。 7. **组件通讯**：组件间通讯可以通过props、事件（emit和$on）、Vuex状态管理、提供者/注入等方式进行。 8. **slot插槽**：slot用于组件内容分发，允许父组件向子组件传递动态内容。 9. **转场动画**：Vue的`transition`组件和`transition-group`可以实现过渡和动画效果，结合CSS或第三方库如Animate.css使用。 10. **单向数据流**：单向数据流意味着数据只能沿着一个方向流动，从父组件到子组件，有利于状态管理。 11. **双向数据绑定原理**：基于`Object.defineProperty`实现数据劫持，当数据变化时，触发setter并更新视图；视图改变时，通过`Vue.set`或计算属性更新数据。 12. **前端路由原理**：Vue Router通过监听浏览器URL变化，实现页面无刷新跳转，更新组件视图。 13. **路由懒加载**：懒加载可以按需加载路由对应的模块，减小首屏加载体积，提升用户体验。 14. **首屏优化**：通过预渲染、按需加载、代码分割、压缩资源等手段，减少首屏加载时间和白屏现象。 15. **环境切换**：通过环境变量设置，配合Webpack的配置，可以方便地在开发环境和生产环境之间切换。 16. **跨域处理**：Vue项目中通常通过Webpack的proxy配置或后端设置CORS来处理跨域问题。 17. **methods、computed、watch区别**：`methods`用于定义方法，`computed`是计算属性，缓存结果，仅在依赖变化时重新计算；`watch`用于监听数据变化并执行相应操作。 以上是文档中涉及的前端开发关键知识点，覆盖了JavaScript基础、高级概念、Git基础以及Vue.js框架的使用，对于准备前端面试的开发者来说，这些都是必备的技能和理解点。