vue最新前端面试题系列(1-5)
,Vue 常用的修饰符都有哪些?事件修饰符表单修饰符2,$route和 $router的区别3,vue如何解决跨域4,v-if 和v-show 区别5,v-if 和v-show 区别
前言: 欢迎浏览和关注本专栏《 前端就业宝典 》, 不管是扭螺丝还是造火箭, 多学点知识总没错。 这个专栏是扭螺丝之上要造火箭级别的知识,会给前端工作学习的小伙伴带来意想不到的帮助。
1,Vue 常用的修饰符都有哪些?
常用的修饰符一般分为事件修饰符和表单修饰符(v-model修饰符) 。
事件修饰符
- .stop
阻止事件冒泡,相当于调用了event.stopPropagation()方法:
<button @click.stop ="dajianshi">test</button>
- .prevent
阻止默认行为,相当于调用了event.preventDefault()方法,比如表单的提交、a标签的跳转就是默认事件:
<a @click.prevent="dajianshi">test</a>
- .self
只有元素本身触发时才触发方法,就是只有点击元素本身才会触发。比如一个div里面有个按钮,div和按钮都有事件,我们点击按钮,div绑定的方法也会触发,如果div的click加上self,只有点击到div的时候才会触发,变相的算是阻止冒泡:
<div @click.self="dajianshi"></div>
- .once
事件只能用一次,无论点击几次,执行一次之后都不会再执行
<div @click.once="dajianshi"></div>
- .capture
capture的作用添加事件侦听器时使用事件捕获模式。即是给元素添加一个监听器,当元素发生冒泡时,先触发带有该修饰符的元素。若有多个该修饰符,则由外而内触发。 - .sync
对prop进行双向绑定 - .keyCode
监听按键的指令,具体可以查看vue的键码对应表
表单修饰符
- .lazy
输入框改变,这个数据就会改变,lazy这个修饰符会在光标离开input框才会更新数据:
<input type="text" v-model.lazy="value">
- .trim
输入框过滤首尾的空格:
<input type="text" v-model.trim="value">
- .number
先输入数字就会限制输入只能是数字,先字符串就相当于没有加number,注意,不是输入框不能输入字符串,是这个数据是数字
<input type="text" v-model.number="value">
2,$route和 $router的区别
$router为VueRouter的实例,是一个全局路由对象,包含了路由跳转的方法、钩子函数等。
$route 是路由信息对象||跳转的路由对象,每一个路由都会有一个route对象,是一个局部对象,包含path、params、hash、query、fullPath、matched、name等路由信息参数。
3,vue如何解决跨域
①proxyTable:一般在项目config目录下面有个index文件。
②CORS:即跨源资源共享,它定义了一种浏览器和服务器交互的方式来确定是否允许跨域请求。
③Nginx 反向代理
4,v-if 和v-show 区别
v-show
v-show不管条件是真还是假,第一次渲染的时候都会编译出来,也就是标签都会添加到DOM中。之后切换的时候,通过display: none;样式来显示隐藏元素。可以说只是改变css的样式,几乎不会影响什么性能。
v-if
在首次渲染的时候,如果条件为假,什么也不操作,页面当作没有这些元素。当条件为真的时候,开始局部编译,动态的向DOM元素里面添加元素。当条件从真变为假的时候,开始局部编译,卸载这些元素,也就是删除。
性能方面
v-if绝对是更消耗性能的,因为v-if在显示隐藏过程中有DOM的添加和删除,v-show就简单多了,只是操作css。
使用场景
因为v-show无论如何都会渲染,如果在一些场景下很难出现,那么使用v-if。如果是一些固定的,条件内容都不怎么会改变的,频繁切换的,使用v-show会比较省性能。如果是子组件,每次切换子组件不执行生命周期,使用v-show,如果子组件需要重新执行生命周期,那么使用v-if才能触发。
5,v-if 和v-show 区别
key 是为 Vue 中 vnode 的唯一标记,通过这个 key,我们的 diff 操作可以更准确、更快速。Vue 的 diff 过程可以概括为:oldCh 和 newCh 各有两个头尾的变量 oldStartIndex、oldEndIndex 和 newStartIndex、newEndIndex,它们会新节点和旧节点会进行两两对比,即一共有4种比较方式:newStartIndex 和oldStartIndex 、newEndIndex 和 oldEndIndex 、newStartIndex 和 oldEndIndex 、newEndIndex 和 oldStartIndex,如果以上 4 种比较都没匹配,如果设置了key,就会用 key 再进行比较,在比较的过程中,遍历会往中间靠,一旦 StartIdx > EndIdx 表明 oldCh 和 newCh 至少有一个已经遍历完了,就会结束比较。
所以 Vue 中 key 的作用是:key 是为 Vue 中 vnode 的唯一标记,通过这个 key,我们的 diff 操作可以更准确、更快速更准确:因为带 key 就不是就地复用了,在 sameNode 函数 a.key === b.key 对比中可以避免就地复用的情况。
所以会更加准确。更快速:利用 key 的唯一性生成 map 对象来获取对应节点,比遍历方式更快,源码如下:
function createKeyToOldIdx (children, beginIdx, endIdx) {
let i, key
const map = {}
for (i = beginIdx; i <= endIdx; ++i) {
key = children[i].key
if (isDef(key)) map[key] = i
}
return map
}
更多推荐
所有评论(0)