Vue2：vue面试题汇总

3.1.渐进增强 优雅降级?

优雅降级和渐进增强印象中是随着 CSS3 流出来的一个概念。

由于低级浏览器不支持 CSS3，但 CSS3 的效果又太优秀不忍放弃，所以在高级浏览中使用 CSS3 而低级 浏览器 只 保证最基本的功能。

关键的区别 是他们所侧重的内容，以及这种不同造成 的工作流程的差异

优雅降级：一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。

渐进增强：针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高 级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。

3.2.目前前端比较流行的框架有哪些?设计思想和使用场景?

1、Vue框架是用于构建用户界面的渐进式框架。它是可以自底向上逐层应用。Vue 的核心库只关注视图层，上手简单而且还便于与第三方库进行整合。

2、React使创建交互式UI变得轻而易举。为你应用的每一个状态设计简洁的视图，当数据改变时 React能有效地更新并正确地渲染组件。

3、Angular是一个强大的前端框架，其强大之处主要是可以把静态页面与动态数据绑定起来。Angular是一个mvc框架

4、开发一次，多端覆盖uni-app 是DCloud公司使用 Vue.js 开发跨平台应用的前端框架，开发者编写一套代码，可编译到iOS、Android、H5、小程序等多个平台。

5、Flutter极速构建漂亮的原生应用Flutter是谷歌的移动UI框架，可以快速在iOS和Android上构建高质量的原生用户界面。Flutter Framework是一个完全由Dart语言构建的SDK，它实现了一整套自底而上的基础库。

3.3.vue.js 渐进式框架(分层的设计模式)是什么意思？五层设计

采用分层设计的方式各自每一块具有独立的功能；不强求我们一次性接受并使用它的全部功能特性。

五层具体指：

声明式渲染（vue.js），组件系统，cli脚手架，路由管理，数据仓库

vue.js的核心是什么？

数据驱动和组件化开发

3.4.vue.js 的核心是什么？

数据驱动和组件化开发

3.5.库和框架的区别?

库是将代码集合成的一个产品，供程序员调用。面向对象的代码组织形式而成的库也叫类库。面向过程的代码组织形式而成的库也叫函数库。在函数库中的可直接使用的函数叫库函数。

框架则是为解决一个(一类)问题而开发的产品，框架用户一般只需要使用框架提供的类或函数，即可实现全部功能。可以说，框架是库的升级版。开发者在使用框架的时候，必须使用这个框架的全部代码。

3.6.笔试题:最后一道大题:你对vue框架的理解?

首先从vue框架是什么开始说明；其次讲其核心；然后个人理解；

1、vue 是一套用于构建用户界面的 自底向上增量开发的 渐进式的 基于MVVM的 框架。

核心是关注视图层，解决数据绑定的问题。

2、核心思想

数据驱动：

视图内容根据数据的改变而改变。

”数据驱动-动态数据-响应式布局-data数据源对象中的数据，会被劫持到vm对象中，页面中的模板会通过特定标识取出vm对象的数据，然后渲染页面；如果数据改变了，它会实时刷新页面“

组件化：增加代码复用性，可维护性，可测试性，提高开发效率，方便重复使用，体现了高内聚，低耦合。

3、个人理解

由于vue是基于MVVM思想的双向绑定，让我们可以减少对dom元素的频繁操作，直接在数据层和视图层建立一种联系，方便使用。并且它通过组件化的方式，增加了代码的可复用性，可维护性，提高了开发效率。

 

4.v-if、v-show这个区别和用法?(面试)

根据它们底层的设计不一样有各自的使用场景

 v-if具有较高的 切换消耗,常常用在用户不常切换的模块

 v-show具有较高的性能消耗,常常用在频繁切换的模块中

 

实现本质方法区别

v-show本质就是标签display设置为none，控制隐藏

v-if是动态的向DOM树内添加或者删除DOM元素

编译的区别

v-show其实就是在控制css

v-if切换有一个局部编译/卸载的过程，切换过程中合适地销毁和重建内部的事件监听和子组件

编译的条件

v-show都会编译，初始值为false，只是将display设为none，但它也编译了

v-if初始值为false，就不会编译了

性能

v-show只编译一次，后面其实就是控制css，而v-if不停的销毁和创建，故v-show性能更好一点。

用法

v-if更灵活

 

7.面试题（组件基础）

组件中的基础语法常见的面试题方向:

7.1 @ 是一个关键字,在引入的文件路径中 它代表src目录

7.2 template:组件的模板中只能有一个根节点

7.3 v-slot: 插槽, 具名插槽 slot,slot-scope过时了 2.6.0使用v-slot 语法:v-slot:插槽名 语法糖:#插槽名 没有指定插槽名就是默认插入到插槽,不给插槽插入数据的话,就会使用组件的slot标签的尖括号中的数据 插槽名不用使用引号引起来,直接写变量名 插入的内容必须是template标签或者组件 不能是原生的元素

7.4 组件的data为什么是个函数然后返回对象,以前使用vm时都是个对象

组件和挂载到界面的vm对象的区别，vm挂载到页面上时，触发了钩子函数的，data生成了，页面上使用的数据就是data容器中渲染上去的，而且页面只有一个vm对象，所以的vm生成完毕(mouted)时data必须存在

组件是引入和注册以后不一定使用的，比如for循环0次就是组件对象生成了的，但是使用0次，所以组件对象并没有使用自己的data容器去渲染数据，造成资源浪费，解决方案就是懒加载：当使用data时去调用，才生成data对象

组件的data 设计成function的用义:组件可以多次使用,每使用一次,函数被调用一次则创建出不同的数据对象,实现同名组件的数据可以相互独立

 

7.5 scoped: style标签的scoped="scoped" 生成css的使用作用域只有当前组件内部的选择器生效