50多道vue面试题，来挑战一下

• 虚拟DOM：dom 操作是非常耗费性能的， 不再使用原生的 dom 操作节点，极大解放 dom 操作，但具体操作的还是 dom 不过是换了另一种方式；

• 运行速度更快：相比较于 react 而言，同样是操作虚拟 dom ，就性能而言， vue 存在很大的优势。

2.vue父组件向子组件传递数据？

答：通过 props

3.子组件像父组件传递事件？

答：$emit 方法

3.1.其他组件传值方式

答：$children 、 p a r e n t 、 parent 、 parent、ref

3.2.vue proxy 跨域代理 、JS Proxy(代理)

proxyTable: {

‘/api’: {

target: ‘http://shuige.wicp.vip/’, //目标接口域名

changeOrigin: true, //是否跨域

pathRewrite: {

‘^/api’: ‘/’ //重写接口 后台接口指向不统一 所以指向所有/

}

},

cssSourceMap: false

}

Proxy

Proxy 也就是代理，可以帮助我们完成很多事情，例如对数据的处理，对构造函数的处理，对数据的验证，说白了，就是在我们访问对象前添加了一层拦截，可以过滤很多操作，而这些过滤，由你来定义。

4.v-show 和 v-if指令的共同点和不同点？

答:

共同点： 都能控制元素的显示和隐藏；

不同点： 实现本质方法不同，v-show 本质就是通过控制 css 中的 display 设置为 none，控制隐藏，只会编译一次；v-if 是动态的向 DOM 树内添加或者删除 DOM 元素，若初始值为 false ，就不会编译了。而且 v-if 不停的销毁和创建比较消耗性能。总结：如果要频繁切换某节点，使用 v-show (切换开销比较小，初始开销较大)。如果不需要频繁切换某节点使用 v-if（初始渲染开销较小，切换开销比较大）。

5. 如何让CSS只在当前组件中起作用?

答：在组件中的 style 前面加上 scoped

6. 的作用是什么?

答: keep-alive 是 Vue 内置的一个组件，可以使被包含的组件保留状态，或避免重新渲染。

• 一个场景

用户在某个列表页面选择筛选条件过滤出一份数据列表，由列表页面进入数据详情页面，再返回该列表页面，我们希望：列表页面可以保留用户的筛选（或选中）状态。

keep-alive就是用来解决这种场景。当然keep-alive不仅仅是能够保存页面/组件的状态这么简单，它还可以避免组件反复创建和渲染，有效提升系统性能。总的来说，keep-alive用于保存组件的渲染状态。

7.如何获取dom?

答：ref="domName" 用法：this.$refs.domName

8.说出几种vue当中的指令和它的用法？

答：

v-model 双向数据绑定；

v-for 循环；

v-if v-show 显示与隐藏；

v-on 事件；v-once : 只绑定一次；

9. vue-loader是什么？使用它的用途有哪些？

答：

vue 文件的一个加载器，将 template/js/style 转换成 js 模块

用途：js 可以写 es6 、 style样式可以 scss 或 less 、 template 可以加 jade等

10.为什么使用key?

答：需要使用 key 来给每个节点做一个唯一标识， Diff 算法就可以正确的识别此节点。作用主要是为了高效的更新虚拟 DOM。

11.axios及安装?

答：请求后台资源的模块。npm install axios —save 装好， js中使用 import 进来，然后