1.hash的路由地址上有#号,history模式没有2.在做回车刷新的时候,hash模式会加载对应页面,history会报错4043.hash模式支持低版本浏览器,history不支持,因为是H5新增的API4.hash不会重新加载页面,单页面应用必备5.history有历史记录,H5新增了pushstate()和replaceState()去修改历史记录,并不会立刻发送请求6.history需要后台配置
MVVM是Model-view-ViewModel的缩写,是前端开发的架构模式M: 模型,对应的就是data的数据V:视图,用户界面,DOMVM: 视图模型: Vue的实例对象,连接view和Model的桥梁核心是提供对View和ViewModel的双向数据绑定,当数据改变的时候,ViewModel能监听到数据的变化,自动更新视图,当用户操作视图的时候,ViewModel也可以监听到视图的变化,然后通知数据进行改动,这就实现了双向数据绑定。ViewModel通过双向绑定把View和Model连接起来,他们之间的同步是自动的,不需要人为干涉,所以我们只需要关注业务逻辑即可,不需要操作DOM,同时也不需要关注数据的状态问题,因为它是由MVVM统一管理。
created:在渲染前调用,通常先初始化属性,然后做渲染mounted:在模板渲染完成后,一般都是初始化页面后,再对元素节点进行操作,在这里请求数据可能会出现闪屏的问题,created里不会,一般用created比较多。请求的数据对DOM有影响,那么使用created如果请求的数据对DOM无关,可以放在mounted
1.事件修饰符 .stop 阻止冒泡 .prevent 阻止默认行为 .capture 内部元素触发的事件先在此处理 .self 只有在event.target是当前元素时触发 .once 事件只会触发一次 .passive 立即触发默认行为 .native 把当前元素作为原生标签看待2.按键修饰符 .keyup 键盘抬起 .keydown 键盘按下3.系统修饰符 .ctrl .alt .meta4.鼠标修饰符 .left 鼠标左键 .right 鼠标右键 .middle 鼠标中键5.表单修饰符 .lazy 等输入完之后再显示 .trim 删除内容前后的空格 .number 输入是数字或转为数字
1.diff算法的优化2.静态提升3.事件侦听缓存
面试题:ElementUI是怎样做表单验证的?1.在表单中加rules属性,然后在data里写校验规则2.内部添加规则3.自定义函数校验
共同点:都可以控制元素的显示和隐藏区别:1.v-show是控制元素的display值来让元素显示和隐藏: v-if显示隐藏是把DOM元素整个添加和删除2.v-if有一个局部编译/卸载的过程,切换这个过程中会适当的销毁和重建内部的事件监听和子组件,v-show只是简单的css切换3.v-if才是真正的条件渲染: v-show从false变成true的时候不会触发组件的生命周期,v-if会触发生命周期4.v-if的切换效率比较低 v-show的效率比较高
1.获取html文件后,渲染引擎会对将HTML代码解析为DOM结构,同时获取CSS;2.将获取到的CSS解析为CSSOM树,与DOM树并发解析;3.解析JS脚本对DOM树和CSSOM树进行修改。4.将DOM树和CSSOM树合成为render树 5.对render树上节点进行布局,确定其位置,如果元素位置后续被改变而触发重新绘制叫做回流。6.对摆好位置的节点进行色彩渲染,如果元素样式后续被改变而触发页面重新绘制叫做重绘。7.加载剩余的img,video等媒体文件。浏览器拿到HTML,先将HTML转换成dom树再将CSS样式转换成stylesheet根据dom树和stylesheet创建布局树对布局树进行分层,为每个图层生成绘制列表再将图层分成图块紧接着光栅化将图块转换成位图,最后合成绘制生成页面。分层的目的:避免整个页面渲染,把页面分成多个图层,尤其是动画的时候,把动画独立出一个图层,渲染时只渲染该图层就ok,transform,z-index等,浏览器会自动优化生成图层光栅化目的:页面如果很长但是可视区很小,避免渲染非可视区的样式造成资源浪费,所以将每个图层又划分成多个小个子,当前只渲
1.URL解析:判断浏览器输入的是搜索内容还是URL 2.查找缓存:如果能找到缓存则直接返回页面,如果没有缓存则需要发送网络请求页面 3.DNS域名解析:将域名转换为IP地址的过程,得到了服务器具体的IP地址,才可以进行TCP链接以及数据的传输4.三次握手建立TCP连接:第一次握手:客户端主动链接服务器,发送初始序列号seq=x与SYN=1同步请求标志,并进入同步已发送SYN_SENT状态,等待服务器确认。第二次握手:服务端收到消息后发送确认标志ACK=1与同步请求标志SYN=1,发送自己的序列号seq=y以及客户端确认序号ack=x+1,此时服务器进入同步收到SYN_RECV状态。第三次握手:客户端收到消息后发送确认标志ACK=1,发送自己的序列号seq=x+1与服务器确认号ack=y+1,发送过后即确认链接已建立状态ESTABLISHED,服务端接收确认信息后进入链接已建立状态ESTABLISHED。5.发起HTTP请求:浏览器构建HTTP请求报文,并通过TCP协议传送到服务器的指定端口,HTTP请求报文一共有三个部分报文首部,通常包含请求行与各种请求头字段等;空行,告诉服务器请求
得分点:同源限制、协议、域名、端口、CORS、node中间件、JSONP、postmessage标准回答跨域:当前页面中的某个接口请求的地址和当前页面的地址如果协议、域名、端口其中有一项不同,就说该接口跨域了。跨域限制的原因:浏览器为了保证网页的安全,出的同源协议策略。跨域解决方案CORS:目前最常用的一种解决办法,通过设置后端允许跨域实现。 res.setHeader('Access-Control-Allow-Origin', '*'); res.setHeader("Access-Control-Allow-Methods", "GET, PUT, OPTIONS, POST");node中间件、nginx反向代理:跨域限制的时候浏览器不能跨域访问服务器,node中间件和nginx反向代理,都是让请求发给代理服务器,静态页面和代理服务器是同源的,然后代理服务器再向后端服务器发请求,服务器和服务器之间不存在同源限制。JSONP:利用的原理是script标签可以跨域请求资源,将回调函数作为参数拼接在url中。后端收到请求,调用该回调函数,并将数据作为参数返回去,注意设置响应头返回
铅笔Naruto
前端攻城狮