Vue 常见面试题(一)

目录

1、Vue 的最大的优势是什么？（必会）

2、Vue 和 jQuery 两者之间的区别是什么？（必会）

3、MVVM 和 MVC 区别是什么？哪些场景适合？（必会）

1、基本定义

2、使用场景

3、两者之间的区别

4、Vue 数据双向绑定的原理是什么?（必会）

5、Object.defineProperty 和 Proxy 的区别（必会）

6、Vue 生命周期总共分为几个阶段？（必会）

7、第一次加载页面会触发哪几个钩子函数？（必会）

8、请说下封装 Vue 组件的过程？（必会）

9、Vue 组件如何进行传值的? （必会）

10、组件中写 name 选项有什么作用？（必会）

---

1、Vue 的最大的优势是什么？（必会）

Vue 作为一款轻量级框架、简单易学、双向数据绑定、组件化、数据和结构的分离、虚拟

DOM、运行速度快，并且作者是中国人尤雨溪，对应的 API 文档对国内开发者优化，作为前端开

发人员的首选入门框架

Vue 的优势：

1、Vue.js 可以进行组件化开发，使代码编写量大大减少，读者更加易于理解。

2、Vue.js 最突出的优势在于可以对数据进行双向绑定。

3、使用 Vue.js 编写出来的界面效果本身就是响应式的，这使网页在各种设备上都能

显示出非常好看的效果。

4、相比传统的页面通过超链接实现页面的切换和跳转，Vue 使用路由不会刷新页面。

5、vue 是单页面应用，使页面局部刷新，不用每次跳转页面都要请求所有数据和 dom，

这样大大加快了访问速度和提升用户体验。

6、而且他的第三方 UI 组件库使用起来节省很多开发时间，从而提升开发效率。

2、Vue 和 jQuery 两者之间的区别是什么？（必会）

1、jQuery 介绍：

jQuery 曾经也是现在依然最流行的 web 前端 js 库，可是现在无论是国内还是国外他的使用

率正在渐渐被其他的 js 库所代替，随着浏览器厂商对 HTML5 规范统一遵循以及 ECMA6 在浏览器

端的实现，jQuery 的使用率将会越来越低

3、vue 和 jQuery 区别：

3.1）vue 和 jQuery 对比 jQuery 是使用选择器（）选取 DOM 对象，对其进行赋值、取值、

事件绑定等操作，其实和原生的 HTML 的区别只在于可以更方便的选取和操作 DOM 对象，而数

据和界面是在一起的

3.2）比如需要获取 label 标签的内容：）选取 DOM 对象，对其进行赋值、取值、事件绑

定等操作，其实和原生的 HTML 的区别只在于可以更方便的选取和操作 DOM 对象，而数据和界

面是在一起的

3.3）比如需要获取 label 标签的内容：(“lable”).val();,它还是依赖 DOM 元素的值。 Vue

则是通过 Vue 对象将数据和 View 完全分离开来了 对数据进行操作不再需要引用相应的 DOM 对象，可以说数据和 View 是分离的，

他们通过 Vue 对象这个 vm 实现相互的绑定，这就是传说中的 MVVM

3、MVVM 和 MVC 区别是什么？哪些场景适合？（必会）

1、基本定义

1.1）MVVM 基本定义

MVVM 即 Model-View-ViewModel 的简写，即模型-视图-视图模型，模型（Model）指

的是后端传递的数据，视图(View)指的是所看到的页面，视图模型(ViewModel)是 mvvm 模式的核

心，它是连接 view 和 model 的桥梁。它有两个方向：

1.1.1）一是将模型（Model）转化成视图(View)，即将后端传递的数据转化成所看到的

页面，实现的方式是：数据绑定，

1.1.2）二是将视图(View)转化成模型(Model)，即将所看到的页面转化成后端的数据。

实现的方式是：DOM 事件监听，这两个方向都实现的，我们称之为数据的双向绑定

1.2）MVC 基本定义

MVC 是 Model-View- Controller 的简写。即模型-视图-控制器。M 和 V 指的意思和

MVVM 中的 M 和 V 意思一样。C 即 Controller 指的是页面业务逻辑，使用 MVC 的目的就是将 M

和 V 的代码分离。MVC 是单向通信。也就是 View 跟 Model，必须通过 Controller 来承上启下

2、使用场景

主要就是 MVC 中 Controller 演变成 MVVM 中的 viewModel，MVVM 主要解决了 MVC 中

大量的 DOM 操作使页面渲染性能降低，加载速度变慢，影响用户体验，vue 数据驱动，通过数

据来显示视图层而不是节点操作， 场景：数据操作比较多的场景，需要大量操作 DOM 元素时，

采用 MVVM 的开发方式，会更加便捷，让开发者更多的精力放在数据的变化上，解放繁琐的操

作 DOM 元素

3、两者之间的区别

MVC 和 MVVM 其实区别并不大，都是一种设计思想，MVC 和 MVVM 的区别并不是 VM

完全取代了 C，只是在 MVC 的基础上增加了一层 VM，只不过是弱化了 C 的概念，ViewModel

存在目的在于抽离 Controller 中展示的业务逻辑，而不是替代 Controller，其它视图操作业务等还

是应该放在 Controller 中实现，也就是说 MVVM 实现的是业务逻辑组件的重用，使开发更高效，

结构更清晰，增加代码的复用性

4、Vue 数据双向绑定的原理是什么?（必会）

V ue.js 是采用数据劫持结合发布者-订阅者模式的方式，通过 Object.defineProperty()来劫持

各个属性的 setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调。

1、需要 observe 的数据对象进行递归遍历，包括子属性对象的属性，都加上 setter 和 getter，

这样的话，给这个对象的某个值赋值，就会触发 setter，那么就能监听到了数据变化

2、compile 解析模板指令，将模板中的变量替换成数据，然后初始化渲染页面视图，并将每

个指令对应的节点绑定更新函数，添加监听数据的订阅者，一旦数据有变动，收到通知，更新视

图

3、Watcher 订阅者是 Observer 和 Compile 之间通信的桥梁，主要做的事情是:

3.1）在自身实例化时往属性订阅器(dep)里面添加自己

3.3）待属性变动 dep.notice()通知时，能调用自身的 update()方法，并触发 Compile 中

绑定的回调，则功成身退。

4、MVVM 作为数据绑定的入口，整合 Observer、Compile 和 Watcher 三者，通 Observer 来监

听自己的 model 数据变化，通过 Compile 来解析编译模板指令，最终利用 Watcher 搭起 Observer

和 Compile 之间的通信桥梁，达到数据变化 -> 视图更新；视图交互变化(input) -> 数据 model

变更的双向绑定效果

5、Object.defineProperty 和 Proxy 的区别（必会）

Object.defineProperty 和 Proxy 的区别如下:

1、Proxy 可以直接监听对象而非属性；

2、Proxy 可以直接监听数组的变化；

3、Proxy 有多达 13 种拦截方法,不限于 apply、ownKeys、deleteProperty、has 等等是

Object.defineProperty 不具备的

4、Proxy 返回的是一个新对象,我们可以只操作新的对象达到目的,而

Object.defineProperty 只能遍历对象属性直接修改

5、Proxy 作为新标准将受到浏览器厂商重点持续的性能优化，也就是传说中的新标准的

性能红利

6 、 Object.defineProperty 兼容性好，支持 IE9，而 Proxy 的存在浏览器兼容性问题,而且

无法用 polyfill 磨平，因此 Vue 的作者才声明需要等到下个大版本( 3.0 )才能用 Proxy 重写

6、Vue 生命周期总共分为几个阶段？（必会）

Vue 实例从创建到销毁的过程，就是生命周期。也就是从开始创建、初始化数据、编译模

板、挂载 Dom→渲染、更新→渲染、卸载等一系列过程，我们称这是 Vue 的生命周期。

1、beforeCreate

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

2、created

在实例创建完成后被立即调用。在这一步，实例已完成以下的配置：数据观测 (data

observer)属性和方法的运算，watch/event 事件回调。然而，挂载阶段还没开始，$el 属性目前不

可见

3、beforeMount

在挂载开始之前被调用：相关的 render 函数首次被调用

4、mounted

el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子，如果 root 实例挂载了一

个文档内元素，当 mounted 被调用时 vm.$el 也在文档内

5、beforeUpdate

数据更新时调用，发生在虚拟 DOM 打补丁之前。这里适合在更新之前访问现有的 DOM，

比如手动移除已添加的事件监听器，该钩子在服务器端渲染期间不被调用，因为只有初次渲染会

在服务端进行

6、updated

北京市顺义区京顺路 99 号·黑马程序员 www.itheima.com

第 222 页 共 348 页 由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子

7、activated

keep-alive 组件激活时调用。该钩子在服务器端渲染期间不被调用

8、deactivated

keep-alive 组件停用时调用。该钩子在服务器端渲染期间不被调用

9、beforeDestroy

实例销毁之前调用。在这一步，实例仍然完全可用。该钩子在服务器端渲染期间不被

调用

10、destroyed

Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监

听器会被移除，所有的子实例也会被销毁。该钩子在服务器端渲染期间不被调用

11、errorCaptured（2.5.0+ 新增）

当捕获一个来自子孙组件的错误时被调用。此钩子会收到三个参数：错误对象、发生

错误的组件实例以及一个包含错误来源信息的字符串，此钩子可以返回 false 以阻止该错误继续

向上传播

7、第一次加载页面会触发哪几个钩子函数？（必会）

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

数

8、请说下封装 Vue 组件的过程？（必会）

首先，组件可以提升整个项目的开发效率。能够把页面抽象成多个相对独立的模块，解决

了我们传统项目开发：效率低、难维护、复用性等问题

1、分析需求：确定业务需求，把页面中可以服用的结构，样式以及功能，单独抽离成一个

文件，实现复用

2、具体步骤：使用 Vue.extend 方法创建一个组件，然后使用 Vue.component 方法注册组件，

子组件需要数据，可以在 props 中接受定义，而子组件修改好数据后，想把数据传递给父组件，

可以采用$emit 方法

9、Vue 组件如何进行传值的? （必会）

1、父组件向子组件传递数据

父组件内设置要传的数据，在父组件中引用的子组件上绑定一个自定义属性并把数据

绑定在自定义属性上，在子组件添加参数 props 接收即可

2、子组件向父组件传递数据

子组件通过 vue 实例方法$emit 进行触发并且可以携带参数，父组件监听使用@（v-on）

进行监听，然后进行方法处理

3、非父子组件之间传递数据

3.2）在组件中 created 中订阅方法 eventBus.$on("自定义事件名",methods 中的方法名)

3.3) 在另一个兄弟组件中的 methods 中写函数，在函数中发布 eventBus 订阅的方法

eventBus.$emit("自定义事件名”)

3.4) 在组件的 template 中绑定事件(比如 click)

10、组件中写 name 选项有什么作用？（必会）

1、项目使用 keep-alive 时，可搭配组件 name 进行缓存过滤

2、DOM 做递归组件时需要调用自身 name

3、vue-devtools 调试工具里显示的组见名称是由 vue 中组件 name 决定的