vue面试题一

1.那首先谈谈你对Vue的理解吧？

关键点： 渐进式 JavaScript 框架、核心库加插件、动态创建用户界面（异步获取后台数据，数据展示在界面）

特点： MVVM 模式；代码简洁体积小，运行效率高，适合移动PC端开发；本身只关注 UI （和 react 相似），可以轻松引入 Vue 插件或其他的第三方库进行开发。

2.你刚刚说到了MVVM，能详细说说吗？

全称： Model-View-ViewModel ， Model 表示数据模型层。 view 表示视图层， ViewModel 是 View 和 Model 层的桥梁，数据绑定到 viewModel 层并自动渲染到页面中，视图变化通知 viewModel 层更新数据。
MVVM是把MVC的Controller和MVP的Presenter改成了ViewModel。
View的变化会自动更新到ViewModel，ViewModel的变化也会自动同步到View上显示。这种自动同步是因为ViewModel中的属性实现了Observer，当属性变更时都能触发对应的操作。

MVC是应用最广泛的软件架构之一，一般MVC分为：

Model（ 模型 ）、Controller（ 控制器 ）、View（ 视图 ）。

这主要是基于分层的目的，让彼此的职责分开。View一般通过Controller来和Model进行联系。Controller是Model和View的协调者，View和Model不直接联系。基本联系都是单向的。

MVVM 和 MVC 的区别：
mvc 中 Controller演变成 mvvm 中的 viewModel，
1、View 传送指令到 Controller
2、Controller 完成业务逻辑后，要求 Model 改变状态
3、Model 将新的数据发送到 View，用户得到反馈
mvvm 通过数据来显示视图层而不是节点操作。
Mvvm主要解决了
mvc中大量的DOM 操作使页面渲染性能降低，加载速度变慢，影响用户体验。

Mvp
MVP 模式将 Controller 改名为Presenter，同时改变了通信方向。
1、各部分之间的通信，都是双向的。
2、View 与 Model 不发生联系，都通过 Presenter 传递。
3、View 非常薄，不部署任何业务逻辑，称为"被动视图"（Passive View），即没有任何主动性，而 Presenter非常厚，所有逻辑都部署在那里。

3.vue是如何实现响应式数据的呢？

Vue2： Object.defineProperty 重新定义 data 中所有的属性， Object.defineProperty 可以使数据的获取与设置增加一个拦截的功能，拦截属性的获取，进行依赖收集。拦截属性的更新操作，进行通知。

具体的过程：首先Vue使用 initData 初始化用户传入的参数，然后使用 new Observer 对数据进行观测，如果数据是一个对象类型就会调用 this.walk（value） 对对象进行处理，内部使用 defineeReactive 循环对象属性定义响应式变化，核心就是使用 Object.defineProperty 重新定义数据。

4.那vue中是如何检测数组变化的呢？

数组就是使用 object.defineProperty 重新定义数组的每一项，那能引起数组变化的方法我们都是知道的， pop 、 push 、 shift 、 unshift 、 splice 、sort 、 reverse 这七种，只要这些方法执行改了数组内容，我就更新内容就好了，是不是很好理解。

1.是用来函数劫持的方式，重写了数组方法，具体呢就是更改了数组的原型，更改成自己的，用户调数组的一些方法的时候，走的就是自己的方法，然后通知视图去更新。

2.数组里每一项可能是对象，那么我就是会对数组的每一项进行观测，（且只有数组里的对象才能进行观测，观测过的也不会进行观测）

vue3：改用 proxy ，可直接监听对象数组的变化。

5.那你说说Vue的事件绑定原理吧

· 原生 DOM 的绑定：Vue在创建真实DOM时会调用 createElment ，默认会调用 invokeCreateHooks 。会遍历当前平台下相对的属性处理代码，其中就有 updateDOMListeners 方法，内部会传入 add（） 方法

· 组件绑定事件，原生事件，自定义事件；组件绑定之间是通过Vue中自定义的 $on 方法实现的。

6.v-model中的实现原理及如何自定义v-model

v-model 可以看成是 value+input 方法的语法糖（组件）。原生的 v-model ，会根据标签的不同生成不同的事件与属性。解析一个指令来。

自定义：自己写 model 属性，里面放上 prop 和 event

7.为什么Vue采用异步渲染呢？

Vue 是组件级更新，如果不采用异步更新，那么每次更新数据都会对当前组件进行重新渲染，所以为了性能， Vue 会在本轮数据更新后，在异步更新视图。核心思想 nextTick 。

dep.notify（） 通知 watcher进行更新， subs[i].update 依次调用 watcher 的 update ， queueWatcher 将watcher 去重放入队列， nextTick（ flushSchedulerQueue ）在下一tick中刷新watcher队列（异步）。

8.了解nextTick吗？

作用vue中的nextTick主要用于处理数据动态变化后，DOM还未及时更新的问题，用nextTick就
可以获取数据更新后最新DOM的变化

异步方法，异步渲染最后一步，与JS事件循环联系紧密。主要使用了宏任务微任务（setTimeout、promise那些），定义了一个异步方法，多次调用nextTick会将方法存入队列，通过异步方法清空当前队列。

9.说说Vue的生命周期吧

beforeCreate（创建前） 在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用

created（创建后） 在实例创建完成后被立即调用。在这一步，实例已完成以下的配置：数据观 测 (data observer)， 属性和方法的运算，watch/event 事件回调。然而，挂载阶段还没开始， $el 属性目前不可见

beforeMount（载入前） 在挂载开始之前被调用，相关的render函数首次被调用。实例已完成以下的配置：编译模板，把data里面的数据和模板生成html。注意此时还没有挂载html到页面上。

mounted（载入后） 在el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用。实例已完成以下的配置：用上面编译好的html内容替换el属性指向的DOM对象。完成模板中的html渲染到html页面中。此过程中进行ajax交互。

beforeUpdate（更新前） 在数据更新之前调用，发生在虚拟DOM重新渲染和打补丁之前。可以在该钩子中进一步地更改状态，不会触发附加的重渲染过程。

updated（更新后） 在由于数据更改导致的虚拟DOM重新渲染和打补丁之后调用。调用时，组件DOM已经更新，所以可以执行依赖于DOM的操作。然而在大多数情况下，应该避免在此期间更改状态，因为这可能会导致更新无限循环。该钩子在服务器端渲染期间不被调用。

beforeDestroy（销毁前） 在实例销毁之前调用。实例仍然完全可用。

destroyed（销毁后） 在实例销毁之后调用。调用后，所有的事件监听器会被移除，所有的子实例也会被销毁。该钩子在服务器端渲染期间不被调用。

10.什么是vue生命周期？

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

11.父子组件生命周期调用顺序

渲染顺序：先父后子，完成顺序：先子后父

更新顺序：父更新导致子更新，子更新完成后父

销毁顺序：先父后子，完成顺序：先子后父

12.Vue组件通信

父子间通信:父亲提供数据通过属性 props传给儿子；儿子通过 $on 绑父亲的事件，再通过 $emit触发自己的事件（发布订阅）第二种：子传父：主要通过$emit来实现
具体实现：子组件通过通过绑定事件触发函数，在其中设置this.$emit(‘要派发的自定义事件’，要传递的值)，$emit中有两个参数一是要派发的自定义事件，第二个参数是要传递的值 然后父组件中,在这个子组件身上@派发的自定义事件,绑定事件触发的methods中的方法接受的默认值,就是传递过来的参数

第三种：兄弟之间传值有两种方法：
方法一：通过event bus实现
具体实现:创建一个空的vue并暴露出去，这个作为公共的bus,即当作两个组件的桥梁，在两个 兄弟组件中分别引入刚才创建的bus，在组件A中通过bus.$emit（’自定义事件名’，要发送的值）发送数据，在组件B中通过bus.$on（‘自定义事件名‘,function(v) { //v即为要接收的值 }）接 收数据

13.如何从真实DOM到虚拟DOM

涉及到Vue中的模板编译原理，主要过程：
1.将模板转换成 ast 树， ast 用对象来描述真实的JS语法（将真实DOM转换成虚拟DOM）
2.优化树
3.将 ast 树生成代码

14.Computed watch 和 method

computed：是计算属性，依赖其它属性值，并且 computed 的值有缓存，只有它依赖的属性值发生改变，下一次获取 computed 的值时才会重新计算 computed 的值；
支持缓存，只有依赖数据发生改变，才会重新进行计算；
不支持异步，当computed内有异步操作时无效，无法监听数据的变化；
computed属性值会默认走缓存，计算属性是基于他们的相应依赖进行缓存的，也就是基于data中声明过或者父组件传递的props中的数据通过计算得到的值。

watch：Watch是监听data和计算属性中的新旧变化
不支持缓存，数据变，会直接触发相应的操作；
watch支持异步；
监听数据必须是data中声明过或者父组件传递过来的props中的数据。

method：只要把方法用到模板上了,每次一变化就会重新渲染视图，性能开销大
运用场景：
当我们需要进行数值计算，并且依赖于其它数据时，应该使用 computed，因为可以利用 computed 的缓存特性，避免每次获取值时，都要重新计算；
当我们需要在数据变化时执行异步或开销较大的操作时，应该使用 watch，使用 watch 选项允许我们执行异步操作 ( 访问一个 API )，限制我们执行该操作的频率，并在我们得到最终结果前，设置中间状态。这些都是计算属性无法做到的。

15.v-if 和 v-show 区别

v-if 的显示隐藏是将DOM元素整个添加或删除，v-show 的显示隐藏是为DOM元素添加css的样式display，设置none或者是block，DOM元素是还存在的
v-if是动态的向DOM树内添加或者删除DOM元素；v-show是通过设置DOM元素的display样式属性控制显隐

16.v-for和v-if为什么不能连用

v-for 会比 v-if 的优先级更高，连用的话会把 v-if 的每个元素都添加一下，造成性能问题。

17.v-html 会导致哪些问题

XSS 攻击
v-html 会替换标签内部的元素

18.描述组件渲染和更新过程

渲染组件时，会通过 vue.extend() 方法构建子组件的构造函数，并进行实例化。最终手动调用 $mount() 进行挂载。更新组件时会进行 patchVnode 流程，核心就是 diff 算法。

19.组件中的data为什么是函数

一个组件可能在很多地方使用，也就是会创建很多个实例，如果data是一个对象的话，对象是引用类型，一个实例修改了data会影响到其他实例，所以data必须使用函数，为每一个实例创建一个属于自己的data，使其同一个组件的不同实例互不影响。

20.为什么要使用异步组件？

1.节省打包出的结果，异步组件分开打包，采用jsonp的方式进行加载，有效解决文件过大的问题。
2.核心就是包组件定义变成一个函数，依赖 import（） 语法，可以实现文件的分割加载。

21.action 与 mutation 的区别

mutation 是同步更新， $watch 严格模式下会报错

action 是异步操作，可以获取数据后调用 mutation 提交最终数据
1、流程顺序
“相应视图—>修改State”拆分成两部分，视图触发Action，Action再触发Mutation。
2、角色定位
基于流程顺序，二者扮演不同的角色。
Mutation：专注于修改State，理论上是修改State的唯一途径。
Action：业务代码、异步请求。
3、限制
角色不同，二者有不同的限制。
Mutation：必须同步执行。
Action：可以异步，但不能直接操作State。

22.插槽与作用域插槽的区别

插槽

创建组件虚拟节点时，会将组件儿子的虚拟节点保存起来。当初始化组件时，通过插槽属性将儿子进行分类 {a:[vnode],b[vnode]}

渲染组件时会拿对应的 slot 属性的节点进行替换操作。（插槽的作用域为父组件）

作用域插槽

作用域插槽在解析的时候不会作为组件的孩子节点。会解析成函数，当子组件渲染时，会调用此函数进行渲染。

普通插槽渲染的作用域是父组件，作用域插槽的渲染作用域是当前子组件。

23.谈谈对keep-alive的了解

keep-alive 可以实现组件的缓存，当组件切换时不会对当前组件进行卸载。常用的2个属性 include/exclude ，2个生命周
Ai te v tei d kou lou de
期 activated ， deactivated di ai ke t v tei d
activated
在组件被激活时调用，在组件第一次渲染时也会被调用，之后每次keep-alive激活时被调用。
deactivated
在组件被停用时调用。
配合router-view 使用
有些时候可能需要将整个路由页面一切缓存下来，也就是将 进行缓存。

提供 include 和 exclude 属性，两者都支持字符串或正则表达式， include 表示只有名称匹配的组件会被缓存，exclude 表示任何名称匹配的组件都不会被缓存 ，其中 exclude 的优先级比 include 高；
对应两个钩子函数 activated 和 deactivated ，当组件被激活时，触发钩子函数 activated，当组件被移除时，触发钩子函数 deactivated。

24.Vue双向数据绑定的原理

vue 双向数据绑定是通过 数据劫持 结合 发布订阅模式的方式来实现的
核心：关于VUE双向数据绑定，其核心是 Object.defineProperty()方法；
Object.defineProperty(obj, prop, descriptor) ，这个语法内有三个参数，分别为 obj （要定义其上属性的对象） prop （要定义或修改的属性） descriptor （具体的改变方法）

数据改变视图跟着改变

25.防抖和节流的理解

防抖的含义是：触发高频事件后n秒内函数只会执行一次，如果n秒内高频事件再次被触发，则重新计算时间。

实现方式： 每次触发事件时设置一个延迟调用方法，并且取消之前的延时调用方法
缺点： 如果事件在规定的时间间隔内被不断的触发，则调用方法会被不断的延迟

节流的含义是：高频事件触发，但在n秒内只会执行一次，所以节流会稀释函数的执行频率。

与防抖的区别是：同样的时间间隔500ms，节流保证在500ms内一定会执行回调，而在防抖的场景下，如果触发的时间间隔小于500ms，则不会执行回调，直到触发间隔大于500ms。

实现方式： 设置一个变量flag来记录是否有指定回调函数在等待调用

26.Vue性能优化

编码优化：

事件代理
keep-alive k bu lai f
拆分组件
key 保证唯一性
路由懒加载、异步组件
防抖节流

27.v-for为什么要加key？

为了提升渲染速度。当两个元素位置发生改变时vue不会对整个列表进行重新渲染，而只是更换一下dom的顺序，这样可以减少资源消耗。

28.vuex是什么？怎么使用？哪种功能场景使用它？

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。简单来说就是：应用遇到多个组件共享状态时，使用vuex。
vuex的流程
页面通过mapAction异步提交事件到action。action通过commit把对应参数同步提交到mutation，mutation会修改state中对应的值。最后通过getter把对应值跑出去，在页面的计算属性中，通过，mapGetter来动态获取state中的值
用户的登录状态，多个组件多个页面都会用到它。
购物车中的信息等等

29.vuex有哪几种属性

1. state：vuex的基本数据，用来存储变量
2. geeter：从基本数据(state)派生的数据，相当于state的计算属性
3. mutation：提交更新数据的方法，必须是同步的(如果需要异步使用action)。每个mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数(handler)。回调函数就是我们实际进行状态更改的地方，并且它会接受 state 作为第一个参数，提交载荷作为第二个参数。
4. action：和mutation的功能大致相同，不同之处在于 ==》1. Action 提交的是 mutation，而不是直接变更状态。 2. Action 可以包含任意异步操作。
5. modules：模块化vuex，可以让每一个模块拥有自己的state、mutation、action、getters,使得结构非常清晰，方便管理。
   主 要 流 程 ： 组 件 通 过 dispatch 到
   actions，actions是异步操作，再actions中通过commit到mutations，mutations再通过逻辑操作改
   变state，从而同步到组件，更新其数据状态,而getters相当于组件的计算属性对,组件中获取到的
   数据做提前处理的.再说到辅助函数的作用
   action和mutation的区别 1、流程顺序
   “相应视图—>修改State”拆分成两部分，视图触发Action，Action再触发Mutation。
   角色定位Mutation：专注于修改State，理论上是修改State的唯一途径。Action：业务代码、异步请求。
   限制
   Mutation：必须同步执行。
   Action：可以异步，但不能直接操作State。

30.如何理解 HTTP 状态码

1xx: 表示目前是协议处理的中间状态，还需要后续操作。
2xx: 表示成功状态。
3xx: 重定向状态，资源位置发生变动，需要重新请求。
4xx: 请求报文有误。
5xx: 服务器端发生错误。

31.Cookie、LocalStorage 与 SessionStorage的区别在哪里？

Cookie可以设置失效时间，但没有自己的存取取的方法，需要时封装，每次请求时跟随请求发送

localStorage 是 HTML5 标准中新加入的技术，它并不是什么划时代的新东西。早在 IE 6 时代，就有一个叫 userData 的东西用于本地存储，而当时考虑到浏览器兼容性，更通用的方案是使用 Flash。而如今，localStorage 被大多数浏览器所支持，如果你的网站需要支持 IE6+，那以 userData 作为你的 polyfill 的方案是种不错的选择。
sessionStorage 与 localStorage 的接口类似，但保存数据的生命周期与 localStorage 不同。做过后端开发的同学应该知道 Session 这个词的意思，直译过来是“会话”。而 sessionStorage 是一个前端的概念，它只是可以将一部分数据在当前会话中保存下来，刷新页面数据依旧存在。但当页面关闭后，sessionStorage 中的数据就会被清空。
localStorage 是持久化的存储机制
sessionStorage 是绘画期间的存储机制
Token 只应该在当前网站打开期间生效 所以用sessionStorage 保存

32.谈谈你对 Webpack 的理解

webpack 是一款模块加载，资源打包工具.
优势：
以commonJS的形式来书写脚本，对AMD、CMD的支持也很全面，方便旧项目的迁移
关于 CommonJS , AMD , CMD 的理解
能被模块化的不止是JS
能替代部分grunt/gulp的工作，例如打包，压缩混淆，图片转base64等
扩展性强，插件机制完善，支持React热拔插（react-hot-loader）
主要特征：
同时支持 ComminJS 和 AMD 模块
灵活性和扩展性
按需加载
打包
开发时在内存中完成打包，性能更快，完全可以支持开发过程的实时打包需求
1.对 source map 有很好的支持

33.Hash和history的区别

hash表示的是地址栏URL中#符号(也称作为锚点), hash虽然会出现在URL中, 但是不会被包含在Http请求中, 因此hash值改变不会重新加载页面.
由于hash值变化不会引起浏览器向服务器发出请求, 而且hash改变会触发hashchange事件, 浏览器的进后退也能对其进行控制, 所以在HTML5之前, 基本都是使用hash来实现前端路由.
history利用了HTML5新增的pushState()和replaceState()两个api, 通过这两个api完成URL跳转不会重新加载页面
同时history模式解决了hash模式存在的问题. hash的传参是基于URL的, 如果要传递复杂的数据, 会有体积限制, 而history模式不仅可以在URL里传参, 也可以将数据存放到一个特定的对象中

34.git相关：

1. 你们公司项目是如何管理的？
   答：主要通过git来进行项目版本控制的
2. 说几个git常用命令？
   答：我工作中常用的有git add ,git status,git commit –m,git push,git pull git checkout -b dev创建并切换 git branch查看分支等
3. 说一下多人操作同一个文件，如果出现冲突该如何解决？
   答：当遇到多人协作修改同一个文件时出现冲突，我先将远程文件先git pull下来，手动修改
   冲突代码后，再git add ,git commit,git push再上传到远程仓库。如果pull也pull不下来提示冲突的话，可以先通过git stash暂存下来，然后再pull拉取，然后git stash pop，取出原来写的，
   手动修改，然后提交

35.Ajax相关：

1. 说一下你是如何与后端进行数据交互的
   答：我和后端通过ajax来进行数据交互的，通过统一制定的接口文档，来实现前后端高效开发，如
   果接口文档不能详细说明，或者接口文档上的参数请求不出数据，我会主动和后端工程师沟通，直到完
   成跟接口相关的业务开发。当然这其中为了验证一些接口问题，会用到一些辅助工具，比方说，runapi
   这种在线测试工具
2. 如果后端数据接口没有准备好，你是如何工作的
   答：如果后端接口还没有准备好，我会和后端工程师沟通，通过制定接口返回数据的格式，然后前
   端通过一些mock数据的工具（上家公司使用的是easymock,贼简单）来批量生成假数据，可以让前端和
   后端同时开发，而无需等待后端数据接口写好再开发，这样提升项目整体的开发效率
3. 说一下你对ajax的同源策略的理解
   答：ajax同源策略是因为安全的考虑，ajax不允许访问不同域名下的资源即所谓同源策略的意思。
4. 说一下什么情况下会生跨域及产生跨域的解决方案和实现原理？
   答：产生跨域的情况有：不同协议，不同域名，不同端口以及域名和ip地址的访问都会产生跨域。

36. 说⼀下vue最⼤特点是什么或者说vue核⼼是什么

答：vue最大特点我感觉就是“组件化“和”数据驱动“
组件化就是可以将页面和页面中可复用的元素都看做成组件，写页面的过程，就是写组件，然后页面是由这些组件“拼接“起来的组件树
数据驱动就是让我们只关注数据层，只要数据变化，页面（即视图层）会自动更新，至于如何 操作dom，完全交由vue去完成，咱们只关注数据，数据变了，页面自动同步变化了，很方便

37.Vue常⽤的修饰符

.lazy 输入框改变，这个数据就会改变，lazy这个修饰符会在光标离开input框才会更新数据
.trim 输入框过滤首尾的空格
.number 先输入数字就会限制输入只能是数字，先字符串就相当于没有加number，注意，不是输入框不能输入字符串，是这个数据是数字
.stop 阻止事件冒泡，相当于调用了event.stopPropagation()方法

38. 说⼀下vue路由懒加载解决什么问题的?

答：vue路由懒加载主要解决打包后文件过大的问题，事件触发才加载对应组件中的js

39. 说⼀下vue开发环境和线上环境如何切换

答 ： 主 要 通 过 检 测 process.env.NODE_ENV===”production” 和 process.env.NODE_ENV===”development”环境，来设置线上和线下环境地址，从而实现线上和线 下环境地址的切换

40.Webpack

webpack是目前前端开发中最流行的打包工具，不仅能实现 JS 打包，还能将 CSS 文件，图片文件，甚至是 LESS 文件打包，每一个文件都是一个独立的模块，并且实现按需加载。使用时需要安装 webpack 、 webpack-cli 、webpack-dev-server三个基础模块。
1.2.1Entry
入口 webpack以哪个文件为入口起点开始打包，分析构建内部依赖图
1.2.2Output
输出 webpack打包后的资源bundles输出到哪里去，以及如何命名
1.2.3Loader
Loader让webpack能够去处理那些非JAVAscript文件（webpack 自身只理解JAVAscript
1.2.4Plugins
插件可以用于执行范围更广的任务，插件的范围包括。从打包优化和解压，一直到重新定义环境中的变量等
1.2.5Mode
模式指示webpack使用相应模式的配置
development开发模式 主要是能让代码在本地能够运行
production生产模式 能让代码优化 兼容

41.hash模式和history模式的区别

外观：

hash模式url带#号，history模式不带#号。

功能：
hash模式url里面永远带着#号，开发当中默认使用这个模式。如果用户考虑url的规范那么就需要使用history模式，因为history模式没有#号，是个正常的url，适合推广宣传；
比如我们在开发app的时候有分享页面，那么这个分享出去的页面就是用vue或是react做的，咱们把这个页面分享到第三方的app里，有的app里面url是不允许带有#号的，所以要将#号去除那么就要使用history模式，但是使用history模式还有一个问题就是，在访问二级页面的时候，做刷新操作，会出现404错误，那么就需要和后端人配合，让他配置一下apache或是nginx的url重定向，重定向到你的首页路由上就ok了。

42.理解vue的单向数据流

父级 prop 的更新会向下流动到子组件中，每次父级组件发生更新时，子组件中所有的 prop 都将会刷新为最新的值。
只能父传子
43.Vue事件绑定原理说一下
每一个Vue实例都是一个Event Bus，当子组件被创建的时候，父组件将事件传递给子组件，子组件初始化的时候是有$on方法将事件注册到内部，在需要的时候使用$emit触发函数，而对于原生native事件，使用addEventListener绑定到真实的DOM元素上。