- 简单介绍一下vue和react的生命周期
- 说一下vue和react的不同点
- vue第一次加载页面时触发的钩子函数
- 谈谈你对vuex的理解
- html语义化的理解
- 用于识别文字,文章的语义化标签
<p>,<aricle>
- 举几个水平垂直居中的例子
- 举几个隐藏div块的方法
- 隐藏div块的方法哪些能够通过鼠标点击
- 介绍一下浏览器的存储方法
- 数组的去重的方法
- 说一下对doctype的理解
- css中有几种样式的引入,他们的优先级
- 事件委托和事件冒泡是什么
- es6新增了哪几个数据类型
- 圣杯布局和双飞翼布局的实现
- 深拷贝和浅拷贝的区别(内存地址)
- 原型链的了解(实例,原型,构造函数)
- 事件队列,事件循环的理解(Event Loop)
- vue的数据双向绑定2.x,3.x
- 优化性能的方法
- 数据类型有哪些方法(三方面)
- 防抖和节流
- new操作符都做了些什么
- diff算法的原理
- …
简单介绍一下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,module
- vuex是一个专为vue.js应用程序开发的状态管理模式
html语义化的理解
- 为了在没有CSS的情况下,页面也能呈现出很好地内容结构、代码结构:为了裸奔时好看;
- 用户体验:例如title、alt用于解释名词或解释图片信息、label标签的活用;
- 有利于SEO:和搜索引擎建立良好沟通,有助于爬虫抓取更多的有效信息:爬虫依赖于标签来确定上下文和各个关键字的权重;
- 方便其他设备解析(如屏幕阅读器、盲人阅读器、移动设备)以意义的方式来渲染网页;
- 便于团队开发和维护,语义化更具可读性,是下一步吧网页的重要动向,遵循W3C标准的团队都遵循这个标准,可以减少差异化。
举几个水平垂直居中的例子
- 定位
- flex布局
- table
- gird
举几个隐藏div块的方法
- display:none
- visibility:hidden
- overflow:hidden
- opacity: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
圣杯布局和双飞翼布局的实现
浮动或者弹性布局
标题标题事件队列,事件循环的理解(Event Loop)
事件循环:
(1)js代码执行时,先按代码顺序将同步任务压入主执行栈中执行 (2)遇到异步任务则先将异步任务压入对应的任务队列中(宏队列或微队列) (3)同步任务执行完毕后,查看微队列,将微任务一一取出进入主执行栈中执行 (4)微任务队列清空后,再查看宏队列,只取出第一个宏任务执行,执行完一个宏任务后,回到第三步的操作 这个过程是循环不断的,所以整个的这种运行机制又称为Event Loop(事件循环)
标题优化性能的方法
- 减少http请求(使用CSS Sprites;JS、CSS源码压缩;图片大小控制合适;启用Gzip压缩,CDN托管,data缓存;图片服务器)
- 避免在CSS中使用 Expression
- 添加expire/Cache-Control头
- 少用全局变量,缓存DOM节点查找的结果,减少I/O读取操作
- 图片预加载,将样式表放在顶部,将脚本放在底部,加上时间戳
- 减少对DOM的直接操作,优化js的性能
判断数据类型有哪些方法(三方面)
- typeof
- instance of
- 类型.prototype.toString.call(xxx)
防抖和节流
防抖
作用是在短时间内多次触发同一个函数,只执行最后一次,或者只在开始时执行(只执行一次) 以用户拖拽改变窗口大小,触发 resize 事件为例
节流
节流是在一段时间内只允许函数执行一次
应用场景如:输入框的联想,可以限定用户在输入时,只在每两秒钟响应一次联想
标题new操作符都做了些什么
创建一个空对象
将空对象的_proto_属性指向构造函数的原型
将this指向这个对象
返回这个对象
diff算法的本质
找出两个对象之间的差异,目的是尽可能做到节点复用。
数字证书
一种文件的名称,好比一个机构或人的签名,能够证明这个机构或人的真实性。
数据类型
在ES5的时候,我们认知的数据类型确实是 6种:Number、String、Boolean、undefined、object、Null
ES6 中新增了一种 Symbol 。这种类型的对象永不相等,即始创建的时候传入相同的值,可以解决属性名冲突的问题,做为标记。
vue实现双向数据绑定原理
因为vue是通过Object.defineProperty()来实现数据劫持的。
1.实现一个监听器Observer,用来劫持并监听所有属性,如果有变动的,就通知订阅者。
2.实现一个订阅者Watcher,可以收到属性的变化通知并执行相应的函数,从而更新视图。
3.实现一个解析器Compile,可以扫描和解析每个节点的相关指令,并根据初始化模板数据以及初始化相应的订阅器。
Canvas和SVG区别
Canvas:
通过Javascript来绘制2D图形。
是逐像素进行渲染的。
其位置发生改变,会重新进行绘制。
SVG:
一种使用XML描述的2D图形的语言
SVG基于XML意味着,SVG DOM中的每个元素都是可用的,可以为某个元素附加Javascript事件处理器。
在 SVG 中,每个被绘制的图形均被视为对象。如果 SVG 对象的属性发生变化,那么浏览器能够自动重现图形。
比较
Canvas
依赖分辨率
不支持事件处理器
弱的文本渲染能力
能够以 .png 或 .jpg 格式保存结果图像
最适合图像密集型的游戏,其中的许多对象会被频繁重绘
SVG
不依赖分辨率
支持事件处理器
最适合带有大型渲染区域的应用程序(比如谷歌地图)
复杂度高会减慢渲染速度(任何过度使用 DOM 的应用都不快)
不适合游戏应用
ts中type和interface的区别
- interface只能表示function,object和class类型,type除了这些类型还可以表示其他类型
- interface可以合并同名接口,type不可以
- interface可以继承interface,继承type,使用extends关键字,type也可继承type,也可继承interface,使用&
null 和 undefined 区别
- 两个是不同的数据类型
- Undefined类型只有一个值,即undefined。当声明的变量还未被初始化时,变量的默认值为undefined。Null类型也只有一个值,即null。null用来表示尚未存在的对象,常用来表示函数企图返回一个不存在的对象。
- 使用typeof方法在前面已经讲过,null与undefined的类型是不一样的,所以输出"false"
promise 的实现原理
- Promise 也还是使用回调函数,只不过是把回调封装在了内部,使用上一直通过 then 方法的链式调用,使得多层的回调嵌套看起来变成了同一层的,书写上以及理解上会更直观和简洁一些。
typeof与instanceof区别
- typeof判断所有变量的类型,返回值有number,boolean,string,function,object,undefined。
- typeof对于丰富的对象实例,只能返回"Object"字符串。
- instanceof用来判断对象,代码形式为obj1 instanceof obj2(obj1是否是obj2的实例),obj2必须为对象,否则会报错!其返回值为布尔值。
- instanceof可以对不同的对象实例进行判断,判断方法是根据对象的原型链依次向下查询,如果obj2的原型属性存在obj1的原型链上(obj1 instanceof obj2)值为true。
instanceof 实现原理
instanceof 其实是通过原型链来实现继承关系的判断
js里map和set的区别
- Set类似于数组,但是它里面每一项的值是唯一的,没有重复的值,Set是一个构造函数,用来生成set的数据结构。(一般用于去重)
- Map类似于对象,也是键值对的集合,但是“键”的范围不限制于字符串,各种类型的值(包含对象)都可以当作键。Map 也可以接受一个数组作为参数,数组的成员是一个个表示键值对的数组。注意Map里面也不可以放重复的项。
for in 和for of的区别
- for in 便历出来的是属性
- for of 遍历的是value
- 手动给对象添加属性后, for in 是可以将新添加的属性遍历出来 但是for of 不行
- for in 的属性可以使用 [ ] 不可以使用 “.” eg: data[‘index’] instead of data.index
prototype 是啥,什么是原型,什么是实例原型,说说你的理解
- prototype是函数的原型
- 原型链:实例对象的原型__proto__指向new出该实例对象的构造函数原型prototype,再指向原始的对象原型Object.prototype,再指向null,形成原型链。
说说你对slot的理解?slot使用场景有哪些?
- slot是什么
在HTML中slot元素,作为Web Components技术套件的一部分,是Web组件内的一个占位符 - slot可以分为一下三种:
默认插槽
具名插槽
作用域插槽 - 默认插槽
子组件用< slot >标签来确定渲染位置,标签里面可以放DOM结构,当父组件使用的时候没有往插槽传入内容,标签内DOM结构就会显示在页面,父组件在使用的时候,直接在子组件的标签内写入内容即可 - 具名插槽
子组件用name属性来表示插槽的名字,不传为默认插槽,父组件中在使用时在默认插槽的基础上加上slot属性,值为子组件插槽name属性值 - 作用域插槽
子组件在作用域上绑定属性来将自组件的信息传给父组件使用,这些属性会被挂在父组件v-slot接收的对象上,父组件中在使用时通过 v-slot: (简写:#)获取子组件的信息,在内容中使用
Reflect.ownKeys()与Object.keys()区别
- Object.keys()会过滤属性名为Symbol值的属性。
- 都是遍历将键名组合成数组输出