Gausst松鼠会

这个屌丝很懒，什么也没留下！

热门标签

Vue 常见面试题(一)

作者：Gausst松鼠会 | 2024-03-23 10:51:24

踩

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 决定的

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/Gausst松鼠会/article/detail/294784