Vue高频面试题--面试必备（背）

作为全栈开发的我，不只是会Java哦，react和vue等热门前端框架我在项目中也是经常用到哦，今天来一些高频vue面试题，都是精华中的精华哦，如果你要面试前端，一定要背背哦。说不定你的面试老师也是用的这一套题哦。vue的知识体系还是很庞大的，以下是vue的知识体系，不妨验证一下你都学了哪些了？

为大家精心准备了vue课程，微信搜索关注公众号：【zhulin1028】，或者扫描以下二维码，回复【vue课程】即可免费获取。

目录

1、 Vue的双向数据绑定原理是什么？

2、请详细说下你对vue生命周期的理解？

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

4、怎么定义vue-router的动态路由？怎么获取传过来的动态参数？

5、vue-router有哪几种导航钩子？

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

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

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

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

10、vue.cli中怎样使用自定义的组件？有遇到过哪些问题吗？

11、说下你对mvvm的理解？双向绑定的理解？

12、请说下具体使用vue的理解？

13、你是怎么认识vuex的？

14、vuex有哪几种属性？

15、vuex的State特性是？

16、vuex的Getter特性是？

17、vuex的Mutation特性是？

18、的作用是什么？

19、vue中ref的作用是什么？

20、vue中组件直接的通信是如何实现的？

21.    vue-cli 工程中常用的 npm 命令有哪些？

22.    vue-router 路由的两种模式。

23.    Vue 打包命令是什么？Vue 打包后会生成哪些文件？

24.    Vue 如何优化首屏加载速度？

---

1、 Vue的双向数据绑定原理是什么？

vue.js 是采用数据劫持结合发布者-订阅者模式的方式，通过 Object.defineProperty()来劫持各个属性的 setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调。 具体步骤： 第一步：需要
observe 的数据对象进行递归遍历，包括子属性对象的属性，都加上 setter 和 getter，这样的 话，给这个对象的某个值赋值，就会触发 setter，那么就能监听到了数据变化。 第二步：compile 解析模板指令，将模板中的变量替换成数据，然后初始化渲染页面视图，并将每个指令对 应的节点绑定更新函数， 添加监听数据的订阅者，一旦数据有变动，收到通知，更新视图。 第三步：Watcher 订阅者是
Observer 和 Compile 之间通信的桥梁，主要做的事情是:1、在自身实例化时往属 性订阅器(dep)里面添加自己 2、自身必须有一个 update()方法 3、待属性变动 dep.notice()通知时，能调用自身的update()方法，并触发 Compile 中绑定的回调，则功成身退。 第四步：MVVM 作为数据绑定的入口， 整合 Observer、Compile 和 Watcher 三者，通过 Observer 来监听自己 的 model 数据变化，通过Compile 来解析编译模板指令，最终利用 Watcher 搭起 Observer 和 Compile 之间的通信 桥梁，达到数据变化 -> 视图更新；视图交互变化(input)-> 数据 model 变更的双向绑定效果。

2、请详细说下你对vue生命周期的理解？

总共分为            8            个阶段创建前/后，载入前/后，更新前/后，销毁前/后。创建前/后： 1、在 beforeCreated 阶段，vue 实例的挂载元素$el 和数据对象 data 都为 undefined，还未初始化。2、在 created 阶段，vue 实例的数据对象 data 有了，$el 还没有。
3、载入前/后：在 beforeMount 阶段，vue 实例的$el 和 data 都初始化了，但还是挂载之前为虚拟的
dom 节 点，data.message 还未替换。
4、在 mounted 阶段，vue 实例挂载完成，data.message 成功渲染。
5、更新前/后：当 data 变化时，会触发 beforeUpdate 和 updated 方法。
6、销毁前/后：在执行 destroy 方法后，对 data 的改变不会再触发周期函数，说明此时 vue 实例已经解除了 事件监听以及和 dom 的绑定，但是 dom 结构依然存在

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

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

4、怎么定义vue-router的动态路由？怎么获取传过来的动态参数？

在 router 目录下的 index.js 文件中，对 path 属性加上/:id。 使用 router 对象的 params.id

5、vue-router有哪几种导航钩子？

1、全局导航钩子：router.beforeEach(to,from,next)，作用：跳转前进行判断拦截。
2、组件内的钩子；
3、单独路由独享组件

6、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、可以嵌套

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

基于 vue 的前端组件库。npm 安装，然后 import 样式和 js， vue.use（mintUi）全局引入。 在单个组件局部引入：import{Toast}from‘mint-ui’。  组件一：Toast(‘登录成功’)；  组件二：mint-header；   组件三：mint-swiper

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

首先，组件可以提升整个项目的开发效率。能够把页面抽象成多个相对独立的模块，解决了我们传统项  目开 发：效率低、难维护、复用性等问题。 然后，使用 Vue.extend 方法创建一个组件，然后使用
Vue.component 方法注册组件。子组件需要数据，可以 在 props 中接受定义。而子组件修改好数据后，想把数据传递给父组件。可以采用 emit 方法

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

解析.vue 文件的一个加载器，跟 template/js/style 转换成 js 模块。 用途：js 可以写 es6、style 样式可以 scss 或 less、template 可以加 jade 等

10、vue.cli中怎样使用自定义的组件？有遇到过哪些问题吗？

第一步：在 components 目录新建你的组件文件（smithButton.vue），script 一定要 exportdefault
第二步：在需要用的页面（组件）中导入：
importsmithButtonfrom‘../components/smithButton.vue’
第三步：注入到 vue 的子组件的 components 属性上面,components:{smithButton} 第四步：在 template 视图 view 中使用，
问题有：smithButton 命名，使用的时候则 smith-button。

11、说下你对mvvm的理解？双向绑定的理解？

mvvm 就是 vm 框架视图、m 模型就是用来定义驱动的数据、v 经过数据改变后的 html、vm 就是用来实现双 向绑定
双向绑定:一个变了另外一个跟着变了，例如：视图一个绑定了模型的节点有变化，模型对应的值会跟着  变

12、请说下具体使用vue的理解？

1、使用 vue 不必担心布局更改和类名重复导致的 js 重写，因为它是靠数据驱动双向绑定，底层是通过
Object.defineProperty() 定义的数据 set、get 函数原理实现。
2、组件化开发，让项目的可拓展性、移植性更好，代码重用性更高，就好像农民工建房子，拿起自己  的工 具包就可以开工。项目经理坐等收楼就好。
3、单页应用的体验零距离接触安卓原生应用，局部组件更新界面，让用户体验更快速省时。
4、js 的代码无形的规范，团队合作开发代码可阅读性更高。

13、你是怎么认识vuex的？

1、vuex 可以理解为一种开发模式或框架。比如 PHP 有 thinkphp，java 有 spring 等。
2、通过状态（数据源）集中管理驱动组件的变化（好比 spring 的 IOC 容器对 bean 进行集中管理）。
3、应用级的状态集中放在 store 中； 改变状态的方式是提交 mutations，这是个同步的事物； 异步逻辑 应该封装在 action 中。

14、vuex有哪几种属性？

有五种，分别是 State、 Getter、Mutation 、Action、 Module

15、vuex的State特性是？

1、Vuex 就是一个仓库，仓库里面放了很多对象。其中 state 就是数据源存放地，对应于与一般 Vue 对象 里面的 data。
2、state 里面存放的数据是响应式的，Vue 组件从 store 中读取数据，若是 store 中的数据发生改变， 依赖 这个数据的组件也会发生更新。
3、它通过 mapState 把全局的 state 和 getters 映射到当前组件的 computed 计算属性中。

16、vuex的Getter特性是？

1、getters 可以对 State 进行计算操作，它就是 Store 的计算属性 2、 虽然在组件内也可以做计算属性，但是 getters 可以在多组件之间复用
3、 如果一个状态只在一个组件内使用，是可以不用 getters

17、vuex的Mutation特性是？

1、Action 类似于 mutation，不同在于：
2、Action 提交的是 mutation，而不是直接变更状态。
3、Action 可以包含任意异步操作

18、的作用是什么？

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

19、vue中ref的作用是什么？

ref 被用来给 DOM 元素或子组件注册引用信息。引用信息会根据父组件的 $refs 对象进行注册。如果在普 通的 DOM 元素上使用，引用信息就是元素; 如果用在子组件上，引用信息就是组件实例 注意：只要想要在 Vue 中直接操作 DOM 元素，就必须用 ref 属性进行注册

20、vue中组件直接的通信是如何实现的？

组件关系可分为父子组件通信、兄弟组件通信。
1、父组件向子组件： 通过 props 属性来实现
2、子组件向父组件： 子组件用    （ ） 来 触 发 事 件 ， 父 组 件 用on（）来监昕子组件的事件。 父组件可以直接在子组件的自定义标签上使用 v-on 来监昕子组件触发的自定义事件。
3、兄弟之间的通信： 通过实例一个 vue 实例 Bus 作为媒介，要相互通信的兄弟组件之中都引入 Bus， 之后通过分别调用 Bus 事件触发和监听来实现组件之间的通信和参数传递。

21.    vue-cli 工程中常用的 npm 命令有哪些？

npm install：下载 node_modules 资源包的命令
npm run dev：启动 vue-cli 开发环境的 npm 命令
npm run build：vue-cli 生成生产环境部署资源的 npm 命令

22.    vue-router 路由的两种模式。

hash 模式：
后面的 hash 值的变化，并不会导致浏览器向服务器发出请求，浏览器不发出请求，也就不会刷新浏览器，每次 hash 值的变化会触发 hashchange 事件。
history 模式：
利用了 HTML5 中新增的 pushState() 和 replaceState() 方法。这两个方法应用于浏览器的历史记录栈，在当前已有的  back、forward、go  的基础之上，它们提供了对历史记录进行修改的功能。只是当它们执行修改时，虽然改变了当前的 URL，但浏览器不会立即向后端发送请求。

23.    Vue 打包命令是什么？Vue 打包后会生成哪些文件？

npm run build ：Vue 打包命令
Vue 打包后会在当前工作目录下生成一个 dist 文件夹，文件夹中会有 static 静态文件以及
index.html 初始页面。

24.    Vue 如何优化首屏加载速度？

异步路由加载不打包库文件
关闭 sourcemap
开启 gzip 压缩