Vue面试题

一、Vue框架相关知识

1.Vue的双向数据绑定原理是什么？（了解会叙述）

vue.js 是采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调。

2.什么是 MVVM？（了解会叙述）

MVVM 是Model-View-ModelView的缩写，是一种脱胎于 MVC 模式的设计模式。

Model 代表数据层，负责存放业务相关的数据；

View 代表视图层，负责在页面上展示数据；

ViewModel 是的作用是同步 View 和 Model 之间的关联，其实现同步关联的核心是DOM Listeners和 Data Bindings两个工具。DOMListeners 工具用于监听 View 中 DOM 的变化，并会选择性的传给 Model；

Data Bindings 工具用于监听 Model 数据变化，并将其更新给 View。

3.mvvm和mvc区别？它和其它框架（jquery）的区别是什么？哪些场景适合？（了解会叙述）

mvc和mvvm都是一种设计思想。

主要就是mvc中Controller演变成mvvm中的viewModel。

mvvm主要解决了mvc中大量的DOM 操作使页面渲染性能降低，加载速度变慢，影响用户体验。

区别：vue数据驱动，通过数据来显示视图层而不是像Jquery等的节点操作。

场景：数据操作比较多的场景，更加便捷

4.在Vue中使用插件的步骤（了解会叙述）

采用ES6的import … from …语法或CommonJS的require()方法引入插件
使用全局方法Vue.use( plugin )使用插件,可以传入一个选项对象Vue.use(MyPlugin, { someOption: true })

5. vue-loader是什么？使用它的用途有哪些？（了解会叙述）

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

6.说说你对 SPA 单页面的理解，它的优缺点分别是什么？（了解会叙述）

SPA（ single-page application ）仅在 Web 页面初始化时加载相应的 HTML、JavaScript 和 CSS。一旦页面加载完成，SPA 不会因为用户的操作而进行页面的重新加载或跳转；取而代之的是利用路由机制实现 HTML 内容的变换，UI 与用户的交互，避免页面的重新加载。

优点：

l 用户体验好、快，内容的改变不需要重新加载整个页面，避免了不必要的跳转和重复渲染；

l 基于上面一点，SPA 相对对服务器压力小；

l 前后端职责分离，架构清晰，前端进行交互逻辑，后端负责数据处理；

缺点：

l 初次加载耗时多：为实现单页 Web 应用功能及显示效果，需要在加载页面的时候将 JavaScript、CSS 统一加载，部分页面按需加载；

l 前进后退路由管理：由于单页应用在一个页面中显示所有的内容，所以不能使用浏览器的前进后退功能，所有的页面切换需要自己建立堆栈管理；

l SEO (搜索引擎优化)难度较大：由于所有的内容都在一个页面中动态替换显示，所以在 SEO 上其有着天然的弱势。

二、Vue基础

1.请问v-if和v-show有什么区别（理解会用）

相同点：两者都是在判断DOM节点是否要显示。

不同点：

v-show指令是通过修改元素的display的CSS属性让其显示或者隐藏
v-if指令是直接销毁和重建DOM达到让元素显示和隐藏的效果

v-if有更高的切换消耗，不适合做频繁的切换；

v-show有更高的初始渲染消耗，适合做频繁的切换

2. vue中 key 值的作用（理解会用）

使用key来给每个节点做一个唯一标识 key的作用主要是为了高效的更新虚拟DOM。

另外vue中在使用相同标签名元素的过渡切换时，也会使用到key属性，其目的也是为了让vue可以区分它们，否则vue只会替换其内部属性而不会触发过渡效果。

3.为什么避免 v-if 和 v-for 用在一起（理解）

当 Vue 处理指令时，v-for 比 v-if 具有更高的优先级，通过v-if 移动到容器元素，不会再重复遍历列表中的每个值。

取而代之的是，我们只检查它一次，且不会在 v-if 为否的时候运算 v-for。

4. Vue 中 computed 和 watch 有什么区别？（理解会用）

计算属性 computed：

支持缓存，只有依赖数据发生变化时，才会重新进行计算函数；

计算属性内不支持异步操作；

计算属性的函数中都有一个 get(默认具有，获取计算属性)和 set(手动添加，设置计算属性)方法；

计算属性是自动监听依赖值的变化，从而动态返回内容。

侦听属性 watch：

不支持缓存，只要数据发生变化，就会执行侦听函数；

侦听属性内支持异步操作；

侦听属性的值可以是一个对象，接收 handler 回调，deep，immediate 三个属性；

监听是一个过程，在监听的值变化时，可以触发一个回调，并做一些其他事情。

5. 怎么解决vue的闪动问题（理解会用）

在使用vue的插值表达式时，由于代码需要经过vue解析展现到界面，当网络有延迟时，页面会显示源代码。

解决方式：

在 css 代码中添加 v-cloak 规则，同时在待编译的标签上添加 v-cloak 属性。

[v-cloak] { display: none; }

{{ message }}

6. v-model如何实现双向绑定（理解）

v-model双向绑原理是利用v-bind来绑定value的值，用v-on去绑定input标准事件监听输入域的内容，当内容变化时，通过$event这个事件对象获取到最新的输入域的值，然后把最新的值赋值给旧的值，从而进行数据的更新。

7.vue组件style中的scoped属性的作用（理解会用）

功能作用：

实现组件的私有化，不对全局造成样式污染，表示当前style属性只属于当前模块。

实现原理：

vue在DOM结构以及css样式上加上唯一的标记，保证唯一性来达到样式私有化，来保证不会被污染全局的作用

8. Vue中过滤器是什么？怎么自定义全局过滤器？（理解会用）

过滤器是一个通过输入数据，能够及时对数据进行处理并返回一个数据结果的简单函数。

Vue有很多很便利的过滤器，过滤器通常会使用管道标志 “ | ”。

定义一个全局的自定义过滤器，需要使用Vue.filter()构造器。

例：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-enrZUKft-1622020926095)(file:///D:/Temp/msohtmlclip1/01/clip_image001.png)]

9. 在什么阶段才能访问操作DOM？（理解）

在钩子函数 mounted 被调用前，Vue 已经将编译好的模板挂载到页面上，所以在 mounted 中可以访问操作 DOM。

10. 常用的事件修饰符有哪些？（理解会用）

.stop：阻止冒泡；

.prevent：阻止默认行为；

.self：仅绑定元素自身可触发；

.once：只触发一次…

11.vue-router中怎么实现懒加载？（理解会用）

例：component: () => import(’@/page/Vuex/index’)

12. vue如何监听键盘事件中的按键？（理解会用）

13. vue如何自定义指令？（理解会用）

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-KcQx46wX-1622020926098)(file:///D:/Temp/msohtmlclip1/01/clip_image003.jpg)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-PVhOEY4K-1622020926102)(file:///D:/Temp/msohtmlclip1/01/clip_image005.jpg)]

三、component组件

1. 组件之间的传值？（理解会用）

①父组件与子组件传值

父组件通过标签上面v-bind:定义传值
子组件通过props方法接受数据

②子组件向父组件传递数据 子组件通过$emit方法发送事件并传递参数

父组件在标签上v-on:监听子组件在$emit中定义的事件

③兄弟组件之间传值

（1）通过VueX共享数据实现兄弟组件之间传值

（2）创建一个空的vue实例作为事件中心，然后挂载到当前的vue实例的原型上,然后另一个组件进行emit 传递事件以及需要传递的数据 。

2.在Vue 组件中 data 为什么必须是函数? （理解）

在 new Vue() 中， data 是可以作为一个对象进行操作的，然而在 component 中， data 只能以函数的形式存在，不能直接将对象赋值给它。

四、Vue-router路由

1. 路由之间跳转的方式有哪些？分别是什么？（理解会用）

①声明式导航：通过点击链接实现导航的方式，叫做声明式导航

例如：普通网页中的 链接 或 vue 中的

②编程式导航：通过调用JavaScript形式的API实现导航的方式，叫做编程式导航

例如：普通网页中的 location.href

2.Vue-router 路由有哪些模式？有什么区别？（理解）

一般有两种模式：

hash 模式：后面的 hash 值的变化，浏览器既不会向服务器发出请求，浏览器也不会刷新，每次 hash 值的变化会触发 hashchange 事件。

history模式：利用HTML5中新增的pushState() 和 replaceState() 方法。

这两个方法应用于浏览器的历史记录栈，在当前已有的 back、forward、go 的基础之上，它们提供了对历史记录进行修改的功能。只是当它们执行修改时，虽然改变了当前的 URL，但浏览器不会立即向后端发送请求。

3.vue-router传递参数的几种方式有哪些？如何使用？（理解会用）

①使用声明式导航router-link中的to来传递

参数绑定：

在hellovue.vue中接收参数：

传递的名字是：{{$route.params.username}}

②采用url传参

在路由文件里采用冒号的形式传参，这就是对参数的绑定

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-AkgomU4c-1622020926130)(file:///D:/Temp/msohtmlclip1/01/clip_image007.jpg)]

接收参数:

直接通过this.$route.params.xx接收参数，或者在router中设置props: true，在当前页面通过props接收参数。

5. vue-router如何定义嵌套路由？（理解会用）

	[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Yg6V0qmb-1622020926642)(file:///D:/Temp/msohtmlclip1/01/clip_image009.jpg)]

五、VueX状态管理模式

1.什么是vuex？（理解会叙述）

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，用来集中管理数据。

2.vuex有哪几种属性？（理解会用）

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

modulestate => 基本数据(data)

getters => 从基本数据派生的数据 ，和组件中的computed很相似

mutations => 提交更改数据的方法，同步！

actions => 像一个装饰器，包裹mutations，使之可以异步。

modules => 模块化Vuex

3. vuex 的 store 特性是什么？（理解会叙述）

①vuex 就是一个仓库，仓库里放了很多对象。其中 state 就是数据源存放地，对应于一般 vue 对象里面的 data

②state 里面存放的数据是响应式的，vue 组件从 store 读取数据，若是 store 中的数据发生改变，依赖这相数据的组件也会发生更新

③它通过 mapState 把全局的 state 和 getters 映射到当前组件的 computed 计算属性

4.vuex 的 getter 特性是什么？（理解会叙述）

①getter 可以对 state 进行计算操作，它就是 store 的计算属性

②虽然在组件内也可以做计算属性，但是 getters 可以在多组件之间复用

③如果一个状态只在一个组件内使用，是可以不用 getters

5. vuex 的 mutation 特性是什么？（理解会叙述）

action 类似于 muation, 不同在于：

①action 提交的是 mutation,而不是直接变更状态

②action 可以包含任意异步操作

6. vue 中 ajax 请求代码应该写在组件的methods中还是vuex 的action中？（理解会叙述）

①如果请求来的数据不是要被其他组件公用，仅仅在请求的组件内使用，就不需要放入 vuex 的 state 里;

②如果被其他地方复用，请将请求放入 action 里，方便复用，并包装成 promise 返回。

7. 不用 vuex 会带来什么问题？（理解会叙述）

可维护性会下降，想修改数据要维护三个地方；
可读性会下降，因为一个组件里的数据，根本就看不出来是从哪来的；
增加耦合，大量的上传派发，会让耦合性大大增加，本来Vue用Component就是为了减少耦合，现在这么用，和组件化的初衷相背。

六、Vue生命周期

1.什么是vue生命周期？（了解会叙述）

Vue 实例从创建到销毁的过程，就是生命周期。也就是从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、卸载等一系列过程，我们称这是 Vue 的生命周期。

2. vue生命周期的作用是什么？（了解会叙述）

它的生命周期中有多个事件钩子，让我们在控制整个Vue实例的过程时更容易形成好的逻辑。

3.生命周期钩子函数有哪些？（理解会用）

①生命周期是VUE实例化或者组件创建到消亡的过程。

②beforeCreate 创建前的状态，初始化事件和生命周期。

③create创建完毕状态Init (初始化) injections (依赖注入) & reactivity (开始响应)。

④beforeMount 挂载前状态，是否有元素el，是否有模板，是否渲染到了函数内，是否作为模板进行了outerHTML渲染到了页面，向虚拟DOM上挂载的过程，并且还是把我们的‘#app’生成虚拟DOM，生成完毕后并渲染到view层。

⑤mounted 挂载结束状态，渲染到真正的DOM。

⑥beforeUpdate可以拿到Vue实例化改变前的状态。

⑦Updated拿到变动完成的状态。

⑧beforeDestroy消亡前的状态。

⑨destroyed实例化或组件被摧毁消亡

4. 第一次页面加载会触发哪几个钩子？（理解）

第一次页面加载时会触发 beforeCreate, created, beforeMount, mounted 这几个钩子。

七、vue-cli工程化

1.构建的 vue-cli 工程都到了哪些技术，它们的作用分别是什么？（理解会叙述）

(1) vue.js：vue-cli工程的核心，主要特点是双向数据绑定和组件系统。

(2) vue-router：vue官方推荐使用的路由框架。

(3) vuex：专为 Vue.js 应用项目开发的状态管理器，主要用于维护vue组件间共用的一些变量和方法。

(4) axios（或者 fetch 、ajax ）：用于发起 GET 、或 POST 等 http请求，基于 Promise 设计。

(5) vant等：一个专为vue设计的移动端常用UI组件库。

(6) 创建一个emit.js文件，用于vue事件机制的管理。

(7) webpack：模块加载和vue-cli工程打包器。

2. vue-cli 工程常用的 npm 命令有哪些？（理解会用）

下载 node_modules 资源包的命令：npm install XX

启动 vue-cli 开发环境的 npm命令：npm run serve

vue-cli 生成生产环境部署资源的 npm命令：npm run build

用于查看 vue-cli 生产环境部署资源文件大小的 npm命令：npm run build --report

3. 请说出vue-cli工程中每个文件夹和文件的用处（了解会叙述）

vue-cli目录解析：

(1) build 文件夹：用于存放 webpack 相关配置和脚本。开发中仅偶尔使用到此文件夹下webpack.base.conf.js 用于配置 less、sass等css预编译库，或者配置一下 UI 库。

(2) config 文件夹：主要存放配置文件，用于区分开发环境、线上环境的不同。常用到此文件夹下config.js 配置开发环境的端口号、是否开启热加载或者设置生产环境的静态资源相对路径、是否开启gzip压缩、npm run build 命令打包生成静态资源的名称和路径等。

(3) dist 文件夹：默认 npm run build 命令打包生成的静态资源文件，用于生产部署。

(4) node_modules：存放npm命令下载的开发环境和生产环境的依赖包。

(5) src: 存放项目源码及需要引用的资源文件。(

1. src下assets：存放项目中需要用到的资源文件，css、js、images等。

(7) src下componets：存放vue开发中一些公共组件：header.vue、footer.vue等。

(8) src下emit：自己配置的vue集中式事件管理机制。

(9) src下router：vue-router vue路由的配置文件。

(10) src下service：自己配置的vue请求后台接口方法。

(11) src下page：存放vue页面组件的文件夹。

(12) src下util：存放vue开发过程中一些公共的.js方法。

(13) src下vuex：存放 vuex 为vue专门开发的状态管理器。

(14) src下app.vue：使用标签渲染整个工程的.vue组件。

(15) src下main.js：vue-cli工程的入口文件。

(16) index.html：设置项目的一些meta头信息和提供

用于挂载 vue 节点。

(17) package.json：用于 node_modules资源部和启动、打包项目的 npm 命令管理。

4.请你详细介绍一些 package.json 里面的配置? （理解会叙述）

(1) scripts：npm run xxx 命令调用node执行的 .js 文件

(2) dependencies：生产环境依赖包的名称和版本号，即这些依赖包都会打包进生产环境的JS文件里面

的配置文件。

(10) src下service：自己配置的vue请求后台接口方法。

(11) src下page：存放vue页面组件的文件夹。

(12) src下util：存放vue开发过程中一些公共的.js方法。

(13) src下vuex：存放 vuex 为vue专门开发的状态管理器。

(14) src下app.vue：使用标签渲染整个工程的.vue组件。

(15) src下main.js：vue-cli工程的入口文件。

(16) index.html：设置项目的一些meta头信息和提供

用于挂载 vue 节点。

(17) package.json：用于 node_modules资源部和启动、打包项目的 npm 命令管理。

4.请你详细介绍一些 package.json 里面的配置? （理解会叙述）

(1) scripts：npm run xxx 命令调用node执行的 .js 文件

(2) dependencies：生产环境依赖包的名称和版本号，即这些依赖包都会打包进生产环境的JS文件里面

(3) devDependencies：开发环境依赖包的名称和版本号，即这些依赖包只用于代码开发的时候，不会打包进生产环境js文件里面。