2020前端面试题(面经)

简单介绍一下vue和react的生命周期说一下vue和react的不同点vue第一次加载页面时触发的钩子函数谈谈你对vuex的理解html语义化的理解用于识别文字,文章的语义化标签 <p>,<aricle>举几个水平垂直居中的例子举几个隐藏div块的方法隐藏div块的方法哪些能够通过鼠标点击介绍一下浏览器的存储方法数组的去重的方法说一下对doctype的理解css中有几种样式的引入,他们的优先级事件委托和事件冒泡是什么es6新增了哪几个数据类型圣杯布局和双飞翼布局的实现

简单介绍一下vue和react的生命周期

beforeCreate( 创建前 )
在实例初始化之后,数据观测和事件配置之前被调用,此时组件的选项对象还未创建,el 和 data 并未初始化,因此无法访问methods, data, computed等上的方法和数据
created ( 创建后 )
实例已经创建完成之后被调用,在这一步,实例已完成以下配置:数据观测、属性和方法的运算,watch/event事件回调,完成了data 数据的初始化,el没有。 然而,挂载阶段还没有开始, $el属性目前不可见,这是一个常用的生命周期,因为你可以调用methods中的方法,改变data中的数据,并且修改可以通过vue的响应式绑定体现在页面上,获取computed中的计算属性等等,通常我们可以在这里对实例进行预处理,也有一些童鞋喜欢在这里发ajax请求,值得注意的是,这个周期中是没有什么方法来对实例化过程进行拦截的,因此假如有某些数据必须获取才允许进入页面的话,并不适合在这个方法发请求,建议在组件路由钩子beforeRouteEnter中完成
beforeMount
挂载开始之前被调用,相关的render函数首次被调用(虚拟DOM),实例已完成以下的配置: 编译模板,把data里面的数据和模板生成html,完成了el和data 初始化,注意此时还没有挂在html到页面上。
mounted
挂在完成,也就是模板中的HTML渲染到HTML页面中,此时一般可以做一些ajax操作,mounted只会执行一次。
beforeUpdate
在数据更新之前被调用,发生在虚拟DOM重新渲染和打补丁之前,可以在该钩子中进一步地更改状态,不会触发附加地重渲染过程
updated(更新后)
在由于数据更改导致地虚拟DOM重新渲染和打补丁只会调用,调用时,组件DOM已经更新,所以可以执行依赖于DOM的操作,然后在大多是情况下,应该避免在此期间更改状态,因为这可能会导致更新无限循环,该钩子在服务器端渲染期间不被调用
beforeDestroy(销毁前)
在实例销毁之前调用,实例仍然完全可用,
这一步还可以用this来获取实例,
一般在这一步做一些重置的操作,比如清除掉组件中的定时器 和 监听的dom事件
destroyed(销毁后)
在实例销毁之后调用,调用后,所以的事件监听器会被移出,所有的子实例也会被销毁,该钩子在服务器端渲染期间不被调用

componentWillMount()
componentWillMount()一般用的比较少,它更多的是在服务端渲染时使用。它代表的过程是组件已经经历了constructor()初始化数据后,但是还未渲染DOM时。
componentDidMount()
组件第一次渲染完成,此时dom节点已经生成,可以在这里调用ajax请求,返回数据setState后组件会重新渲染
componentWillUnmount ()
在此处完成组件的卸载和数据的销毁。
clear你在组建中所有的setTimeout,setInterval
移除所有组建中的监听 removeEventListener
有时候我们会碰到这个warning:
componentWillReceiveProps (nextProps)
在接受父组件改变后的props需要重新渲染组件时用到的比较多
接受一个参数nextProps
通过对比nextProps和this.props,将nextProps的state为当前组件的state,从而重新渲染组件
shouldComponentUpdate(nextProps,nextState)
主要用于性能优化(部分更新)
唯一用于控制组件重新渲染的生命周期,由于在react中,setState以后,state发生变化,组件会进入重新渲染的流程,在这里return false可以阻止组件的更新
因为react父组件的重新渲染会导致其所有子组件的重新渲染,这个时候其实我们是不需要所有子组件都跟着重新渲染的,因此需要在子组件的该生命周期中做判断
componentWillUpdate (nextProps,nextState)
shouldComponentUpdate返回true以后,组件进入重新渲染的流程,进入componentWillUpdate,这里同样可以拿到nextProps和nextState。
componentDidUpdate(prevProps,prevState)
组件更新完毕后,react只会在第一次初始化成功会进入componentDidmount,之后每次重新渲染后都会进入这个生命周期,这里可以拿到prevProps和prevState,即更新前的props和state。
componentwilUnmount
每当React使用完一个组件,这个组件必须从DOM中卸载后被销毁,此时componentWillUnmout 会被执行,完成所有的清理和销毁工作,在componentDidMount 中添加的任务都需要再该方法中撤销,如创建的定时器或事件监听器。

说一下vue和react的不同点

    数据绑定不同,vue是数据双向绑定,react则是单项数据流状态管理, vue用的是vuex,react一般用的是redux组件传值不同 ,vue(props,emit),react(props)数据更新不同, react数据更新React 元素都是immutable 不可变的。当元素被创建之后,你是无法改变其内容或属性的。一个元素就好像是动画里的一帧,它代表应用界面在某一时间点的样子。根据我们现阶段了解的有关 React 知识,更新界面的唯一办法是创建一个新的元素,然后将它传入 ReactDOM.render() 方法。vue数据更新,通过forceUpdate可以实现数据强制更新。

vue第一次加载页面时触发的钩子函数

beforeCreate,created,beforeMount,mounted

谈谈你对vuex的理解

vuex五大核心属性:state,getter,mutation,action,modulevuex是一个专为vue.js应用程序开发的状态管理模式

html语义化的理解

为了在没有CSS的情况下,页面也能呈现出很好地内容结构、代码结构:为了裸奔时好看;用户体验:例如title、alt用于解释名词或解释图片信息、label标签的活用;有利于SEO:和搜索引擎建立良好沟通,有助于爬虫抓取更多的有效信息:爬虫依赖于标签来确定上下文和各个关键字的权重;方便其他设备解析(如屏幕阅读器、盲人阅读器、移动设备)以意义的方式来渲染网页;便于团队开发和维护,语义化更具可读性,是下一步吧网页的重要动向,遵循W3C标准的团队都遵循这个标准,可以减少差异化。

举几个水平垂直居中的例子

    定位flex布局tablegird

举几个隐藏div块的方法

display:nonevisibility:hiddenoverflow:hiddenopacity:0

隐藏div块的方法哪些能够通过鼠标点击

visibility:hidden,opacity:0

介绍一下浏览器的存储方法

cookie:用于存储在用户本地上的数据,有效期很短暂,一旦用户关闭浏览器,cookie保存的数据就会丢失,存储的大小在4kb以内。LocalStorage:保存在浏览器上会永久保存,除非删除。SessionStorage:浏览器关闭或者退出后,内容将会被删除。

数组的去重的方法

    遍历数组,建立新数组,利用indexOf判断是否存在于新数组中,不存在则push到新数组,最后返回新数组遍历数组,利用object对象保存数组值,判断数组值是否已经保存在object中,未保存则push到新数组并用object[arrayItem]=1的方式记录保存数组下标判断法, 遍历数组,利用indexOf判断元素的值是否与当前索引相等,如相等则加入数组先排序, 然后比较俩数组一头一尾进行去重利用es6的Set进行去重

说一下对doctype的理解

DOCTYPE是document type (文档类型) 的缩写。声明位于文档的最前面,处于标签之前,它不是html标签。主要作用是告诉浏览器的解析器使用哪种HTML规范或者XHTML规范来解析页面。

css中有几种样式的引入,他们的优先级

行内样式内联样式外部引入样式
行内样式>内联样式>外部引入样式

事件委托和事件冒泡是什么

事件委托:当一个事件触发后,从window对象触发,不断经过下级节点,直到目标节点。在事件到达目标之前大的过程就是捕捉阶段。所有经过的事件到达目标的节点,都会触发对应的事件。
事件冒泡:当事件到达目标节点后,会沿着捕捉阶段的路线原路返回。同样,所有经过的节点,都会触发对应的事件。

es6新增了哪几个数据类型

symbol,Set,Map

圣杯布局和双飞翼布局的实现

浮动或者弹性布局

匿名

发表评论

匿名网友