vue最新前端面试题系列（1-5）

前言： 欢迎浏览和关注本专栏《 前端就业宝典 》， 不管是扭螺丝还是造火箭， 多学点知识总没错。 这个专栏是扭螺丝之上要造火箭级别的知识，会给前端工作学习的小伙伴带来意想不到的帮助。

1，Vue 常用的修饰符都有哪些？

常用的修饰符一般分为事件修饰符和表单修饰符(v-model修饰符) 。

事件修饰符

• .stop
  阻止事件冒泡，相当于调用了event.stopPropagation()方法：

<button @click.stop ="dajianshi">test</button>
1

• .prevent
  阻止默认行为，相当于调用了event.preventDefault()方法，比如表单的提交、a标签的跳转就是默认事件：

<a @click.prevent="dajianshi">test</a>
1

• .self
  只有元素本身触发时才触发方法，就是只有点击元素本身才会触发。比如一个div里面有个按钮，div和按钮都有事件，我们点击按钮，div绑定的方法也会触发，如果div的click加上self，只有点击到div的时候才会触发，变相的算是阻止冒泡：

<div @click.self="dajianshi"></div>
1

• .once
  事件只能用一次，无论点击几次，执行一次之后都不会再执行

<div @click.once="dajianshi"></div>
1

• .capture
  capture的作用添加事件侦听器时使用事件捕获模式。即是给元素添加一个监听器，当元素发生冒泡时，先触发带有该修饰符的元素。若有多个该修饰符，则由外而内触发。
• .sync
  对prop进行双向绑定
• .keyCode
  监听按键的指令，具体可以查看vue的键码对应表

表单修饰符

1. .lazy
   输入框改变，这个数据就会改变，lazy这个修饰符会在光标离开input框才会更新数据:

<input type="text" v-model.lazy="value">
1

2. .trim
   输入框过滤首尾的空格：

<input type="text" v-model.trim="value">
1

3. .number
   先输入数字就会限制输入只能是数字，先字符串就相当于没有加number，注意，不是输入框不能输入字符串，是这个数据是数字

<input type="text" v-model.number="value">
1

---

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
}
1
2
3
4
5
6
7
8
9