黑马程序员技术交流社区

标题: 梳理Vue常考面试题 [打印本页]

---

作者: poetry    时间: 2020-8-14 08:59
标题: 梳理Vue常考面试题

1 对于MVVM的理解

MVVM是Model-View-ViewModel缩写，也就是把MVC中的Controller演变成ViewModel。Model层代表数据模型，View代表UI组件，ViewModel是View和Model层的桥梁，数据会绑定到viewModel层并自动将数据渲染到页面中，视图变化的时候会通知viewModel层更新数据。

• MVVM 是 Model-View-ViewModel 的缩写
• Model: 代表数据模型，也可以在Model中定义数据修改和操作的业务逻辑。我们可以把Model称为数据层，因为它仅仅关注数据本身，不关心任何行为
• View: 用户操作界面。当ViewModel对Model进行更新的时候，会通过数据绑定更新到View
• ViewModel： 业务逻辑层，View需要什么数据，ViewModel要提供这个数据；View有某些操作，ViewModel就要响应这些操作，所以可以说它是Model for View.
• 总结： MVVM模式简化了界面与业务的依赖，解决了数据频繁更新。MVVM 在使用当中，利用双向绑定技术，使得 Model 变化时，ViewModel 会自动更新，而 ViewModel 变化时，View 也会自动变化。
  

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

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

生命周期是什么

Vue 实例有一个完整的生命周期，也就是从开始创建、初始化数据、编译模版、挂载Dom -> 渲染、更新 -> 渲染、卸载等一系列过程，我们称这是Vue的生命周期

各个生命周期的作用

[td]

生命周期	描述
beforeCreate	组件实例被创建之初，组件的属性生效之前
created	组件实例已经完全创建，属性也绑定，但真实dom还没有生成，$el还不可用
beforeMount	在挂载开始之前被调用：相关的 render 函数首次被调用
mounted	el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子
beforeUpdate	组件数据更新之前调用，发生在虚拟 DOM 打补丁之前
update	组件数据更新之后
activited	keep-alive专属，组件被激活时调用
deadctivated	keep-alive专属，组件被销毁时调用
beforeDestory	组件销毁前调用
destoryed	组件销毁后调用

image

由于Vue会在初始化实例时对属性执行getter/setter转化，所以属性必须在data对象上存在才能让Vue将它转换为响应式的。Vue提供了$set方法用来触发视图更新

• [color=rgba(0, 0, 0, 0.3)]ounter(line
• [color=rgba(0, 0, 0, 0.3)]ounter(line
• [color=rgba(0, 0, 0, 0.3)]ounter(line
• [color=rgba(0, 0, 0, 0.3)]ounter(line
• [color=rgba(0, 0, 0, 0.3)]ounter(line
• [color=rgba(0, 0, 0, 0.3)]ounter(line
• [color=rgba(0, 0, 0, 0.3)]ounter(line
• [color=rgba(0, 0, 0, 0.3)]ounter(line
• [color=rgba(0, 0, 0, 0.3)]ounter(line
• [color=rgba(0, 0, 0, 0.3)]ounter(line
• [color=rgba(0, 0, 0, 0.3)]ounter(line
• [color=rgba(0, 0, 0, 0.3)]ounter(line
• [color=rgba(0, 0, 0, 0.3)]ounter(line
  

export default {    data(){        return {            obj: {                name: 'fei'            }        }    },    mounted(){        this.$set(this.obj, 'sex', 'man')    }
}

什么是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模式：history采用HTML5的新特性；且提供了两个新方法： pushState()， replaceState()可以对浏览器历史记录栈进行修改，以及popState事件的监听到状态变更
  

5 vue路由的钩子函数

首页可以控制导航跳转，beforeEach，afterEach等，一般用于页面title的修改。一些需要登录才能调整页面的重定向功能。

• beforeEach主要有3个参数to，from，next。
• to：route即将进入的目标路由对象。
• from：route当前导航正要离开的路由。
• next：function一定要调用该方法resolve这个钩子。执行效果依赖next方法的调用参数。可以控制网页的跳转
  

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

• 只用来读取的状态集中放在store中； 改变状态的方式是提交mutations，这是个同步的事物； 异步逻辑应该封装在action中。
• 在main.js引入store，注入。新建了一个目录store，… export
• 场景有：单页应用中，组件之间的状态、音乐播放、登录状态、加入购物车
  

image

• state：Vuex 使用单一状态树,即每个应用将仅仅包含一个store 实例，但单一状态树和模块化并不冲突。存放的数据状态，不可以直接修改里面的数据。
• mutations：mutations定义的方法动态修改Vuex 的 store 中的状态或数据
• getters：类似vue的计算属性，主要用来过滤一些数据。
• action：actions可以理解为通过将mutations里面处里数据的方法变成可异步的处理数据的方法，简单的说就是异步操作数据。view 层通过 store.dispath 来分发 action
  

image

modules：项目特别复杂的时候，可以让每一个模块拥有自己的state、mutation、action、getters，使得结构非常清晰，方便管理

image7 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>的作用是什么?

keep-alive可以实现组件缓存，当组件切换时不会对当前组件进行卸载

• <keep-alive></keep-alive> 包裹动态组件时，会缓存不活动的组件实例,主要用于保留组件状态或避免重新渲染
  

比如有一个列表和一个详情，那么用户就会经常执行打开详情=>返回列表=>打开详情…这样的话列表和详情都是一个频率很高的页面，那么就可以对列表组件使用<keep-alive></keep-alive>进行缓存，这样用户每次返回列表的时候，都能从缓存中快速渲染，而不是重新渲染

• 常用的两个属性include/exclude，允许组件有条件的进行缓存
• 两个生命周期activated/deactivated，用来得知当前组件是否处于活跃状态
  

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 资源包的命令：
  

• [color=rgba(0, 0, 0, 0.3)]ounter(line
  

npm install

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

• [color=rgba(0, 0, 0, 0.3)]ounter(line
  

npm run dev

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

• [color=rgba(0, 0, 0, 0.3)]ounter(line
  

npm run build

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

• [color=rgba(0, 0, 0, 0.3)]ounter(line
  

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 路由之间跳转？

声明式（标签跳转）

• [color=rgba(0, 0, 0, 0.3)]ounter(line
  

<router-link :to="index">

编程式（ js跳转）

• [color=rgba(0, 0, 0, 0.3)]ounter(line
  

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 的值是同一个引用类型的值时，改变其中一个会影响其他
  

完整版在线阅读 https://poetries1.gitee.io/fe-interview

---

欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2