最新整理的Vue 基础面试题 （二） 细+答案

因为题目多，所以发布了两篇
第一篇：https://blog.youkuaiyun.com/g1437353759/article/details/109250844

1.vue优点

• 轻量级框架
• 简单易学
• 双向数据绑定
• 组件化
• 视图
• 数据和结构分离
• 虚拟DOM
• 运行速度快

vue是页面应用，是页面布局刷新，不用每次条状页面求要请求所有数据和DOM，这样大大加快了访问速度和提升用户体验。而且他的三方ui库很多，可以节省开发时间

2、组件之间数据共享

1：props emit 缺点：如果组件嵌套层次多的话，数据传递比较繁琐
2：provide inject (依赖注入)，缺点：不支持响应式
3：this.$rootthis.$parent this.$refs
4: eventbus 缺点：数据不支持响应式
5: vuex 缺点：数据的读取和修改需要按照流程来操作，不适合小型项目

3、 keep-alive的作用是什么?

包裹动态组件时，会缓存不活动的组件实例,主要用于保留组件状态或避免重新渲染

大白话: 比如有一个列表和一个详情，那么用户就会经常执行打开详情=>返回列表=>打开详情…这样的话列表和详情都是一个频率很高的页面，那么就可以对列表组件使用``进行缓存，这样用户每次返回列表的时候，都能从缓存中快速渲染，而不是重新渲染

4、如何获取dom

在我们的vue项目中，难免会因为引用第三方库而需要操作DOM标签，vue为我们提供了ref属性。 ref 被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的 $refs 对象上。如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子组件上，引用就指向组件实例

5、说出几种vue当中的指令和它的用法？

v-if：判断是否隐藏；v-for：数据循环出来；v-bind:class：绑定一个属性；v-model：实现双向绑定

6、vue-loader是什么？使用它的用途有哪些？

是解析.vue文件的一个加载器，跟template/js/style转换成js模块。

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

7、为什么使用key

1、提高vue更新DOM的性能

key 的特殊属性主要用在 Vue的虚拟DOM算法，在新旧nodes对比时辨识VNodes。如果不使用key，Vue会使用一种最大限度减少动态元素并且尽可能的尝试修复/再利用相同类型元素的算法。使用key它会基于key的变化重新排列元素顺序，并且会移除key不存在的元素。有相同父元素的子元素必须有独特的key。

2、管理可复用的元素

Vue尽可能高效地渲染元素，通常复用已有的元素，而不是从头开始渲染

8、v-model是什么？怎么使用？

v-model可以实现双向绑定，指令（v-bind:class、v-for、v-if、v-show、v-on）。vue的model层的data属性。

9、iframe的优缺点？

答案：iframe也称作嵌入式框架，嵌入式框架和框架网页类似，它可以把一个网页的框架和内容嵌入在现有的网页中。
优点：

• 解决加载缓慢的第三方内容如图标和广告等的加载问题
• Security sandbox
• 并行加载脚本
• 方便制作导航栏

缺点：

• iframe会阻塞主页面的Onload事件
• 即使内容为空，加载也需要时间
• 没有语意

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

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

11、### 聊聊你对Vue.js的template编译的理解？

答：简而言之，就是先转化成AST树，再得到的render函数返回VNode（Vue的虚拟DOM节点）

详情步骤：

首先，通过compile编译器把template编译成AST语法树（abstract syntax tree 即 源代码的抽象语法结构的树状表现形式），compile是createCompiler的返回值，createCompiler是用以创建编译器的。另外compile还负责合并option。

然后，AST会经过generate（将AST语法树转化成render funtion字符串的过程）得到render函数，render的返回值是VNode，VNode是Vue的虚拟DOM节点，里面有（标签名、子节点、文本等等）

12、 分别简述computed和watch的区别

区别一：
watch 可以允许你没有返回值，对数据做一些处理，
但是computed必须要有返回值，他才能根据返回值，知道你函数依赖的是谁，当哪个数据改变的时候，触发该方法。
区别二：
computed可以函数依赖很多值，但是watch只能依赖一个值。

13、 vue组件中data为什么必须是一个函数

如果data是一个函数的话，这样每复用一次组件，就会返回一份新的data，类似于给每个组件实例创建一个私有的数据空间，让各个组件实例维护各自的数据。而单纯的写成对象形式，就使得所有组件实例共用了一份data，就会造成一个变了全都会变的结果。

所以说vue组件的data必须是函数。这都是因为js的特性带来的，跟vue本身设计无关。

14、Vue声明组件的state是用data方法，那为什么data是通过一个function来返回一个对象，而不是直接写一个对象呢？

答：从语法上说，如果不用function返回就会出现语法错误导致编译不通过。从原理上的话，大概就是组件可以被多次创建，如果不使用function就会使所有调用该组件的页面公用同一个数据域，这样就失去了组件的概念了

15、vue中mixin与extend区别？

全局注册混合对象，会影响到所有之后创建的vue实例，而Vue.extend是对单个实例进行扩展。

mixin 混合对象（组件复用）

同名钩子函数（bind，inserted，update，componentUpdate，unbind）将混合为一个数组，因此都将被调用，混合对象的钩子将在组件自身钩子之前调用

methods，components，directives将被混为同一个对象。两个对象的键名（方法名，属性名）冲突时，取组件（而非mixin）对象的键值对

16、vue常用的修饰符

.stop:等统一JavaScript中的event.stopPropagation(),防止事件冒泡
.prevent:等同于JavaScript中的event。preventDefault(),防止执行预设的行为(如果事件可取消，则取消该事件，而不停止事件的进一步传播)；
.capture:与事件冒泡的方向相反，事件捕获由外到内
.self:只会触发自己范围内的事件，不包含子元素；
.once:只会触发一次。

17、自定义指令（v-check、v-focus）的方法有哪些？它有哪些钩子函数？还有哪些钩子函数参数？

全局定义指令：在vue对象的directive方法里面有两个参数，一个是指令名称，另外一个是函数。组件内定义指令：directives

钩子函数：bind（绑定事件触发）、inserted(节点插入的时候触发)、update（组件内相关更新）

钩子函数参数：el、binding

18、vue的两个核心点

数据驱动，组件系统
数据驱动：ViewModel，保证数据和视图的一致性
组件系统：应用类UI可以看做全部是由组件树构成的

19、delete和Vue.delete删除数组的区别

delete知识被删除的元素变成了empty/undefined其他的元素的键值还是不变。Vue.delete直接删除了数组 改变了数组的键值。

20、Vue-router跳转和location.href有什么区别

使用location.href=/url 来跳转，简单方便，但是刷新了页面；使用history.pushState(/url),无刷新页面，静态跳转；引进router，然后使用router.push(/url)来跳转，使用了diff算法，实现了按需加载，减少了dom的消耗。其实使用router跳转和使用
history.pushState()没什么差别，因为vue-router就是用了history.pushState(),尤其是在history模式下。

21、RouterLink在IE和Firefox中不起作用（路由不跳转）的问题

方法一
只用a标签，不使用button标签
方法二
使用button标签和Router.navigate方法

22、请说下封装 vue 组件的过程？

首先，组件可以提升整个项目的开发效率。能够把页面抽象成多个相对独立的模块，解决了我们传统项目开发：效率低、难维护、复用性等问题。

然后，使用Vue.extend方法创建一个组件，然后使用Vue.component方法注册组件。子组件需要数据，可以在props中接受定义。而子组件修改好数据后，想把数据传递给父组件。可以采用emit方法。

23、params和query的区别

用法：query要用path来引入，params要用name来引入，接收参数都是类似的，分别是this. $router.query.name 和 this. $router.params.name。url地址显示：query更加类似于我们ajax中get传参，params则类似于post，说的再简单一点，前者在浏览器地址栏中显示参数，后者则不显示
注意点：query刷新不会丢失query里面的数据params刷新会丢失params里面的数据

24、 vue mock数据

在项目中尝试了mockjs，mock数据，实现前后端分离开发。

关于mockjs，官网描述的是

• 1.前后端分离

• 2.不需要修改既有代码，就可以拦截 Ajax 请求，返回模拟的响应数据。

• 3.数据类型丰富

• 4.通过随机数据，模拟各种场景。

等等优点。

总结：在后端接口没有开发完成之前，前端可以用已有的接口文档，在真实的请求上拦截ajax，并根据mockjs的mock数据的规则，模拟真实接口返回的数据，并将随机的模拟数据返回参与相应的数据交互处理，这样真正实现了前后台的分离开发。

与以往的自己模拟的假数据不同，mockjs可以带给我们的是：在后台接口未开发完成之前模拟数据，并返回，完成前台的交互；在后台数据完成之后，你所做的只是去掉mockjs：停止拦截真实的ajax，仅此而已。

25、vue初始化页面闪动问题

使用vue开发时，在vue初始化之前，由于div是不会vue管的，所以我们写的代码在还没有解析的情况下会容易出现花屏现象，看到类似于{{message}}的字样，虽然一般情况下这个时间很短暂，但是我们还是有必要解决这个问题的。
首先：在css里加上[v-cloak]{display:none;}，如果没有彻底解决问题，则在根元素加上style=“display:none;” :style="{display:block}"

26、vue更新数组时触发视图更新的方法

push();pop();shift();unshift();splice();sort();reverse()

27、vue常用的UI组件库

Mint UI，element，VUX

28、scss是什么？在vue.cli中的安装使用步骤是？有哪几大特性？

css的预编译。

使用步骤：

第一步：用npm 下三个loader（sass-loader、css-loader、node-sass）

第二步：在build目录找到webpack.base.config.js，在那个extends属性中加一个拓展.scss

第三步：还是在同一个文件，配置一个module属性

第四步：然后在组件的style标签加上lang属性 ，例如：lang=”scss”

有哪几大特性:

1、可以用变量，例如（$变量名称=值）；

2、可以用混合器，例如（）

3、可以嵌套

29、mint-ui是什么？怎么使用？说出至少三个组件使用方法？

答：基于vue的前端组件库。

npm安装，然后import样式和js，vue.use（mintUi）全局引入。在单个组件局部引入：import {Toast} from ‘mint-ui’。

组件一：Toast(‘登录成功’)；
组件二：mint-header；
组件三：mint-swiper

30、Vue里面router-link在电脑上有用，在安卓上没反应怎么解决？

Vue路由在Android机上有问题，babel问题，安装babel polypill插件解决

31、Vue2中注册在router-link上事件无效解决方法

使用@click.native。原因：router-link会阻止click事件，.native指直接监听一个原生事件。