前端开发面试重点:HTML, CSS, JavaScript, Vue, React, Redux知识梳理

需积分: 5 0 下载量 192 浏览量 更新于2024-08-05 收藏 151KB DOCX 举报
"面试.docx" 面试中涉及到的IT知识点涵盖了前端开发、JavaScript、Vue.js、React和状态管理等多个领域。以下是对这些知识点的详细解释: 1. **H5新特性**:HTML5的新特性包括离线存储(localStorage和sessionStorage)、拖放功能、媒体元素(audio和video)、canvas和svg图形、geolocation定位、web workers和web sockets等。 2. **浏览器内核**:主要的浏览器内核有Trident(IE浏览器),Gecko(Firefox),Blink(Chrome和Opera)和WebKit(Safari)。 3. **DOCTYPE**:HTML文档的DOCTYPE声明用来告诉浏览器文档使用哪种HTML或XHTML规范,例如`<!DOCTYPE html>`声明了文档遵循HTML5标准。 4. **Div+CSS布局与Table布局**:Div+CSS布局提供了更好的灵活性和可维护性,支持响应式设计,而Table布局更适合数据展示,但结构与样式混杂,不利于维护。 5. **src与href**:src用于加载外部资源,如图片、脚本等;href用于链接外部资源,如链接到其他网页或引用样式表。 6. **CSS居中方法**:包括使用flexbox、grid、position绝对定位、text-align、margin auto等方法实现水平或垂直居中。 7. **自适应宽度布局**:可以使用calc()函数,配合max-width和min-width实现中间自适应宽度,两侧固定宽度的效果。 8. **清除浮动**:通常使用clear属性(clear:both或clear:left/right)或创建浮动元素后的空div(clearfix类)来解决浮动元素导致的父元素高度塌陷问题。 9. **闭包**:闭包是一种函数特性,允许函数访问并操作其外部作用域的变量,即使在其外部作用域已经关闭后。它可以用来封装变量,实现数据隐藏和模块化。 10. **原型与原型链**:JavaScript中的对象继承基于原型链,每个对象都有一个_proto_属性,指向创建它的构造函数的原型对象,形成一个链式结构。 11. **this指向**:在JavaScript中,this的值取决于函数调用方式,包括作为方法调用、作为普通函数调用、作为构造函数调用和使用call/apply/bind方法调用。 12. **Vue.js相关**: - **v-show与v-if**:v-if有更高的切换开销,适合条件复杂或不常改变的情况;v-show则适合频繁切换。 - **v-show与keep-alive**:v-show只是控制元素的显隐,不会缓存组件;keep-alive用于缓存组件状态,使组件在切换时保持状态。 - **Vue组件生命周期**:包括创建、挂载、更新、销毁等阶段,涉及beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy、destroyed等钩子函数。 - **组件通信**:通过props向子组件传递数据,使用$emit触发事件通信,Vuex状态管理库提供集中式状态管理。 - **computed与watch、methods**:computed属性是基于依赖缓存的,只有当依赖变更时才会重新计算;watch是观察数据的变化,可以深度监听或执行异步操作;methods是普通的函数,每次调用都会执行。 13. **Vuex**:Vuex是一个专为Vue.js应用设计的状态管理模式,通过集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。action用于异步操作,mutation用于同步修改状态。 14. **Vue Router**:Vue Router提供了两种路由模式——hash模式和history模式。Hash模式利用URL的#,历史模式则利用HTML5的History API实现无hash的URL。两者主要区别在于URL的表现形式和服务器配置。 15. **Promise**:Promise是ES6引入的处理异步操作的机制,代表一个异步操作的最终完成或失败状态及其返回值。Axios是一个基于Promise的HTTP库,常用于发送网络请求。 16. **React**: - **生命周期**:React组件有挂载、更新和卸载三个阶段,包括旧版生命周期方法(如componentWillMount、render、componentDidMount等)和新的生命周期方法(如getDerivedStateFromProps、shouldComponentUpdate、render、getSnapshotBeforeUpdate和componentDidUpdate等)。 - **state与prop**:state是组件内部可变数据,用于组件的动态行为;prop是父组件传递给子组件的静态数据,子组件不能修改。 17. **Redux**:Redux是一个用于管理JavaScript应用状态的库,它遵循单向数据流和纯函数的原理。Redux的核心概念包括store、actions和reducers。 18. **DOM操作**:在React中,不直接操作DOM,而是通过state和props来更新组件,但可以使用ref属性获取组件实例,间接操作DOM。 19. **setState**:调用setState后,React会将新的状态合并到当前状态,并尝试重新渲染组件。如果状态改变,组件会更新,否则React会跳过这次渲染。