前端vue 高新企业必备面试真题（60道）---带答案（20220414）

vue 是一个兴起的前端 js 库，是一个精简的 MVVM。从技术角度讲，Vue.js 专注于 MVVM模型的 ViewModel 层。它通过双向数据绑定把 View 层和 Model 层连接了起来，通过对数据的操作就可以完成对页面视图的渲染。当然还有很多其他的 mvmm 框架如 Angular，react 都是大同小异，本质上都是基于 MVVM 的理念，然而 vue 以他独特的优势简单，快速，组合，紧凑，强大而迅速崛起

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 完全分离开来了

3.4）对数据进行操作不再需要引用相应的 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 数据双向绑定的原理是什么?（必会）

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

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

1、需要 observe 的数据对象进行递归遍历，包括子属性对象的属性，都加上 setter 和 getter，这样的话，给这个对象的某个值赋值，就会触发 setter，那么就能监听到了数据变化

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

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

新视图

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

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

3.2）自身必须有一个 update()方法

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

由于数据更改导致的虚拟 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.1 引入第三方 new vue 定义为 eventBus

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

11、Vue 组件 data 为什么必须是函数（必会）

1、个组件都是 Vue 的实例

2、组件共享 data 属性，当 data 的值是同一个引用类型的值时，改变其中一个会影响其他

3、组件中的 data 写成一个函数，数据以函数返回值形式定义，这样每复用一次组件，就

会返回一份新的 data，类似于给每个组件实例创建一个私有的数据空间，让各个组件实例维护

各自的数据。而单纯的写成对象形式，就使得所有组件实例共用了一份 data，就会造成一个变

了全都会变的结果

12、讲一下组件的命名规范（必会）

给组件命名有两种方式，一种是使用链式命名 my-component，一种是使用大驼峰命名 MyComponent 在字符串模板中<my-component></my-component> 和

<MyComponent></MyComponent>都可以使用，在非字符串模板中最好使用

<MyComponent></MyComponent>，因为要遵循 W3C 规范中的自定义组件名 (字母全小写且

必须包含一个连字符)，避免和当前以及未来的 HTML 元素相冲突

13、怎么在组件中监听路由参数的变化？（必会）

有两种方法可以监听路由参数的变化，但是只能用在包含<router-view />的组件内。

第一种

watch: {

'$route'(to, from) {

// 在此处监听

},

},

第二种

beforeRouteUpdate (to, from, next) {

//这里监听

}

14、怎么捕获 Vue 组件的错误信息？（必会）

1、errorCaptured 是组件内部钩子，当捕获一个来自子孙组件的错误时被调用，接收error、vm、info 三个参数，return false 后可以阻止错误继续向上抛出

2、errorHandler 为全局钩子，使用 Vue.config.errorHandler 配置，接收参数与 errorCaptured 一致，2.6 后可捕捉 v-on 与 promise 链的错误，可用于统一错误处理与错误兜底

15、Vue 组件里的定时器要怎么销毁？（必会）

如果页面上有很多定时器，可以在 data 选项中创建一个对象 timer，给每个定时器取个名

字一一映射在对象 timer 中，在 beforeDestroy 构造函数中

for(let k in this.timer){clearInterval(k)}；

如果页面只有单个定时器，可以这么做

const timer = setInterval(() =>{}, 500);

this.$once('hook:beforeDestroy', () => {

clearInterval(timer);

})

16、Vue-cli 用自定义的组件？有遇到过哪些问题吗？（必

会）

1、在 components 目录新建你的组件文件（indexPage.vue），script 一定要

最低0.47元/天解锁文章

一染星辰

关注

4
点赞
踩
38

收藏

觉得还不错? 一键收藏
1
评论
前端vue 高新企业必备面试真题（60道）---带答案（20220414）

目录1、Vue 的最大的优势是什么？（必会）Vue 的优势：2、Vue 和 jQuery 两者之间的区别是什么？（必会）1、jQuery 介绍：2、vue 介绍：3、vue 和 jQuery 区别：1.2）MVC 基本定义2、使用场景3、两者之间的区别4、Vue 数据双向绑定的原理是什么?（必会）Object.defineProperty 和 Proxy 的区别如下:6、Vue 生命周期总共分为几个阶段？（必会）7、第一次加载页面会触发哪几个钩子函数？（必
复制链接

扫一扫