全局路由守卫:1、全局前置守卫:beforeEach 2、全局后置守卫:afterEach
组件独享守卫:1、beforeEnter
组件内部守卫:1、beforeRouteEnter 2、beforeRouteLeave
route是为了获取路由信息---路由元信息meta、路由参数query、params的值,router则是为了操作路由,跳转之类的
flex-grow、flex-shrink 、 flex-basis这三个属性,规定了弹性元素如何伸长或缩短以适应flex容器中的可用空间,都是为了调整占比用的。
抽象语法树(Abstract Syntax Tree,AST),或简称语法树(Syntax tree),是源代码语法结构的一种抽象表示。它以树状的形式表现编程语言的语法结构,树上的每个节点都表示源代码中的一种结构。
flex弹性布局,百分比布局,媒体查询,rem
rem单位是相对于字体大小的html元素,也称为根元素。 默认情况下,html元素的font-size为16px。所以此时1rem = 16px。
利用rem和媒体查询,在分辨率发生变换时,给它不同的font-size。
加载渲染:父beforeCreate->父created->父beforeMount->子beforeCreate->子created->子beforeMount->子mounted->父mounted
更新:父beforeUpdate->子beforeUpdate->子updated->父updated
销毁:父beforeDestroy->子beforeDestroy->子destroyed->父destroyed
如果需要在第一次绑定的时候也执行函数,则需要用到immediate属性,比如当父组件向子组件动态传值时,子组件props首次获取到父组件传来的No认知时,也需要执行函数。
vue2
答:当一个vue实例创建后vue会便利data选项的属性,用object.defineProperty将他转化为getter或者setter,并且内部追踪相关依赖,在属性访问和修改时通知变化
每一个组件实例化都有相应的watcher程序实例,他会在组件渲染的过程中把属性记录为依赖,之后当依赖项的setter被调用时会通知watcher重新计算,从而使得它相关的组件的以更新
原型链:js引擎(解析代码的玩意)查找一个对象的属性,首先会查找元素本身有没有,没有的话会通过原型链上从下往上找,先是查找原型prototype,再去看隐式原型_propto_,隐式原型会指向上级构造函数A,顺着A再按照上面的顺序找,一直往上都没找到的话,最顶层是null
https://zhuanlan.zhihu.com/p/294808520
在开发当中,可能会遇到这样一个问题,现在有一个函数,传入的值可能不止一种,但当我们确定是某个类型的时候,就可以使用断言类型(as)
在变量中,一个值既可以是number又可以是string类型的时候,可以用到联合类型 |
在之前的学习中提到过interface,传入的参数既要满足number 又要满足boolean 还要满足string类型的时候,就可以用到交叉类型,可以理解为js里的逻辑与
页面元素的颜色变化会导致重绘---color、background-color、border-color
页面元素边距与大小变化会导致重排---width、height、margin、padding
迭代:利用已知的变量值,不断用变量的旧值递推新值,直到到达结束状态。
递归:函数直接或间接调用函数自身,直到满足终止条件,再逐层回归。
forEach 是一个迭代器,他与 for 循环本质上的区别是 forEach 是负责遍历(Array Set Map)可迭代对象的,而 for 循环是一种循环机制,只是能通过它遍历出数组。
1.get传参方式是通过地址栏URL传递,是可以直接看到get传递的参数,post传参方式参数URL不可见,get把请求的数据在URL后通过?连接,通过&进行参数分割。psot将参数存放在HTTP的包体内
2.get传递数据是通过URL进行传递,对传递的数据长度是受到URL大小的限制,URL最大长度是2048个字符。post没有长度限制
3.get后退不会有影响,post后退会重新进行提交
4.get请求可以被缓存,post不可以被缓存
5.get请求只URL编码,post支持多种编码方式
6.get请求的记录会留在历史记录中,post请求不会留在历史记录
7.get只支持ASCII字符,post没有字符类型限制
通常指路由拦截时在函数内调用的方法、在请求拦截器或响应拦截器中间写的封装后的逻辑处理函数,在useapp时写的一些中间方法,等中间件函数执行后返回我们想要的数据,再进行下一步的处理,简而言之就是一个封装好的函数,在另一个函数内经过传参调用,这就是中间件的使用
watch直接监听某个值,computed依赖其他元素值,其他元素的值发生变化,computed就会执行。
watch的return可有可无,后者必须有return.
在表单输入时添加必要的验证,像邮箱验证、手机号验证等,防止SQL注入引发问题,即前端传了一些特殊的链接给到后端,后端解析后崩溃这种事。
在请求头添加token校验等特殊校验,防止有人利用csrf漏洞趁虚而入
在进行一些重要操作时添加图形或验证码校验,阻止csrf跨站攻击进行窃取信息的操作
对重要信息进行加密处理,像localStorage里的信息等,如果项目是只能在公司内网使用这个可以不做
对输入的特殊字符进行转义处理,如<>等,转成特殊字符后一些恶意脚本就不能正常运行了
添加域名白名单和白名单校验
限制接口在一段时间内的调用次数,比如5分钟可调用一次
跨站脚本攻击,又称XSS代码攻击,也是一种常见的脚本注入攻击。例如在下面的界面上,很多输入框是可以随意输入内容的,特别是一些文本编辑框里面,可以输入例如这样的内容,如果在一些首页出现很多这样内容,而又不经过处理,那么页面就不断的弹框,更有甚者,在里面执行一个无限循环的脚本函数,直到页面耗尽资源为止,类似这样的攻击都是很常见的,所以我们如果是在外网或者很有危险的网络上发布程序,一般都需要对这些问题进行修复。
XSS攻击通过向页面中注入可以执行的JavaScript代码,因为可以通过JavaScript在已经登陆的用户页面上执行,可以使用已经信任用户的身份来进行攻击甚至盗走用户身份信息。
1、盗取各类用户帐号,如机器登录帐号、用户网银帐号、各类管理员帐号
2、控制企业数据,包括读取、篡改、添加、删除企业敏感数据的能力
3、盗窃企业重要的具有商业价值的资料
4、非法转账
5、强制发送电子邮件
6、网站挂马
控制受害者机器向其它网站发起攻击
XSS攻击其核心都是利用了脚本注入,因此我们解决办法其实很简单,不信赖用户输入,对特殊字符如”<”,”>”转义防止有心之人恶意嵌入特殊代码,就可以从根本上防止这一问题
防止跨站脚本攻击(XSS):通过过滤用户提交的HTML、CSS和JavaScript代码,防止攻击者在前端代码中注入恶意脚本。
缩小包体积,清除无用代码,优化代码结构,组件按需引入,路由懒加载,iconfont字体图标,减少图片,缩小图片大小
可手动添加响应式数据,解决数据变化视图未更新问题。当在项目中直接设置数组的某一项的值,或者直接设置对象的某个属性值,会发现页面并没有更新。这是因为Object.defineProperty()的限制,监听不到数据变化,可通过this.$set(数组或对象,数组下标或对象的属性名,更新后的值)解决。
从tab1切换到tab2的时候tab1数据还没有回来,tab2的数据先到了,然后在是tab1到了,这样tab1数据会覆盖掉tab2的展示。如果请求方法是放在组件内部的,我觉得不用考虑这事,因为组件是独立的,但是请求方法如果放在公共的父组件里面,子组件仅负责接收渲染,就会出现这种问题
宏任务:当前调用栈中执行的任务称为宏任务。(主代码快,定时器等等)。
微任务: 当前(此次事件循环中)宏任务执行完,在下一个宏任务开始之前需要执行的任务为微任务。(可以理解为回调事件,promise.then,proness.nextTick等等)。
宏任务中的事件放在callback queue中,由事件触发线程维护;微任务的事件放在微任务队列中,由js引擎线程维护。
http://t.csdn.cn/KAaBk
CSRF(Cross Site Request Forgery),即跨站请求伪造,是一种常见的Web攻击。CSRF攻击过程的受害者用户登录网站A,输入个人信息,在本地保存服务器生成的cookie。然后在A网站点击由攻击者构建一条恶意链接跳转到B网站,然后B网站携带着的用户cookie信息去访问B网站。让A网站造成是用户自己访问的假相,从而来进行一些列的操作,常见的就是转账。
解决办法
1、验证码。
应用程序和用户进行交互过程中,特别是账户交易这种核心步骤,强制用户输入验证码,才能完成最终请求。在通常情况下,验证码够很好地遏制
CSRF攻击。但增加验证码降低了用户的体验,网站不能给所有的操作都加上验证码。所以只能将验证码作为一种辅助手段,在关键业务点设置验证码。
2、Anti CSRF Token。
目前比较完善的解决方案是加入Anti-CSRF-Token,即发送请求时在HTTP 请
求中以参数的形式加入一个随机产生的token,并在服务器建立一个拦截器来验证这个token。服务器读取浏览器当前域cookie中这个token值,会进行校验该请求当中的token
和cookie当中的token值是否都存在且相等,才认为这是合法的请求
gulp:上手难度比较高,需要写很多task指令,使用的过程中要写很多代码。
webpack:ESM机制,工程化,有着各种功能,像代码压缩、图片压缩等,里面常见的有plugin,babel,load等
vite:热更新,速度比webpack快10倍,效率高,启动快。
虚拟滚动,页面懒加载,图片图表懒加载,分页等
对开发:技术栈用的是啥,有几个前端,做什么业务
对HR:几年的合同,试用期多久,有什么福利待遇,社保与公积金缴纳基数是多少
淘宝的flexible适配、rem结合媒体查询适配
对于函数式编程所引出的一个概念,要求函数一个单独的入参有一个单独的返回值,对于函数体外部的内容没有任何影响
函数式编程是常见的编程范式(除此以外还有面向对象和面向过程的),纯函数作为第一位
大部分都是默认样式不同,需要指定一个统一的样式
面向政府的项目、面向用户的手机端、开发用的管理员接触的页面、企业后台管理、面向用户的项目
https://juejin.cn/post/6969876122871791623
意思是软件即服务,意思是一种服务,sass系统项目就是一种可以让用户按需购买的项目--淘宝这种
“IP地址(Internet Protocol Address)是指互联网协议地址,又译为网际协议地址
接入网络的每一台电脑必须有一个IP地址,这就相当于一套房子的门牌号。平时,家庭局域网的地址,多是内网IP。目前,家庭常用的IP段是192.168.1.X地址段。
分为A类B类C类D类E类,常见的多为C类,如点击win+r键输入cmd打开后输入ipconfig,咱们电脑的ipv4就是标准的C类域名。
A类子网掩码:255.0.0.0,
B类子网掩码255.255.0.0
C类子网掩码255.255.255.0
·~~~~~其他各有其他判定标准
那么怎么对比两台电脑的网段是否相同呢,如果是C类,123.123.134.0与123.123.134.245就是相同网段,即子网掩码前三个数字是相同。如果是B类,就是对比前两位。
IP地址 = 网络地址 + 主机地址(又称:主机号和网络号组成)
192.168.100.168(IP地址) = 192.168.1.0 (网络地址) + 0.0.0.168(主机地址)
如果是C类,123.123.134.0与123.123.134.245的网络地址(网段)都是123.123.134.0,而主机地址分别是0.0.0.0与0.0.0.245,即最后一位。
内网IP有三个保留的IP地址段,分别是10,172,192开头的
网络地址(网络号)就是这个编码中比较特殊的一部分,网络地址不能够分配给主机,它用来标明一个网段,确定一个网段,比如网段123.888.999.9、123.888.999.7,这两个都是C类网段,前三位相同,所以是同一网段,他们的网络号都是123.888.999.0,
域名与IP功能一样,都是为了到达网站,IP的缺点就是不好记,IP地址一串数字:百度ip地址:14.215.177.39,百度网站名:www.baidu.com,www是服务器名,baidu.com是域名,都能到达同个地方,其实我们开发者最常见域名应该是loaclhost,直接代替你的ip地址访问你想访问的。
负责进行域名解析,上文中我们说到,为了方便选择使用域名访问网页,但本质上还是得通过IP地址才能找到对应的服务器资源,DNS就是在大家输入域名访问时把域名解析转换成IP地址用的。
网关(Gateway)又称网间连接器、协议转换器
由于IP协议是基于广播技术的,所以必须通过子网掩码把网络分割为多个子网络。那么,多个子网络之间需要通讯,这就需要网关转发,因为网关分别连接不同的网络。
网关是两个网络地址访问之间的中间人,
例子:如果你要去你的好兄弟小芳家,那么你先得经过自己家长同意,然后自己家长联系小芳的家长,小芳的家长说oj8k,那么你就可以去找小芳了。
上述例子中的家长就是网关.网关地址是特殊的IP地址
电脑与wifi需要两者在同一网段才能通过网关进行联网
两个不同网段之间进行通信需要经过网关
家庭用的路由器,就属于网关设备。
光猫只是将光纤信号转换为电信号,所以它不是网关,而路由器则具有转发数据包、协议转换、路由选择等功能,是家庭网络中的网关设备。
字节就是计量、数据单位,似千克、毫升、厘米。
1个字母或数字通常是一个字节,一个汉字是两个字节
计算机存储容量大小就是以字节数来度量,1024进位制:
1kb(千字节)等于1024字节(Byte)简称B。
1KB=1024字节(B), 1MB= 1024KB,1GB=1024MB
字符:是指计算机中使用的字母、数字、字和符号。
字段即键值对的键,是数据库中定义的变量名,通过相关字段可以取到相应的值,接口联调中我们常问后端什么什么字段是哪个,比如性别字段是sex,那么就可以在接口信息中看到sex:'男'这种键值对信息
每个键代表一个值,通过键我们可以获取到值,这就是键值对,一个普通的对象里可以有N个键值对
{a:'1'}a就是键,‘1’就是值
https://xie.infoq.cn/article/37cdbcf5b53760a6a8ecc13fc
钩子函数是Windows消息处理机制的一部分,通过设置“钩子”,应用程序可以在系统级对所有消息、事件进行过滤,访问在正常情况下无法访问的消息。钩子的本质是一段用以处理系统消息的程序,通过系统调用,把它挂入系统。
对于前端来说,钩子函数就是指再所有函数执行前,我先执行了的函数,即 钩住 我感兴趣的函数,只要它执行,我就先执行。
以太网是一种计算机局域网技术,是现实世界中最普遍的一种计算机网络。
又名内网,多用于公司内部,为了项目安全,很多公司都设置了连接内网才能访问相关网站。
路由器上会有WAN口和LAN口。其中,WAN口连接的是互联网,LAN口连接的是家中的局域网。所以,如果没有路由器,家中电脑是无法与互联网连接的。而路由器地址,也就是网关地址了。
局域网(Local Area Network),简称LAN,是指在某一区域内由多台计算机互联成的计算机组。“某一区域”指的是同一办公室、同一建筑物、同一公司和同一学校等,一般是方圆几千米以内。局域网可以实现文件管理、应用软件共享、打印机共享、扫描仪共享、工作组内的日程安排、电子邮件和传真通信服务等功能。局域网是封闭型的,可以由办公室内的两台计算机组成,也可以由一个公司内的上千台计算机组成。
局域网就像住在一个大合院的一些人能在一起进行共同的活动。
Vue.js 本身只包含了 Vue 核心库以及一些简单的工具函数,但是它并没有提供完整的 Web 应用所需的其他功能,如路由、数据请求、状态管理等。为了满足这些需求,Vue.js 采用依赖包的方式引入其他框架和库。
用的比较多的是cypress插件,进行e2e(端对端)测试,即黑盒测试。还是比较麻烦,我不知道多大的企业会去整这个,要让这个插件运行起来我们要配置一些运行指令,像npm run dev这样的,然后下载各类插件,下载chromedriver插件以便能通过cypress插件里的指令自由打开谷歌浏览器进行流程测试,这个插件容易被“墙”,可能得需要淘宝源下载,总之一定确保chrome是chromedriver所对应的版本,最好都是最新版本,还需要在需要做测试的页面具体的地方加上独特标识如data-test等才能让插件监测到,最后我们需要编写测试用例,写一堆代码逻辑判断,然后运行,这插件会把项目进行打包后放在谷歌等你指定的地方进行测试流程演示,最后告诉你哪些流程没走通。
端对端测试,属于黑盒测试,通过编写测试用例,自动化模拟用户操作,确保组件间通信正常,程序流数据传递如预期。
E2E 测试一般是由 QA 测试工程师来做。稍小的项目可能根据测试用例(excel)操作一遍就完了,稍大一点的会些一些自动化测试的代码。
前端可能会为核心的、主要的或稳定的业务流程写 E2E,不过占据的测试比例要小很多,主要目的是:
便于给 PM(产品经理) 展示业务流程
便于修改 Bug 之后的回归测试
E2E集成测试由业务功能出发,谁写都行,不关注具体实现,只验证能否实现业务功能。
E2E集成测试的维护成本要高很多,GUI和业务逻辑的变动都可能将原有的测试变成脏测试,导致测试无法通过。而且,由于E2E集成测试本质上是写另一个项目(Selenium都不是用的JS),编写过程中的语法、API、工具等其实都和项目本身没有太大的关系,所以也更适合交给一个单独的团队进行开发维护。但是由于各种客观原因,一般很少有测试团队能编写这种测试,而开发人员也不愿意写,这就导致了这种测试看起来美丽,但实际上落地很难。尤其是如果用这种测试搞TDD,那TDD也会被很快放弃。
广域网(英语:Wide Area Network,缩写为 WAN),又称外网、公网、互联网
如果局域网是小溪,很多条小溪就汇聚成大的干流,比如长江、黄河,干流就是广域网,然后再流入大海,大海就是互联网。
互联网就是由无数个局域网,通过WAN线路汇聚到运营商,然后运营商之间互联起来,就形成了互联网。互联网开放、互联,如果一个公司、机构的局域网没有连接到互联网,那这个局域网就不属于互联网。公司局域网、广域网、互联网的概念局域网与互联网与以上的概念相同,无非公司局域网增加了一些交换机、AP、防火墙,和家庭局域网没有任何实质的差别。
vue操作数据,jquery操作DOM
proxy可以直接监听对象而非属性,可以直接监听数组的变化,拦截方法比Object.defineProperty()多,Proxy返回的是一个新对象,可以只操作新的对象达到目的,而Object.defineProperty()只能遍历对象属性直接修改
Object.defineProperty()兼容性好,支持ie9,兼容性比proxy好
处理HTML并构建DOM树
处理CSS构建CSSOM树
将DOM树和CSSOM树合并成一个渲染树
根据渲染树来布局,计算每个节点的位置(回流)
调用GPU绘制,合成图层,显示在屏幕上(重绘)
在Vue2.x中数组变化监听的问题,其实不是Object.definePropertype方法监听不到,而是为了性能和收益比例综合考虑之下,改变了监听方式,从原本的直接监听结果变化这种思路变换到监听会导致结果变化的方法上,也就上面所提到的对数组的重写。
而Vue3.0中利用Proxy的方式则完美解决了2.0中出现的问题,所以以后面试中如果遇到Vue中对于数组监听的处理的时候,一定要分清楚是哪一个版本,
重写了数组中的那些方法,首先获取到这个数组的__ob__,也就是它的Observer对象,如果有新的值,就调用observeArray继续对新的值观察变化,然后手动调用notify,通知渲染watcher,执行update
Proxy 是直接代理对象,而不是劫持对象的属性;更好的数组监控;
代码减少对服务器请求次数** **减小对服务器** **请求代码的体积
v-if 和 v-show选择调用
为item设置唯一key值
减少watch的数据
全局事件解绑函数节流函数防抖
Keep- alive缓存
css精灵图字体图标
spa单页应用图片(数据)懒加载
路由懒加载
Webpack打包压缩代码
state => 基本数据
getters => 从基本数据派生的数据 (Getter相当于vue中的computed计算属性)
mutations => 提交更改数据的方法,同步! (commit)
actions => 像一个装饰器,包裹mutations,使之可以异步。 (dispath)
modules => 模块化Vuex
如果我们不喜欢这种在页面上使用“this.$stroe.state.count”和“this.$store.dispatch('funName')”这种很长的写法,那么我们可以使用mapState、mapGetters、mapActions就不会这么麻烦了;
vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。
Vuex 可以帮助我们管理共享状态,并附带了更多的概念和框架。这需要对短期和长期效益进行权衡。
如果您不打算开发大型单页应用,使用 Vuex 可能是繁琐冗余的。确实是如此——如果您的应用够简单,您最好不要使用 Vuex。一个简单的 store 模式 (opens new window)就足够您所需了。但是,如果您需要构建一个中大型单页应用,您很可能会考虑如何更好地在组件外部管理状态,Vuex 将会成为自然而然的选择。
借用构造函数继承,使用call或apply方法,将父对象的构造函数绑定在子对象上
原型继承,将子对象的prototype指向父对象的一个实例
组合继承
原型链继承的缺点
字面量重写原型会中断关系,使用引用类型的原型,并且子类型还无法给超类型传递参数。
借用构造函数(类式继承)
借用构造函数虽然解决了刚才两种问题,但没有原型,则复用无从谈起。
组合式继承
组合式继承是比较常用的一种继承方法,其背后的思路是使用原型链实现对原型属性和方法的继承,而通过借用构造函数来实现对实例属性的继承。这样,既通过在原型上定义方法实现了函数复用,又保证每个实例都有它自己的属性。
闭包的实质是因为函数嵌套而形成的作用域链
闭包的定义即:函数 A 内部有一个函数 B,函数 B 可以访问到函数 A 中的变量,那么函数 B 就是闭包
100: 请求者应当继续提出请求。
101(切换协议) 请求者已要求服务器切换协议,服务器已确认并准备进行切换。
2xx(成功)
200:正确的请求返回正确的结果
201:表示资源被正确的创建。比如说,我们 POST 用户名、密码正确创建了一个用户就可以返回 201。
202:请求是正确的,但是结果正在处理中,这时候客户端可以通过轮询等机制继续请求。
3xx(已重定向)
300:请求成功,但结果有多种选择。
301:请求成功,但是资源被永久转移。
303:使用 GET 来访问新的地址来获取资源。
304:请求的资源并没有被修改过
4xx(请求错误)
400:请求出现错误,比如请求头不对等。
401:没有提供认证信息。请求的时候没有带上 Token 等。
402:为以后需要所保留的状态码。
403:请求的资源不允许访问。就是说没有权限。
404:请求的内容不存在。
5xx(服务器错误)
500:服务器错误。
501:请求还没有被实现。
1、router-link 【实现跳转最简单的方法】
2、this.$router.push({ path:’/user’})
常用于路由传参,用法同第三种
3.this.$router.replace{path:‘/’ }
https://blog.51cto.com/u_15296180/3053439
虚拟机(VirtualMachine)的作用是通过软件模拟的具有完整硬件系统功能的、运行在一个完全隔离环境中的完整计算机系统。通俗的讲就是在计算机里面虚拟出来的另外一个计算机系统,这个虚拟处理的计算机和真实的计算机几乎一模一样,不同在于虚拟机的硬盘是在一个文件中虚拟处理的,所以可以随意修改虚拟机的设置,不用担心会对计算机造成损坏或者系统奔溃。
虚拟机用于模拟其他操作系统,就像手机模拟器一样
虚拟机,顾名思义就是虚拟出来的电脑,这个虚拟出来的电脑和真实的电脑几乎完全一样,所不同的是他的硬盘是在一个文件中虚拟出来的,所以你可以随意修改虚拟机的设置,而不用担心对自己的电脑造成损失,因此可以用来做试验什么的
但是虚拟机终归是虚拟出来的,用着一般都不太流畅,像什么云桌面、堡垒机,这都是用的虚拟机,实际操作体验不太好,很卡。
TCP/IP的三次握手,建立连接;四次挥手,断开连接。
完成了三次TCP握手:
女朋友发给男朋友:“在吗?”男朋友回复女朋友:“我在!”女朋友回复男朋友:“我知道了!”
此时男朋友知道了。
完成四次挥手:
女朋友发给男朋友:“分手吧!”男朋友回复女朋友:“额?”男朋友回复女朋友:“认真的吗?”女朋友回复男朋友:“认真的!”
此时女朋友删除了男朋友的微信。
首先是域名解析
建立TCP链接
建立Http请求
服务器处理Http请求
关闭TCP连接
浏览器解析资源
浏览器渲染页面