前端面试题-VUE

1. 对于MVVM的理解

MVVM 是 Model-View-ViewModel 的缩写

• Model 代表数据模型，也可以在 Model 中定义数据修改和操作的业务逻辑。
• View 代表 UI 组件，它负责将数据模型转化成 UI 展现出来。
• ViewModel 监听模型数据的改变和控制视图⾏为、处理⽤户交互，简单理解就是⼀个同步View 和 Model 的对象，连接 Model 和 View
• 在 MVVM 架构下， View 和 Model 之间并没有直接的联系，⽽是通过ViewModel 进⾏交互， Model 和 ViewModel 之间的交互是双向的， 因此 View 数据的变化会同步到Model中，⽽Model 数据的变化也会⽴即反应到 View 上。
• ViewModel 通过双向数据绑定把 View 层和 Model 层连接了起来，⽽View 和 Model 之间的同步⼯作完全是⾃动的，⽆需⼈为⼲涉，因此开发者只需关注业务逻辑，不需要⼿动操作DOM，不需要关注数据状态的同步问题，复杂的数据状态维护完全由 MVVM 来统⼀管理

2 请详细说下你对vue⽣命周期的理解

答：总共分为8个阶段创建前/后，载⼊前/后，更新前/后，销毁前/后

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

什么是vue⽣命周期？

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

vue⽣命周期的作⽤是什么？

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

vue⽣命周期总共有⼏个阶段？

• 答：它可以总共分为 8 个阶段：创建前/后、载⼊前/后、更新前/后、销毁前/销毁后。

第⼀次⻚⾯加载会触发哪⼏个钩⼦？

• 答：会触发下⾯这⼏个 beforeCreate 、 created 、 beforeMount 、 mounted 。

DOM 渲染在哪个周期中就已经完成？

• 答： DOM 渲染在 mounted 中就已经完成了

3 Vue实现数据双向绑定的原理：Object.defineProperty()

• vue 实现数据双向绑定主要是：采⽤数据劫持结合发布者-订阅者模式的⽅式，通过Object.defineProperty() 来劫持各个属性的 setter ， getter ，在数据变动时发布消息给订阅者，触发相应监听回调。当把⼀个普通 Javascript 对象传给 Vue 实例来作为它的 data 选项时，Vue 将遍历它的属性，⽤ Object.defineProperty() 将它们转为 getter/setter 。⽤户看不到 getter/setter ，但是在内部它们让 Vue 追踪依赖，在属性被访问和修改时通知变化。
• vue的数据双向绑定 将 MVVM 作为数据绑定的⼊⼝，整合 Observer ， Compile 和Watcher 三者，通过 Observer 来监听⾃⼰的 model 的数据变化，通过 Compile 来解析编译模板指令（ vue 中是⽤来解析 {{}} ），最终利⽤ watcher 搭起 observer 和Compile 之间的通信桥梁，达到数据变化 —>视图更新；视图交互变化（ input ）—>数据 model 变更双向绑定效果。

4 Vue组件间的参数传递

⽗组件与⼦组件传值

⽗组件传给⼦组件：⼦组件通过 props ⽅法接受数据；

• ⼦组件传给⽗组件： $emit ⽅法传递参数

⾮⽗⼦组件间的数据传递，兄弟组件传值

eventBus ，就是创建⼀个事件中⼼，相当于中转站，可以⽤它来传递事件和接收事件。项⽬⽐较⼩时，⽤这个⽐较合适（虽然也有
不少⼈推荐直接⽤VUEX ，具体来说看需求）

5 Vue的路由实现：hash模式 和 history模式

• hash 模式：在浏览器中符号 “#” ，#以及#后⾯的字符称之为 hash ，⽤window.location.hash 读取。特点： hash 虽然在 URL 中，但不被包括在 HTTP 请求中；⽤来指导浏览器动作，对服务端安全⽆⽤， hash 不会重加载⻚⾯。
• history 模式：h istory 采⽤ HTML5 的新特性；且提供了两个新⽅法：pushState() ， replaceState() 可以对浏览器历史记录栈进⾏修改，以及 popState事件的监听到状态变更

5 vue路由的钩⼦函数

⾸⻚可以控制导航跳转， beforeEach ， afterEach 等，⼀般⽤于⻚⾯title 的修改。⼀些需要登录才能调整⻚⾯的重定向功能。
beforeEach 主要有3个参数 to ， from ， next 。

• to ： route 即将进⼊的⽬标路由对象。
• from ： route 当前导航正要离开的路由。
• next ： function ⼀定要调⽤该⽅法 resolve 这个钩⼦。执⾏效果依赖n ext ⽅法的调⽤参数。可以控制⽹⻚的跳转

6 vuex是什么？怎么使⽤？哪种功能场景使⽤它？

• 只⽤来读取的状态集中放在 store 中； 改变状态的⽅式是提交 mutations ，这是个同步的事物； 异步逻辑应该封装在 action 中。

• 在 main.js 引⼊ store ，注⼊。新建了⼀个⽬录 store ， … export

• 场景有：单⻚应⽤中，组件之间的状态、⾳乐播放、登录状态、加⼊购物⻋

• state ： Vuex 使⽤单⼀状态树,即每个应⽤将仅仅包含⼀个 store 实例，但单⼀状态树和模块化并不冲突。存放的数据状态，不可以直接修改⾥⾯的数据。

• mutations ： mutations 定义的⽅法动态修改 Vuex 的 store 中的状态或数据

• getters ：类似 vue 的计算属性，主要⽤来过滤⼀些数据。

• action ： actions 可以理解为通过将 mutations ⾥⾯处⾥数据的⽅法变成可异步的处理数据的⽅法，简单的说就是异步操作数据。 view 层通过 store.dispath 来分发action

   modules ：项⽬特别复杂的时候，可以让每⼀个模块拥有⾃⼰的 state 、mutation 、 action 、 getters ，使得结构⾮常清晰，⽅便管理
  

7 v-if 和 v-show 区别

• 答： v-if 按照条件是否渲染， v-show 是 display 的 block 或 none ；

8 $route 和 $router 的区别

• $route 是“路由信息对象”，包括 path ， params ， hash ， query ，fullPath ， matched ， name 等路由信息参数。
• ⽽ $router 是“路由实例”对象包括了路由的跳转⽅法，钩⼦函数等

9 如何让CSS只在当前组件中起作⽤?

将当前组件的 <style> 修改为 <style scoped>

10 的作⽤是什么?

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

⽐如有⼀个列表和⼀个详情，那么⽤户就会经常执⾏打开详情=>返回列表=>打开详情…这样的话列表和详情都是⼀个频率很⾼的⻚⾯，
那么就可以对列表组件使⽤ <keep-alive></keep-alive> 进⾏缓存，这样⽤户每次返回列表的时候，都能从缓存中快速渲染，⽽不
是重新渲染

11 指令v-el的作⽤是什么?

提供⼀个在⻚⾯上已存在的 DOM 元素作为 Vue 实例的挂载⽬标.可以是 CSS选择器，也可以是⼀个 HTMLElement 实例,

12 在Vue中使⽤插件的步骤

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

13 请列举出3个Vue中常⽤的⽣命周期钩⼦函数?

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

14 vue-cli ⼯程技术集合介绍

问题⼀：构建的 vue-cli ⼯程都到了哪些技术，它们的作⽤分别是什么？

• vue.js ： vue-cli ⼯程的核⼼，主要特点是 双向数据绑定 和 组件系统。
• vue-router ： vue 官⽅推荐使⽤的路由框架。
• vuex ：专为 Vue.js 应⽤项⽬开发的状态管理器，主要⽤于维护 vue 组件间共⽤的⼀些 变量 和 ⽅法。
• axios （ 或者 fetch 、 ajax ）：⽤于发起 GET 、或 POST 等 http 请求，基于Promise 设计。
• vuex 等：⼀个专为 vue 设计的移动端 UI 组件库。
• 创建⼀个 emit.js ⽂件，⽤于 vue 事件机制的管理。
• webpack ：模块加载和 vue-cli ⼯程打包器。

问题⼆：vue-cli ⼯程常⽤的 npm 命令有哪些？

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

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

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

• ⽤于查看 vue-cli ⽣产环境部署资源⽂件⼤⼩的 npm 命令：
  npm run build --report

  在浏览器上⾃动弹出⼀个 展示 vue-cli ⼯程打包后 app.js 、manifest.js 、 vendor.js ⽂件⾥⾯所包含代码的⻚⾯。
  可以具此优化vue-cli ⽣产环境部署的静态资源，提升 ⻚⾯ 的加载速度
  

15 NextTick

• nextTick 可以让我们在下次 DOM 更新循环结束之后执⾏延迟回调，⽤于获得更新后的 DOM

16 vue的优点是什么？

• 低耦合。视图（ View ）可以独⽴于 Model 变化和修改，⼀个 ViewModel 可以绑定到不同的 “View” 上，当View变化的时候Model可以不变，当 Model 变化的时候 View 也可以不变
• 可重⽤性。你可以把⼀些视图逻辑放在⼀个 ViewModel ⾥⾯，让很多 view 重⽤这段视图逻辑
• 可测试。界⾯素来是⽐较难于测试的，⽽现在测试可以针对 ViewModel 来写

17 路由之间跳转？

声明式（标签跳转）

<router-link :to="index">

编程式（ js跳转）

router.push('index')

18 实现 Vue SSR

其基本实现原理

• app.js 作为客户端与服务端的公⽤⼊⼝，导出 Vue 根实例，供客户端 entry 与服务端 entry 使⽤。客户端 entry 主要作⽤挂载到 DOM 上，服务端 entry 除了创建和返回实例，还进⾏路由匹配与数据预获取。

• webpack 为客服端打包⼀个 Client Bundle ，为服务端打包⼀个 Server Bundle 。

• 服务器接收请求时，会根据 url ，加载相应组件，获取和解析异步数据，创建⼀个读取Server Bundle 的 BundleRenderer ，然后⽣成 html 发送给客户端。

• 客户端混合，客户端收到从服务端传来的 DOM 与⾃⼰的⽣成的 DOM 进⾏对⽐，把不相同的 DOM 激活，使其可以能够响应后续变化，这个过程称为客户端激活 。为确保混合成功，客户端与服务器端需要共享同⼀套数据。在服务端，可以在渲染之前获取数据，填充到 stroe ⾥，这样，在客户端挂载到 DOM 之前，可以直接从 store ⾥取数据。⾸屏的动态数据通过 window.INITIAL_STATE 发送到客户端

   Vue SSR 的实现，主要就是把 Vue 的组件输出成⼀个完整 HTML , vue-server-renderer 就是⼲这事的
  

• Vue SSR 需要做的事多点（输出完整 HTML），除了 complier -> vnode ，还需如数据获取填充⾄ HTML 、客户端混合（ hydration ）、缓存等等。 相⽐于其他模板引擎
  （ ejs , jade 等），最终要实现的⽬的是⼀样的，性能上可能要差点

19 Vue 组件 data 为什么必须是函数

• 每个组件都是 Vue 的实例。
• 组件共享 data 属性，当 data 的值是同⼀个引⽤类型的值时，改变其中⼀个会影响其他

20 Vue computed 实现

• 建⽴与其他属性（如： data 、 Store ）的联系；

• 属性改变后，通知计算属性重新计算

  实现时，主要如下
  

• 初始化 data ， 使⽤ Object.defineProperty 把这些属性全部转为getter/setter 。

• 初始化 computed , 遍历 computed ⾥的每个属性，每个 computed 属性都是⼀个watch 实例。每个属性提供的函数作为属性的 getter ，使⽤Object.defineProperty 转化。

• Object.defineProperty getter 依赖收集。⽤于依赖发⽣变化时，触发属性重新计算。

• 若出现当前 computed 计算属性嵌套其他 computed 计算属性时，先进⾏其他的依赖收集

21 Vue complier 实现

• 模板解析这种事，本质是将数据转化为⼀段 html ，最开始出现在后端，经过各种处理吐给前端。随着各种 mv* 的兴起，模板解析交由前端处理。
• 总的来说， Vue complier 是将 template 转化成⼀个 render 字符串。
  可以简单理解成以下步骤：
• parse 过程，将 template 利⽤正则转化成 AST 抽象语法树。
• optimize 过程，标记静态节点，后 diff 过程跳过静态节点，提升性能。
• generate 过程，⽣成 render 字符串

22 怎么快速定位哪个组件出现性能问题

⽤ timeline ⼯具。 ⼤意是通过 timeline 来查看每个函数的调⽤时常，定位出哪个函数的问题，从⽽能判断哪个组件出了问题