这15道Vue常见面试题，你会几道？？

骑猪看日落 2023-02-18 03:20 109阅读 0赞

#    [![11][]][11 1] #

# 1.vue优点？ #

答：

*  轻量级框架：只关注视图层，是一个构建数据的视图集合，大小只有几十 `kb` ；
 *  简单易学：国人开发，中文文档，不存在语言障碍 ，易于理解和学习；
 *  双向数据绑定：保留了 `angular` 的特点，在数据操作方面更为简单；
 *  组件化：保留了 `react` 的优点，实现了 `html` 的封装和重用，在构建单页面应用方面有着独特的优势；
 *  视图，数据，结构分离：使数据的更改更为简单，不需要进行逻辑代码的修改，只需要操作数据就能完成相关操作；
 *  虚拟DOM：`dom` 操作是非常耗费性能的， 不再使用原生的 `dom` 操作节点，极大解放 `dom` 操作，但具体操作的还是 `dom` 不过是换了另一种方式；
 *  运行速度更快：相比较于 `react` 而言，同样是操作虚拟 `dom` ，就性能而言， `vue` 存在很大的优势。

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

答：通过 `props`

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

答：`$emit` 方法

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

答:

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

不同点： 实现本质方法不同，`v-show` 本质就是通过控制 css 中的 `display` 设置为 `none`，控制隐藏，只会编译一次；`v-if` 是动态的向 DOM 树内添加或者删除 DOM 元素，若初始值为 `false` ，就不会编译了。而且 `v-if` 不停的销毁和创建比较消耗性能。总结：如果要频繁切换某节点，使用 `v-show` (切换开销比较小，初始开销较大)。如果不需要频繁切换某节点使用 `v-if`（初始渲染开销较小，切换开销比较大）。  
  
如果你以上的都会了， 说明你 60分及格了，另外现在vue3.0出来了，找工作一般都会问到，如果你还没学好。可以去小编前端扣扣裙 519293536 交流学习，里面有很多大佬，还有前端新技术资料分享！

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

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

### 6. 的作用是什么? ###

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

### 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` 进来，然后 `.get` 或 `.post` 。返回在 `.then` 函数中如果成功，失败则是在 `.catch` 函数中。

### 12.v-modal的使用 ###

答：`v-model` 用于表单数据的双向绑定，其实它就是一个语法糖，这个背后就做了两个操作：`v-bind` 绑定一个 `value` 属性；`v-on` 指令给当前元素绑定 `input` 事件。

### 13.请说出vue.cli项目中src目录每个文件夹和文件的用法？ ###

答：`assets` 文件夹是放静态资源；`components` 是放组件；`router` 是定义路由相关的配置; `app.vue` 是一个应用主组件；`main.js` 是入口文件。

### 14.分别简述computed和watch的使用场景 ###

答：

*  `computed` : 当一个属性受多个属性影响的时候就需要用到 `computed` ，最典型的栗子：购物车商品结算的时候
 *  `watch` : 当一条数据影响多条数据的时候就需要用 `watch` ，栗子：搜索数据

### 15.v-on可以监听多个方法吗？ ###

答：可以，栗子：`<input type="text" v-on="{ input:onInput,focus:onFocus,blur:onBlur, }">`。  
最后

总结：如果你以上的都会了， 说明你 60分及格了，另外现在vue3.0出来了，找工作一般都会问到，如果你还没学好。可以去小编前端扣扣裙 519293536 交流学习，里面有很多大佬，还有前端新技术资料分享！  
本文的文字及图片来源于网络加上自己的想法,仅供学习、交流使用,不具有任何商业用途,版权归原作者所有,如有问题请及时联系我们以作处理

[11]: https://img-blog.csdnimg.cn/20200615210614451.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1FRMjM1MjEwODA4Mw==,size_16,color_FFFFFF,t_70
[11 1]: https://www.cnblogs.com/chengxuyuanaa/p/13137821.html