没有归类的写,但是涉及到的还是蛮多的,坚持看完哦!
0、vue 和 react 的区别
共同点 :
都支持组件化 都是 javascript 的 ui 框架,数据驱动视图,
都使用虚拟 Dom 实现的,
都有自己的状态管理体系 react 有 redux vue 有 vuex
!!重点并且体现经验的点:
只有框架的骨架,其他的功能比如路由,状态管理等是框架分离的组件
区别 :
vue |
react |
vue 是 MVVM 模式的,数据是可变的,使用的是模板,支持双向数据绑定;内置了很多的东西,追求的是开发的简单,易学易会;同样是操作虚拟 dom,就性能而言存在很大优势,会跟踪每一个组件的依赖关系,不会去比较整颗组件树;去更加细粒度的去更新状态有变化的组件;在 vue 中,state 对象不是必须的,数据是由 data 属性在 vue 对象中进行管理,vue 提供了优化的重新渲染;最新的文档和简单的语法可以使用 vue,因为小,快,灵活,有丰富的 html 模板,易于开发。 |
react 针对的是 MVC 的 view,所有组件的渲染功能使用的都是 jsx , jsx 就是 xml 的语法编写的,数据是不可变的,单向数据流,追求的是方式是否正确,如果某个组件状态发生变化,react 会把这个组件还有这个组件的所有后代组件全部重新渲染,不过重新渲染并不是代表全部丢掉上一次的渲染结果,react 通过 diff 去比较两次虚拟 dom,比较之后再反映到真实 dom 上,如果说组件树比较大,diff 算法也是一笔开销,react 提供出解决方案,相比之下 react 功能没有 vue 模板系统的丰富,需要从组件中分离出 html 代码,在性能方面,当组件状态发生改变时,react 机制会触发整个组件树的重新呈现,state 对象在 react 中是不可以改变的,也就是不能被直接改变,需要 setState 方法进行更新状态,需要构建移动应用程序或者大型的应用程序可以使用 react,因为轻量级,易于版本的迁移; |
1、hash 和 history 的区别 :
原理:
浏览器向服务器发送请求;服务器监听端口 如果有请求过来就解析 url 地址;
根据客户端的路由配置返回相应的数据;
只可以添加短字符串;hash change
history:怎么实现跳转的 实现原理
push state
pop state
hash |
history |
不会重新加载页面,只有 hash 符号之前的内容会被包含在请求中,即使没有做到路由的全覆盖,也不会返回 404 错误;只可以添加短字符串 |
history 模式下,前端的 url 必须和实际向后端发起请求的 url 一致,如果后端缺少对 .com 后边的路由处理,将会返回 404 错误;一般需要后端将所有的页面都配置重定向到路由的首页的路由; |
hash 模式可以支持低版本的浏览器和IE浏览器 |
~ |
2、箭头函数和普通函数的区别 :
箭头函数 |
普通函数 |
箭头函数带箭头; 箭头函数的 this ,就是定义时所在的对象;永远指向其上下文的 this ,如上面代码没有为 subclassA 指定调用者,它就默认指向了 window ,而 subclassB 则指向其上下文 ;箭头函数不可以使用 arguments ,因为 arguments 在函数体内不存在;箭头函数不能用作 generator 函数,不能使用 yield ;箭头函数不能使用 new ;因为箭头函数没有自己的 this ,没有办法调用 call,apply,没有 prototype; |
普通函数不带箭头;普通函数可以有匿名函数,也可以有具名函数;普通函数的 this 指向调用者; |
3、img 里边有个 alt 和 title 他们的区别 :
alt |
title |
alt 是图片加载失败时,显示在页面上的替代文字; |
title 是鼠标移入显示文字,页面优化要在 alt 中文字说明,在 title 里进一步对图片说明; |
4、dome0级 和 dome2级 实现的区别:
demo0级 |
demo2级 |
会覆盖;一种是 onclick = function ;一种是标签里的 onclick |
可以绑定多个时间处理程序,一个是 addEventListener ;一种是 removeEventListener |
5、函数柯里化 :
接收函数 A 作为参数,运行后能够返回一个新的函数,
并且,
这个新的函数能够处理函数 A 的剩余参数,也被称为部分求值;
6、常用的事件修饰符:
符号 |
名称 |
.stop |
阻止冒泡 |
.prevent |
阻止默认事件 |
.once |
事件只触发一次 |
.capture |
添加事件侦听器时使用事件捕获模式 |
7、服务器渲染 和 预渲染
服务器端渲染 |
预渲染 |
就是用户请求后的服务器渲染,利于优化内容,返回时间快 |
就是用户请求前的服务器渲染 |
8、react 的生命周期:
挂载期 |
更新期 |
销毁期 |
新增的两个 |
constructor, componentDidmount, render |
shouldcomponentupdate, componentwillupdate, componentdidupdate |
componentWillunmount |
getDerivedStateFromProps ( nextProps,prevState ),getSnapshotBeforeUpdate(prevProps,prevState) |
api |
~ |
store |
数据池 |
state |
一个 state 对应一个 view |
action |
监听 state 的变化 |
dispatch |
view 发出 action 的唯一方法 |
reducer |
改变 state 处理层,接收 action 和 state,通过处理 action 返回新的 state |
subscribe |
监听 state,state 变化 view 随之改变 |
9、优雅降级和渐进增强的区别:
是在 css3 出现以后火起来的
渐进增强 |
优雅降级 |
就是先确保基本的内容能够在所有的浏览器中使用,然后再根据浏览器的情况,为那些更加强大的李兰器提供更好的用户体验; |
就是和渐进增强正好相反,先默认所有的浏览器都支持某些高级技术,最后根据浏览器的情况,如果某些技术有些浏览器不支持,那么就不在这个浏览器中使用这个高级技术; |
10、px 和 em 和 rem 的区别:
px |
em |
rem |
px 是固定的像素,用于元素的边框或者定位; |
相对 px 更具灵活性,更适用于响应式布局,相对于父元素 |
相对 px 更具灵活性,更适用于响应式布局,相对于根元素 |
11、js 运行机制
浏览器缓存是前端开发中不可避免的问题;
首先就是为什么要缓存,缓存可以减少用户等待事件,提高用体验,减少一些网络宽带的消耗
常见的缓存机制包括:强缓存和协商缓存;
12、react 中 children 传一个 和 多个 的区别:
一个 |
多个 |
不可循环 map |
可循环 |
就是当组件没有子节点就是 undefined,如果有一个节点数据类型就是 object 如果有多个子节点 数据就是 array; |
|
13、vue中的自定义指令:
有五个钩子函数:bind,unbind,inserted,update,componentUpdated;
全局自定义指令 |
局部自定义指令 |
使用 Vue.directive( ) |
组件或构造函数中接收一个 directives 的选项 |
14、state 和 props 的区别:
state |
props |
state 是组件内部的状态,不能直接修改,必须通过 setState 来改变值得状态 |
props 是指组件间传递的一种方式,props 也可以传递 state,this.props 属性是只读的不可修改 |
15、原型链:
就是当一个对象的属性时,首先就是查找这个对象有没有该属性,
如果没有就查找他的原型,也就是 __proto__ 指向的 prototype 原型对象;
如果还是没有就查找 object 的原型对象;直到找到 object 为止;
16、js 中的异步操作:setTimeout setInterval ajax promise
17、js 继承几种方式:
原型链继承 |
构造函数继承 |
实例继承 |
es5 继承 |
es6 继承 |
父类的实例作为子类的原型;易于实现;父类新增实例和子类都能访问;但是如果要新增加原型属性和方法需要在 new 父类构造函数的后面,并且不能实现多继承 |
复制父类的实例属性给子类;可以实现多继承;不能够复用,不能继承原型属性上的属性和方法; |
不限制调用方式,简单易实现,但是不能多次继承 |
在子类中创建自己的 this 指向,最后将方法添加到 this 中 |
使用关键字先创建父类的实例对象 this,最后在子类 class 中修改 this |
18、深浅拷贝:
简单来说就是 自食其力 和 拿人手短 的区别
浅拷贝 |
深拷贝 |
浅拷贝就是不管多么复杂的数据,浅拷贝只拷贝一层,拷贝出来的数据想要改变,原来的数据也会跟着改变;也就是浅拷贝只会拷贝对象的指针,不赋值对象本身,新旧对象还是共用同一个内存,修改时原对象也会修改; |
深拷贝是完全拷贝相关变量的所有数据,但是不能拷贝函数 for 循环,定时器,原型链上的属性和方法也不能拷贝 |
19、es6新语法 :
这个建议大家去官网看一下 我这里简单说明几个常问到的
let 声明的变量只能在代码块内有效,不存在变量提升,
值为 undefined ,有暂时性死区,
不允许在相同作用域内重复声明同一个变量;
const 只读变量,值不能改变,只声明不赋值就会报错;当前作用域内有效;
对象新增方法:
Object.assign() 对象合并 浅拷贝
Object.keys() 返回键 对象返回属性名;数组和字符串返回索引下标;
Object.values() 返回值 返回一个数组
... 展开,或者解构赋值啥的
Symbol 原始数据类型,
它对象的属性有两种类型,
一种是原来就有的字符串
一种是新增的 symbol 类型,是独一无二的;
不会发生冲突;不能使用 new 命令,不然会报错,symbol 不是对象所以不能加属性;
Set:
本身就是一个构造函数,用的时候要 new 一下;
可以接受一个数组作为参数用来数组的去重;
Map:
类似于对象,他的键值对可以是任意类型的;
提供了 size,has,get 等方法;
20、跨域怎么解决的?
原生用 JSONP 方式:
创建 script 标签,向服务器请求数据,服务器收到请求后,
将数据放在一个指定名字的回调函数的参数里边传给前端;
在 vue 中:
vue.config.js 里使用 proxy target 进行配置
在 react 中:
有两种解决方案:
一个是在 package.json 中加上 proxy 代理配置,页面中要只用 fetch 请求
一个是使用 http-proxy-middleware 解决
后端用一个插件叫什么来着 Emm...什么 cors?
21、jsonp的原理
用户在客户端注册一个 callback,
然后把 callback 的名字传给服务器,
这个时候,服务器生成 json 数据,生成函数,
然后再将 json 数据直接以入参的方式放到 function 当中,
这样就生成了 js 文档返回给客户端,
然后客户端浏览器在解析传入到客户端之前注册那个 callback 函数里,
简单来说就是利用 script 标签没有跨域限制的漏洞达到与第三方通信的 Udine;
22、vue 的生命周期:
创建前 |
创建后 |
数据初始化 |
挂载 |
更新前 |
更新后 |
销毁前 |
销毁后 |
beforeCreate |
created |
beforeMount |
mounted |
beforeUpdate |
updated |
beforeDestroy |
destroyed |
23、vue 中 如何检测数组的变化?
vue 的 observer 对数组做了单独的处理,对数组的方法进行编译,
并赋值给 __proto__ 属性上,因为原型链机制,
找到对应的方法就不会向上找,
编译的时候也会添加一些索引的方法 push,unshift,splice 等,
然后进行手动配置 observe,就这样
24、vue 中 v-html 会导致什么问题?
在网站上动态渲染任意 html,很容易导致 XSS 攻击,
所以只能在可信内容上使用 v-html,并且永远不能用于用户提交的内容上
XSS 攻击 是什么?:
网页开发时候的漏洞,通过恶意指令使用户加载并执行攻击者恶意制造的网页程序;
25、vue双向绑定的原理:
实现双向数据绑定,首先要对数据进行监听,需要一个 observer 监听所有属性;
vue2.0 |
vue3.0 |
vue2.0采用的是 Object.defineProperty + 观察者模式,通过 getter 和 setter 劫持各个属性的变化; |
vue3.0 刚好解决了这个问题,通过 proxy 对数据进行监听,Proxy 可以对数组和对象进行拦截和监听,使用类似于 debounce 的操作,对其进行优化,使其值响应一次;判断 key 是否是 target 的自身属性,以及value是否和 target [ key ] 相等,可以避免多余的 set / get 操作; |
但是优缺点 就是给 data 数组新增属性时,要使用 $set 才能保证新增的属性也是响应式的,不能监听数组的变化,采用的是对数组的方法进行重写( push, pop,shift,unshift 等等),效率差, |
Proxy 只能代理一层,无法深度监听;使用深度递归,对每一层进行监听。巧妙的使用的 Reflect.get ( ) 会返回对象内层结构的特性(下一层),判断下一层是否还是对象,并且使用深度递归操作;之后,使用 weakMap,使用两个 weakMap 来保存原始数据和可响应数据。 |
这主要是因为对多层数据进行一次性的递归操作,如果数据很多或者是很深层次,这样性能非常的差,因为局限性,无法对新加删除的数据进行监听 |
访问数据时会从保存的数据中查找,如果没有再对其进行 Proxy 操作;他的优势就是更快,体积更小,更轻松,更易于维护,但是兼容性还不是很完善 ,会出发多次 set / get 响应 |
26、vue-router 路由守卫有几个钩子函数