必看58 道 Vue 常见面试题集锦，涵盖入门到精通，自测 Vue 掌握程度

Posted 2021-03-06 zxh-null

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（初始渲染开销较小，切换开销比较大）。

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

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

6.  <keep-alive></keep-alive> 的作用是什么?

答: 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。

 

请耐心等待下一次更新欧。