vue2中常见的面试题汇总

$route 和 $router的区别

$router 是VueRouter的实例，在script标签中想要导航到不同的URL,使用 $router.push方法
$route为router跳转对象，里面可以获取当前路由的name,path,query,parmas等。

组件通信有哪些方式

1.通过 props 传递
2.通过 $emit 触发自定义事件
3.使用 ref
4.EventBus
5.$parent或$root
6.attrs 与 listeners
7.Provide 与 Inject
8.Vuex

axios的请求方式

get请求（常用于获取数据）
post请求（常用于提交表单数据和上传文件）
put请求（对数据进行全部更新）
patch请求（修改部分数据）
delete请求(常用于删除操作(参数可以放在url上也可以和post一样放在请求体中)

实现组件缓存的方法

使用<keep-alive>标签，作用是创造一个缓存的空间，用于保存组件状态或者避免重新全部渲染。可以快速调用我们的缓存中的数据，从而达到提高访问速度。那常见的列表与购物车为例子，我们常常在这两个区域之间访问，每次点击不需要每次都重新渲染加载一次。

计算属性与侦听器的区别

(1)计算属性有缓存机制,侦听器没有
(2)计算属性不支持异步操作, 侦听器支持异步操作
(3)计算属性是一个额外新增的属性， 侦听器只能侦听data中的属性
(4)计算属性有返回值return,侦听器不需要return
(5)计算属性可以监听多个数据变化(计算属性内部用到的数据变化了，就会执行计算属性方法), 侦听器只能侦听一个数据的变化。

vue组件传值

父传子

子组件props定义变量
父组件在使用子组件时通过行内属性给props变量传值
特点：单向数据流

子传父

子组件：$emit触发父的事件
父在使用组件用@自定义事件名=父的方法 (子把值带出来)
特点：事件监听

vue中解决跨域做法

使用CORS （Cross-Origin Resource Sharing，跨域资源共享）是一个系统，它由一系列传输的HTTP头组成，这些HTTP头决定浏览器是否阻止前端 JavaScript 代码获取跨域请求的响应。

所谓同源（即指在同一个域）具有以下三个相同点

协议相同（protocol）
主机相同（host）
端口相同（port）
反之非同源请求，也就是协议、端口、主机其中一项不相同的时候，这时候就会产生跨域。

什么是虚拟 DOM

虚拟DOM给我们带来了跨平台的能力。实际上它是一层对真实BOM的抽象，以js对象(VNode节点)作为基础的树，用对象的属性来描述节点，相当于在 js 和真实 dom 中间加来一个缓存，利用 dom diff 算法避免没有必要的 dom 操作，从而提高性能。最后通过一系列操作使这棵树映射到真实环境上。

vue中一般通过state状态变化来进行编译，底层实现可以理解为三个步骤：

1.用js对象对象结构表述DOM树的结构，根据这个树构建一个真正的DOM树，插到浏览器页面中。

2.当我们状态改变之后，也就是state做出修改，vue便会重新构造一棵树的对象树，并且会进行同层对比，记录两棵树之间的差异。

3.把记录的差异再重新应用到所构建的真正的 dom 树，视图就更新了。

它的表达方式就是把每一个标签都转为一个对象，这个对象可以有三个属性：tag（标签）、props、children

diff算法

Diff 算法是一种对比算法。对比两者是 旧虚拟 DOM 和新虚拟 DOM，对比出是哪个 虚拟节点更改了，找出这个 虚拟节点并只更新这个虚拟节点所对应的 真实节点而不用更新其他数据没发生改变的节点，实现 精准地更新真实 DOM，进而 提高效率

在新老虚拟 DOM 对比时：
首先，对比节点本身，判断是否为同一节点，如果不为相同节点，则删除该节点重新创建节点进行替换
如果为相同节点，进行 patchVnode，判断如何对该节点的子节点进行处理，
先判断一方有子节点一方没有子节点的情况(如果新的 children 没有子节点，将旧的子节点移除)
比较如果都有子节点，则进行 updateChildren，判断如何对这些新老节点的子节点进行操作（diff 核心）。
匹配时，找到相同的子节点，递归比较子节点