vue常见面试题总结

问：说⼀下vue最⼤特点是什么或者说vue核⼼是什么

答：vue最大特点我感觉就是“组件化“和”数据驱动“

组件化就是可以将页面和页面中可复用的元素都看做成组件，写页面的过程，就是写组件，然 后页面是由这些组件“拼接“起来的组件树

数据驱动就是让我们只关注数据层，只要数据变化，页面（即视图层）会自动更新，至于如何 操作dom，完全交由vue去完成，咱们只关注数据，数据变了，页面自动同步变化了，很方便

问：Vue 组件中 data 为什么必须是函数

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

问：vue 的双向绑定的原理是什么

答：vue 数据双向绑定是通过数据劫持结合发布者-订阅者模式的方式来实现的。具体实现过程： 我们已经知道实现数据的双向绑定，首先要对数据进行劫持监听，所以我们需要设置一个监 听器 Observer，用来监听所有属性。如果属性发上变化了，就需要告诉订阅者 Watcher 看是 否需要更新。因为订阅者是有很多个，所以我们需要有一个消息订阅器 Dep 来专门收集这 些订阅者，然后在监听器 Observer 和订阅者 Watcher 之间进行统一管理的。接着，我们还 需要有一个指令解析器 Compile，对每个节点元素进行扫描和解析，将相关指令对应初始化 成一个订阅者 Watcher，并替换模板数据或者绑定相应的函数，此时当订阅者 Watcher 接收 到相应属性的变化，就会执行对应的更新函数，从而更新视图。因此接下去我们执行以下 3 个步骤，实现数据的双向绑定： 1.实现一个监听器 Observer，用来劫持并监听所有属性，如果有变动的，就通知订阅者。 2.实现一个订阅者 Watcher，可以收到属性的变化通知并执行相应的函数，从而更新视图。 3.实现一个解析器 Compile，可以扫描和解析每个节点的相关指令，并根据初始化模板数据 以及初始化相应的订阅器

问：说一下MVVM的理解

答：MVVM 是 Model-View-ViewModel 的缩写。MVVM 是一种设计思想。Model 层代表数 据模型，也可以在 Model 中定义数据修改和操作的业务逻辑；View 代表 UI 组 件，它负责将数据模型转化成 UI 展现出来，ViewModel 是一个同步 View 和 Model 的对象。 在 MVVM 架构下，View 和 Model 之间并没有直接的联系，而是通过 ViewModel 进行交互，Model 和 ViewModel 之间的交互是双向的， 因此 View 数据的变化 会同步到 Model 中，而 Model 数据的变化也会立即反应到 View 上。 ViewModel 通过双向数据绑定把 View 层和 Model 层连接了起来，而 View 和 Model 之间的同步工作完全是自动的，无需人为干涉，因此开发者只需关注业务 逻辑，不需要手动操作 DOM, 不需要关注数据状态的同步问题，复杂的数据状态 维护完全由 MVVM 来统一管理。

问：说一下vue生命周期以及使用场景

答：vue生命周期即为一个组件从出生到死亡的一个完整周期，主要包括以下4个阶段：创建， 挂载，更新，销毁

       创建前：beforeCreate, 创建后:created 挂载前：beforeMount, 挂载后：mounted 更新前：beforeUpdate, 更新后：updated 销毁前：beforeDestroy, 销毁后：destroyed 我平时用的比较多的钩了是created和mounted，created用于获取后台数据，mounted用于dom挂 载完后做一些dom操作,以及初始化插件等.beforeDestroy用户清除定时器以及解绑事件等, 另外还新增了使⽤内置组件 keep-alive 来缓存实例，⽽不是频繁创建和销毁(开销⼤) actived 实例激活 deactived 实例失效

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

问：说⼀下vue组件通讯（即传值）有哪⼏种形式，具体分别是如何实现的

答：vue组件通讯大致有三种：父传子，子传父，还有兄弟之间通讯

第一种：父传子：主要通过props来实现的 具体实现：父组件通过import引入子组件，并注册，在子组件标签上添加要传递的属性，子组 件通过props接收，接收有两种形式一是通过数组形式[‘要接收的属性’ ]，二是通过对象形式{ } 来接收，对象形式可以设置要传递的数据类型和默认值，而数组只是简单的接收

第二种：子传父：主要通过$emit来实现 具体实现：子组件通过通过绑定事件触发函数，在其中设置this.$emit(‘要派发的自定义事 件’，要传递的值)，$emit中有两个参数一是要派发的自定义事件，第二个参数是要传递的值 然后父组件中,在这个子组件身上@派发的自定义事件,绑定事件触发的methods中的方法接受的 默认值,就是传递过来的参数

第三种：兄弟之间传值有两种方法：

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

方法二：通过vuex实现 具体实现：vuex是一个状态管理工具，主要解决大中型复杂项目的数据共享问题，主要包括 state,actions,mutations,getters 和 modules 5 个 要 素 ， 主 要 流 程 ： 组 件 通 过 dispatch 到 actions，actions是异步操作，再actions中通过commit到mutations，mutations再通过逻辑操作改 变state，从而同步到组件，更新其数据状态

问：vue 等单页面应用（spa）及其优缺点

答：优点： Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件，核心 是一个响应的数据绑定系统。MVVM、数据驱动、组件化、轻量、简洁、高效、快速、模块 友好；即第一次就将所有的东西都加载完成，因此，不会导致页面卡顿。

缺点： 不支持低版本的浏览器，最低只支持到 IE9；不利于 SEO 的优化（如果要支持 SEO， 建议通过服务端来进行渲染组件）；第一次加载首页耗时相对长一些；不可以使用浏览器的 导航按钮需要自行实现前进、后退

问：说⼀下vue中methods,computed,watch的区别：

答：methods中都是封装好的函数，无论是否有变化只要触发就会执行

computed:是vue独有的特性计算属性，可以对data中的依赖项再重新计算，得到一个新值，应 用到视图中，和methods本质区别是computed是可缓存的，也就是说computed中的依赖项没有变化， 则computed中的值就不会重新计算，

而methods中的函数是没有缓存的。Watch是监听data和计算属 性中的新旧变化

问：vue 中 key 值的作用

答：使用 key 来给每个节点做一个唯一标识 key 的作用主要是为了高效的更新虚拟 DOM。另外 vue 中在使用相同标签名元素的过渡切换 时，也会使用到 key 属性，其目的也是为了让 vue 可以区分它们， 否则 vue 只会替换其内部属性而不会触发过渡效果。

问：$route 和 $router 的区别是什么？

答：$router 为 VueRouter 的实例，是一个全局路由对象，包含了路由跳转的方法、钩子函数等。 $route 是路由信息对象或跳转的路由对象，每一个路由都会有一个 route 对象，是一个局部 对象，包含 path,params,hash,query,fullPath,matched,name 等路由信息参数。

问：怎么定义 vue-router 的动态路由？怎么获取传过来的 值？

动态路由的创建，主要是使用 path 属性过程中，使用动态路径参数，以冒号开头，参数值会被设置到 this.$route.params 下，所以通过这个属性 可以获取动态参数 this.$route.params.id

问：Vue 的路由实现

答：hash 模式和 history 模式

hash 模式 在浏览器中符号“#”，#以及#后面的字符称之为 hash，用 window.location.hash 读取； 特点：hash 虽然在 URL 中，但不被包括在 HTTP 请求中；用来指导浏览器动作，对服务端安 全无用，hash 不会重加载页面。

history 模式 history 采用 HTML5 的新特性；如果你使用 history 的话，改变路由的时候，后台会给你响应； 且提供了两个新方法：pushState（），replaceState（）可以对浏览器历史记录栈进行修改， 以及 popState 监听浏览器历史记录变化，但是 pushState(),replaceState()不会触发该函数。

问：vue 路由的钩子函数（导航守卫）

第一种：全局导航钩子 router.beforeEach(to,from,next)，作用：跳转前进行判断拦截。

第二种：组件内的钩子； beforeRouteEnter beforeRouteUpdate (2.2 新增) beforeRouteLeave

第三种：单独路由独享组件。 beforeEnter

每个钩子方法接收三个参数：

to: Route: 即将要进入的目标 路由对象

from: Route: 当前导航正要离开的路由 

next: Function: 一定要调用该方法来 resolve 这个钩子。执行效果依赖 next 方法的调用参 数。

问：路由传参的方式

答：使用 Params: 只能使用 name，不能使用 path 参数不会显示在路径上 浏览器强制刷新参数会被清空

使用 Query： 参数会显示在路径上，刷新不会被清空 name 可以使用 path 路径

问.说⼀下你对vuex的理解：

答：vuex是一个状态管理工具，主要解决大中型复杂项目的数据共享问题，主要包括 state,actions,mutations,getters 和 modules 5 个 要 素 ， 主 要 流 程 ： 组 件 通 过 dispatch 到 actions，actions是异步操作，再actions中通过commit到mutations，mutations再通过逻辑操作改 变state，从而同步到组件，更新其数据状态,而getters相当于组件的计算属性对,组件中获取到的 数据做提前处理的.再说到辅助函数的作用.