VUE常见的面试题

请说一下 vue.extend 的理解

使用 Vue 构造器，创建一个子类，参数是一个组件对象,注意 data 必须是一个函数
Vue.extend()返回的是一个扩展实例构造器，简单的来说就是一个预设了部分选项的 Vue 的实例。主要用来服务 Vue.component,用来生成组件

002、请说下你对 Vue.use 的理解

安装 Vue.js 插件。如果插件是一个对象，必须提供 install 方法。如果插件是一个函数，它会被作为 install 方法。 install 方法调用时，会将 Vue 作为参数传入。
该方法需要在调用 new Vue() 之前被调用。

003、如何解决路由与跨域之间的冲突

统一规范为一个入口，在一定程度上会解决冲突或者在 axios 中配置 baseUrl

004、如何给一个响应式对象中添加一个属性？如何删除响应式对象中的属性?

import Vue from “vue”; new Vue({ data:{ obj:{ } } }) Vue.set(obj,name,“zhangsan”) Vue.delete(obj,“name”

005、vue 响应式原理

工作原理是当我们把一个普通的 JavaScript 对象传给 Vue 实例的 data 选项的时候，Vue 会遍历此对象的所有属性，并 使用 Object.definePropert 把这些属性全部转化为 getter/setter。

(Object.definePropert 是仅 ES5 支持，且没有垫片脚本的特性，因此 Vue 不支持 IE8 及更低版本浏览器。）用户看不到 getter/setter，但是在内部它们让 Vue 追踪依赖，在属性被访问和修改时通知变化。

import Vue from “vue”; new Vue({ data:{ obj:{ } } }) Vue.set(obj,name,“zhangsan”) Vue.delete(obj,“name”)
每个组件实例都有相应的 watcher 实例对象，它会在组件渲染的过程中把属性记录为依赖，之后当依赖项的 setter 被调 用时，会通知 watcher 重新计算，从而使它关联的组件得以更新。

006、vue-router 实现的原理

单页面应用(SPA)的核心之一是: 更新视图而不重新请求页面,
实现这一点主要是两种方式:
1.Hash: 通过改变 hash 值
2.History: 利用 history 对象新特性（详情可出门左拐见: http://www.cnblogs.com/yanze/p/7641774.html）

007、简单描述每个周期具体适合哪些场景

beforecreate : 可以在这加个 loading 事件，在加载实例时触发
created : 初始化完成时的事件写在这里，如在这结束 loading 事件，异步请求也适宜在这里调用
mounted : 挂载元素，获取到 DOM 节点
updated : 如果对数据统一处理，在这里写上相应函数
beforeDestroy : 可以做一个确认停止事件的确认框
nextTick : 更新数据后立即操作 dom

008、你对 Vue.js 的 template 编译的理解

先转化成 AST 树，再得到的 render 函数返回 VNode
首先，通过 compile 编译器把 template 编译成 AST 语法树（abstract syntax tree 即 源代码的抽象语法结构的树状表现 形式），compile 是 createCompiler 的返回值，createCompiler 是用以创建编译器的。另外 compile 还负责合并 option。
然后，AST 会经过 generate（将 AST 语法树转化成 render funtion 字符串的过程）得到 render 函数，render 的返回值是 VNode，VNode 是 Vue 的虚拟 DOM 节点，里面有（标签名、子节点、文本等等）

009、前端路由和后端路由的区别

路由: 路由是根据不同的 url 地址展示不同的内容或页面

前端路由：
前端路由很重要的一点是页面不刷新，前端路由就是把不同路由对应不同的内容或页面的任务交给前端来做，每跳转 到不同的 URL 都是使用前端的锚点路由. 随着（SPA）单页应用的不断普及，前后端开发分离，目前项目基本都使用 前端路由，在项目使用期间页面不会重新加载 。hash 有一个特点：http 请求中不会包含 hash 相关的内容；所以，单 页面程序中的页面跳转主要用 hash 实现；

后端路由：
通过用户请求的 url 导航到具体的 html 页面；每跳转到不同的 URL，都是重新访问服务端，然后服务端返回页面，页 面也可以是服务端获取数据，然后和模板组合，返回 HTML，也可以是直接返回模板 HTML，然后由前端 js 再去请求 数据，使用前端模板和数据进行组合，生成想要的 HTML

对比： 1.从性能和用户体验的层面来比较的话，后端路由每次访问一个新页面的时候都要向服务器发送请求，然后服务器再 响应请求，这个过程肯定会有延迟。而前端路由在访问一个新页面的时候仅仅是变换了一下路径而已，没有了网络延 迟，对于用户体验来说会有相当大的提升。 2.在某些场合中，用 ajax 请求，可以让页面无刷新，页面变了 但 Url 没有变化，用户就不能复制到想要的地址，用前端路由做单页面网页就很好的解决了这个问题。但是前端路由 使用浏览器的前进，后退键的时候会重新发送请求，没有合理地利用缓存。

010、前端渲染和后端渲染的优缺点

前端渲染：
定义：
指的是后端返回 JSON 数据，前端利用预先写的 html 模板，循环读取 JSON 数据，拼接字符串，并插入页面。

好处: 1、前后端分离。前端专注于前端 UI，后端专注于 api 开发，且前端有更多的选择性，而不需要遵循后端特定的模板。
2、体验更好。比如，我们将网站做成 SPA 或者部分内容做成 SPA，这样，尤其是移动端，可以使体验更接近于原生 app。

坏处：
1、前端响应较慢。如果是客户端渲染，前端还要进行拼接字符串的过程，需要耗费额外的时间，不如服务器端渲染 速度快。
2、不利于 SEO。目前比如百度、谷歌的爬虫对于 SPA 都是不认的，只是记录了一个页面，所以 SEO 很差。因为服务 器端可能没有保存完整的 html，而是前端通过 js 进行 dom 的拼接，那么爬虫无法爬取信息。 除非搜索引擎的 seo 可以 增加对于 JavaScript 的爬取能力，这才能保证 seo。

服务端渲染:
定义：
前端请求，后端用后台模板引擎直接生成 html，前端接受到数据之后，直接插入页面。

好处：
1、前端耗时少，即减少了首屏时间
2、有利于 SEO。因为在后端有完整的 html 页面，所以爬虫更容易爬取获得信息，更有利于 seo。

3、无需占用客户端资源。即解析模板的工作完全交由后端来做，客户端只要解析标准的 html 页面即可，这样对于客 户端的资源占用更少，尤其是移动端，也可以更省电。
4、后端生成静态化文件。即生成缓存片段，这样就可以减少数据库查询浪费的时间了，且对于数据变化不大的页面 非常高效

坏处：
1、不利于前后端分离，开发效率低
2、占用服务器端资源

1、如何检测路由参数的变化？

通过属性监听来实现或者 beforeRouterUpdate() watch:{ “$route”(){ }} beforeRouterUpdate(to,from,next);

2、什么是路由守卫？路由的钩子函数有哪些？分别说出使用的场景，及用法

1、什么是路由守卫？ 路由跳转前后做的一些验证

2、路由常见的钩子函数 berforeRouteEnter、beforeRouteUpdate、beforeRouteLeave

3、使用的场景 beforeRouteEnter: 当路由进入之前:登陆验证、热力图的记录、 beforeRouteUpdate: 当路由进行 更新的时候。如果当前路由发生了变化，但是不需要组件的创建销毁的过程的时候，就需要用到这个钩子函数 beforeRouterLeave: 当路由离开的时候、当用户没有进行支付离开的时候、当用户填写完信息没有保存的时候…

3、什么是全局守卫

beforeEach:全局守卫。验证用户是否登陆

4、axios 与 jquery 的 ajax 有什么不同

axios 的优点： 1、从 nodejs 中创建 http 请求 2、支持 promiseAPI 3、提供了一些并发请求的接口 4、自动转换 json 数据 5、客户端支持防止 CSRF/XSRF ajax 的缺点： 1、jQuery 项目庞大，单纯的使用 ajax 却要引入整个 Jquery 非常不合理 2、基于原生的 XHR 开发，但是 XHR 架构并不清晰

5、简述 vuex 的数据传递流程 当组件进行数据修改的时候我们需要调用 dispatch 来触发 actions 里面的方法。

actions 里面的每个方法中都会有一个 commit 方法，当方法执行的时候会通过
commit 来触发 mutations 里面的方法进行数据的修改。mutations 里面的每个函数都会有一个 state 参数，这样就可以在 mutations 里面进行 state 的数据修改
，当数据修改完毕后，会传导给页面。页面的数据也会发生改变

6、双向数据绑定的原理

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

7、使用 vue 的时候会一下子加载所有的东西使得初始化页面很卡，该如何解决？

1、路由懒加载

2、服务端渲染

3、骨架屏注入

像 vue 这种单页面应用，如果没有应用懒加载，运用 webpack 打包后的文件将会异常的大，造成进入首页时，需要加 载的内容过多，时间过长，会出现长时间的白屏，即使做了 loading 也是不利于用户体验，而运用懒加载则可以将页 面进行划分，需要的时候加载页面，可以有效的分担首页所承担的加载压力，减少首页加载用时

8、如何在 vue 中实现 css 私有化

1 在 vue 组件中，在 style 标签上添加 scoped 属性，以表示它的样式作用于当下的模块，很好的实现了样式私有化的目 的，这是一个非常好的机制。 2. scoped 肯定是解决了样式私有化的问题，但同时也引入了新的问题—样式不易（可）修改，而很多时候，我 们是需要对公共组件的样式做微调的。所以我才说要谨慎使用

9、vue 中路由传参的方式有哪几种？

1、动态路由传参数 2、query 传参 3、路由解偶

10、常见的跨域方式有哪些？

1、服务器代理(http-proxy-middleware)
2、nginx
3、CORS

11、vue 中使用插件的流程

1、import Vue from “vue”; 2、import 插件 from “插件” 3、Vue.use(插件)

12、请列举出 3 个 Vue 中常用的生命周期钩子函数

created: 实例已经创建完成之后调用,在这一步,实例已经完成数据观测, 属性和方法的运算, watch/event 事件回调. 然 而, 挂载阶段还没有开始, $el属性目前还不可见mounted:el被新创建的vm.$el 替换，并挂载到实例上去之后调用该钩子。如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.$el 也在文档内。
activated: keep-alive 组件激活时调用

13、第一次页面加载会触发哪几个钩子

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

14、简单描述每个周期具体适合哪些场景

beforecreate : 可以在这加个 loading 事件，在加载实例时触发

• created : 初始化完成时的事件写在这里，如在这结束 loading 事件，异步请求也适宜 在这里调用
• mounted : 挂载元素，获取到 DOM 节点
• updated : 如果对数据统一处理，在这里写上相应函数
• beforeDestroy : 可以做一个确认停止事件的确认框
• nextTick : 更新数据后立即操作 dom

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

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

16、vuex 中常用的属性有哪些？

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

• vuex 的 State 特性

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

  vuex 的 Getter 特性

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

  vuex 的 Mutation 特性

  1、import Vue from “vue”; 2、import 插件 from “插件” 3、Vue.use(插件)
  Action 类似于 mutation，不同在于：Action 提交的是 mutation，而不是直接变更状态；Action 可以包含任意异步操 作。

17、是否封装过组件，请说下封装组件的过程？

首先，组件可以提升整个项目的开发效率。能够把页面抽象成多个相对独立的模块，解决了我们传统项目开发：效率 低、难维护、复用性等问题。
然后，使用 Vue.extend 方法创建一个组件，然后使用 Vue.component 方法注册组件

18、如果在 vueX 中保存了某些数据，刷新浏览器后数据消失了。应该如何解决？

保存在 localStorage 中或者 sessionStorage 中

19、那个 swiper 插件从后台获取数据没问题，css 代码啥的也没问题，但是图片不动，应该怎么解决？

1、watch && nextTick 2、updated

20、什么是路由懒加载 (当打开一个单页面应用的时候，会出现白屏，加载时间过长如何解决)? 1、路由懒加载

2、nuxt 服务端渲染 21、请说下 vue-loader 的理解 解析和转换 .vue 文件，提取出其中的逻辑代码 script、样式代码 style、以及 HTML 模版 template，再分别把它们交 给对应的 Loader 去处理

22、父组件如何访问子组件内部的方法

通过 this.$refs.属性.方法

001、v-show 与 v-if 的区别 v-show:操作的是元素的 display 属性

v-if:操作的是元素的创建和插入

v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销
如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好

使用的场景：
v-show:前台数据的展示
v-if:管理系统权限列表的展示

002、methods、computed、watch 三者的区别 三者之间的共同点: methods,watch 和 computed 都是以函数为基础的

computed 与 watch 都是以 Vue 的依赖为基础，当所依赖的数据发生变化的时候
会触发相关的函数去实现数据的变动

methods 里面是用来定义函数的，需要手动才能执行，不像 computed 与 watch
"自动执行"函数

三者之间的不同点:
computed:
1、computed 是一个计算属性，computed 所依赖的属性发生变化时，计算属性
才会重新计算,并进行缓存。当其他数据发生改变的时候 computed 属性不会重新
计算。从而提升性能

watch:
watch 类似与事件监听+事件机制 watch 的方法默认是不会执行的，只有依赖的属性发生变化才会执行。 watch 默认第一次是不会执行的，通过声明 immediate 选项为 true，可以
立即执行一次 handler
watch 用在监听数据变化，给后台发数据请求 watch 中的 handler 默认只能监听属性引用的变化，但内部属性是监听不到的
设置 deep 为 true 可以进行深度监听，但是性能开销也会变大
watch 无法监听数组值(特殊情况下)的变化 watch 与 computed 使用的场景 1、watch:一个数据影响多个数据
例如:网络请求 模糊查询 浏览器自适应 监控路由对象

2、computed:一个数据受多个数据的影响
例如:商品购物车的结算 过滤某些商品数据

003、watch 无法监听数组的情况，以及解决方案

无法监听数组的情况

1. 利用索引直接设置一个数组项时，例如：arr[indexOfItem] = newValue; 2. 修改数组的长度时，例如：arr.length = newLength; 3. 解决方案
   1.this.$set(arr, index, newVal); 2.使用数组 splice 方法

004、如何给一个响应式对象中添加一个属性？如何删除响应式对象中的属性?

import Vue from “vue”; newVue({ data:{ obj:{} } }) //通过 vue.set 方法 Vue.delete 方法 //Vue.set(obj,name,“alley”); //Vue.delete(obj,“name”)

005、vue 中自定义指令如何使用

import Vue from “vue”; newVue({ data:{ obj:{} } }) //通过 vue.set 方法 Vue.delete 方法 //Vue.set(obj,name,“alley”); //Vue.delete(obj,“name”);
Vue.directive():
参数 1：指令名称
参数 2：指令实现的函数，在回调函数中参数一是指令绑定的元素，参数二是一个对象其中对象中有 value 属性代表的 是表达式返回的结果，还有 modifiers 属性是指令的修饰符

006、vue 中组件创建的方式有哪些

全局组件和局部组件
全局组件 Vue.component();
参数 1：组件名称
参数 2：组件的配置项
局部组件 new Vue({ components:{} key 值为组件名称 val 值为组件的配置项})

007、vue 中的过滤器如何使用

Vue.filter()
参数 1：过滤器名称
参数 2：过滤器实现的方法
该方法中有 2 个参数 参数 1 为需要过滤的数据， 参数 2 为过滤器传递的参数

008、vue 中组件通讯的方式有哪些？

父传子：1.通过绑定自定义属性，接收通过 props 进行接收

子传父：1、通过绑定自定义事件 2、通过插槽作用域
非父子组件传值：
创建公共的 Vue 实例对象 EventBus 手动封装事件订阅 Vuex

009、请说下 vue 的生命周期

1、beforeCreate():组件实例刚刚被创建 (el 和 data 并未初始化)

2、created():组件创建完成,属性已绑定,但 DOM 还未生成,$el 属性还不存在 (完成 data 数据的初始化)
3、beforeMount():模板编译/挂载之前 (完成了 el 和 data 初始化)
4、Mounted():模板编译/挂载之后 (完成挂载)
5、beforeUpdate():组件更新之前
6、updated()：组件更新之后
7、beforedestroy():组件销毁之前
8、destroyed():组件销毁之后

010、请解释一下 vue 的中单向数据流的理解

数据从父级组件传递给子组件,只能单向绑定，子组件不能直接修改从父级传递过来的数据数据只能从一个方向来修 改状态,如果父组件给 N 个子组件进行了数据传递。那么某一个子组件中修改了这个数据，那么就会导致其他组件的数 据也会发生改变。这样会防止从子组件意外改变父级组件的状态，从而导致你的应用的数据流向难以理解。因此数据 只能从一个方向来修改状态

011、请说下什么是动态组件，如何使用，以及 keep-alive 的作用

动态组件：
让多个组件使用同一个挂载点，并动态进行切换。这就是动态组件
通过保留 元素，动态的绑定它的 is 特性，可以实现动态组件
keep-alive:
包裹动态组件(组件)时，会缓存不活动的组件实例,而不是销毁它们组件切换调用的时候本身会被销毁掉的，只要加上 keep-alive 进行包裹，就不会被销毁，而是被缓存起来,下一次使用的时候直接从缓存中调用 是一个抽象组件：它自身 不会渲染一个 DOM 元素
常用的一些属性：
include :
类型：字符串或者正则表达式
解释：只有名称匹配的组件会被缓存
exclude :
类型：字符串或者正则表达式
解释：任何名称匹配的组件都不会被缓存
max :
类型:数字
解释：多可以缓存多少组件实例

012、当使用了 keep-alive 内置组件后组件会增加哪两个生命周期函数？

activated && deactivated:
activated：当组件为活跃状态的时候触发(活跃状态：进入页面的时候)
deactivated：缓存状态的时候触发

013、vue 中 solt 的使用方式，以及 solt 作用域插槽的用法

当组件当作标签使用的时候，如果需要在组件标签内部进行嵌套内容的时候，需要通过 template 组件包裹嵌套的内 容，在组件内部通过进行接收

014、为什么在组件内部 data 是一个函数而不是一个对象？

因为每次调用组件的时候都会重新生成一个对象,如果是一个对象的情况下，data 数据会进行复用(因为对象是引用数 据类型),而当 data 是一个函数的时候每次调用的时候就会返回一个新的对象

015、vue 中动画如何实现 哪个元素需要动画就给那个元素加 transition 标签进入时 class 的类型分为以下几种

-enter
-enter-active
-enter-to
离开时 class 的类型分为以下几种
-leave
-leave-active
-leave-to
如果需要一组元素发生动画需要用标签

016、浅谈对路由的理解

什么是路由？
根据不同的 url 地址展示不同的页面或者数据。
路由分为前端路由，和后端路由
前端路由：
1、前端路由多用于单页面开发，也就是 SPA。
2、前端路由是不涉及到服务器的，是前端利用 hash 或者 HTM5 的 historyApi 来实现的，一般用于不同的内容展示和切 换

017、路由跳转的方式有哪几种？

1、a 标签进行跳转。例如首页

2、router-link 进行跳转 例如：首页
3、编程式路由 例如：this.$router.push()

018、路由传值的方式有哪几种

1、动态路由传值。例如：path:"/home/:id/name"; 接受的时候通过 this.$route.params

2、query 传值。因为在 url 中？后面的参数不会被解析，因此我们可以通过 query 进行传值。接受的时候通过 this.$route.query3、路由解耦。在配置路由的时候添加props属性为true,在需要接受参数的组件页面通过props进行接受4、编程式导航this.$router.push({path:"/home",query:{}});

19、请说出路由配置项常用的属性及作用？

路由配置参数：
path : 跳转路径
component : 路径相对于的组件
name:命名路由
meta:路由元信息
children:子路由的配置参数(路由嵌套)
props:路由解耦
redirect : 重定向路由

20、编程式导航使用的方法以及常用的方法

路由跳转 ：this.$router.push()

路由替换 : this.$router.replace()后退：this.$router.back()
前进 ：this.$router.forward()

21、如何重定向路由？如何实现路由解耦？

通过配置路由项中的 redirect 进行重定向

在路由的配置项中设置 props:true 在需要接受组件的内部通过 props 进行接受