2023高薪前端面试题（三、前端进阶——Vue）

iaz999

已于 2023-08-16 23:16:32 修改

阅读量1.4k

点赞数

分类专栏：前端面试题文章标签：前端 vue.js javascript

于 2023-05-16 00:04:12 首次发布

本文链接：https://blog.csdn.net/iaz999/article/details/130652208

版权

本文详细介绍了Vue.js的核心特性，包括数据驱动的MVVM模式、组件化开发以及指令系统。阐述了Vue与传统jQuery开发的区别，指出Vue通过数据绑定简化了DOM操作。此外，文章深入探讨了Vue的生命周期，对比了MVC和MVVM模式，并分析了Vue组件间的通信方式。文章还讨论了Vue的v-if、v-show指令以及Vue的响应式原理，最后提到了Vue 2.x和3.x在响应式数据处理上的改进，包括Proxy的使用以及性能优化策略。

摘要由CSDN通过智能技术生成

Vue 运行机制，全局流程图

Vue.js 运行机制全局概览 · 剖析 Vue.js 内部运行机制 · 看云

Vue为什么出现？解决了什么问题？Vue跟传统开发的区别？

1、如果使用传统开发模式 jQuery + Ajax + 模板引擎：

（jQuery是一个封装了原生JS常用的功能代码JavaScript库）

前端程序员需要手动拼接模板字符串，然后手动操作DOM元素，把拼接出来的模板字符串，添加到页面指定区域；

所以，如果使用传统的开发模式，在公司中，主要的工作就是获取数据、拼接数据、append到页面上，同时，还要处理一部分的前端业务逻辑。

总结：

传统的开发模式下，前端开发人员，除了要关心前端的业务逻辑，更多的是在操作DOM。

考虑：前端能不能只关心业务，尽量不去操作DOM元素呢？（操作DOM的工作没有任何含金量的）

为了实现以上的需求，就需要用到前端的MVVM设计思想了。

2、总结：

Vue所有的界面事件，都是只去操作数据的，Jquery操作DOM
Vue所有界面的变动，都是根据数据自动绑定出来的，Jquery操作DOM

说说你对vue的理解?

Vue 是一个构建数据驱动的渐进式JavaScript框架，它的目标是通过 API 实现响应数据绑定和视图更新。是一个创建单页应用的Web应用框架。

特点：

易用，灵活，高效，20kb运行大小，超快虚拟DOM。

Vue核心特性

数据驱动（MVVM)

首先，MVVM是前端的概念，MVC是后端的；MVVM把前端中的没一个页面，都分成了三部分：

MVVM表示的是 Model-View-ViewModel

`Model（模型）`

模型是指代表真实状态内容的领域模型（面向对象），或指代表内容的数据访问层（以数据为中心）。

`View（视图）`

就像在MVC和MVP模式中一样，视图是用户在屏幕上看到的结构、布局和外观（UI）。

`ViewModel（视图模型）`

视图模型层，即VM调度者，用来连接Model和View，是Model和View之间的通信桥梁。优点: 低耦合 :View可以独立于Model变化和修改,一个ViewModel可以绑定到不同的View上,当View变化的时候Model可以不变,当Model变化的时候View也可以不变。可重用性 : 可以把一些视图逻辑放在一个ViewModel里面,让很多View重用这段视图逻辑。独立开发 : 开发人员可以专注于业务逻辑和数据的开发,设计人员可以专注于页面的设计。

Model：模型层，负责处理业务逻辑以及和服务器端进行交互
View：视图层：负责将数据模型转化为UI展示出来，可以简单的理解为HTML页面
ViewModel：视图模型层，即VM调度者，用来连接Model和View，是Model和View之间的通信桥梁

这时候需要一张直观的关系图，如下

在MVVM框架下视图和模型是不能直接通信的，只能通过ViewModel进行交互，它能够监听到数据的变化，然后通知视图进行自动更新，而当用户操作视图时，VM也能监听到视图的变化，然后通知数据做相应改动，这实际上就实现了数据的双向绑定。并且V和VM可以进行通信。

VM的好处：解放了程序员，不用操作DOM，只需要关心业务逻辑就可以了

组件化

1.什么是组件化

一句话来说就是把图形、非图形的各种逻辑均抽象为一个统一的概念（组件）来实现开发的模式，在Vue中每一个.vue文件都可以视为一个组件

2.组件化的优势

降低整个系统的耦合度，在保持接口不变的情况下，我们可以替换不同的组件快速完成需求，例如输入框，可以替换为日历、时间、范围等组件作具体的实现
调试方便，由于整个系统是通过组件组合起来的，在出现问题的时候，可以用排除法直接移除组件，或者根据报错的组件快速定位问题，之所以能够快速定位，是因为每个组件之间低耦合，职责单一，所以逻辑会比分析整个系统要简单
提高可维护性，由于每个组件的职责单一，并且组件在系统中是被复用的，所以对代码进行优化可获得系统的整体升级

指令系统

解释：指令 (Directives) 是带有 v- 前缀的特殊属性作用：当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM

常用的内置指令
- 条件渲染指令 v-if
- 列表渲染指令v-for
- 属性绑定指令v-bind
- 事件绑定指令v-on
- 双向数据绑定指令v-model

没有指令之前我们是怎么做的？是不是先要获取到DOM然后再....干点啥

什么是MVC?

MVC是应用最广泛的软件架构之一,一般MVC分为:Model(模型),View(视图),Controller(控制器)。这主要是基于分层的目的,让彼此的职责分开.View一般用过Controller来和Model进行联系。Controller是Model和View的协调者,View和Model不直接联系。基本都是单向联系。M和V指的意思和MVVM中的M和V意思一样。C即Controller指的是页面业务逻辑。MVC是单向通信。也就是View跟Model，必须通过Controller来承上启下。

Model（模型）表示应用程序核心（如数据库）。

View（视图）显示效果（HTML页面）。

Controller（控制器）处理输入（业务逻辑）。

MVC 模式同时提供了对 HTML、CSS 和 JavaScript 的完全控制。

Model（模型）是应用程序中用于处理应用程序数据逻辑的部分。　　

通常模型对象负责在数据库中存取数据。

View（视图）是应用程序中处理数据显示的部分。　　

通常视图是依据模型数据创建的。

Controller（控制器）是应用程序中处理用户交互的部分。　　

通常控制器负责从视图读取数据，控制用户输入，并向模型发送数据。

优点:

低耦合
重用性高
生命周期成本低
部署快
可维护性高
有利软件工程化管理

3. MVC与MVVM的区别:

MVC和MVVM的区别并不是VM完全取代了C，ViewModel存在目的在于抽离Controller中展示的业务逻辑，而不是替代Controller，其它视图操作业务等还是应该放在Controller中实现。也就是说MVVM实现的是业务逻辑组件的重用。

MVC中Controller演变成MVVM中的ViewModel
MVVM通过数据来显示视图层而不是节点操作
MVVM主要解决了MVC中大量的dom操作使页面渲染性能降低,加载速度变慢,影响用户体验

Vue和React对比

这里就做几个简单的类比吧，当然没有好坏之分，只是使用场景不同

相同点

都有组件化思想
都支持服务器端渲染
都有Virtual DOM（虚拟dom）
数据驱动视图
都有支持native的方案：Vue的weex、React的React native
都有自己的构建工具：Vue的vue-cli、React的Create React App

区别

数据变化的实现原理不同。react使用的是不可变数据，而Vue使用的是可变的数据
组件化通信的不同。react中我们通过使用回调函数来进行通信的，而Vue中子组件向父组件传递消息有两种方式：事件和回调函数
diff算法不同。react主要使用diff队列保存需要更新哪些DOM，得到patch树，再统一操作批量更新DOM。Vue 使用双向指针，边对比，边更新DOM

面试官：说说你对vue的理解? · Issue #1 · febobo/web-interview · GitHub

为什么data是一个函数而不是一个对象

根实例对象`data`

根实例对象data可以是对象也可以是函数（根实例是单例），不会产生数据污染情况

组件实例对象`data`

组件实例对象data必须为函数，目的是为了防止多个组件实例对象之间共用一个data，产生数据污染。采用函数的形式，initData时会将其作为工厂函数都会返回全新data对象

总结：

组件的data写成一个函数，数据以函数返回值形式定义，这样每复用一次组件，就会返回一分新的data，类似于给每个组件实例创建一个私有的数据空间，让各个组件实例维护各自的数据。而单纯的写成对象形式，就使得所有组件实例共用了一份data，就会造成一个变了全都会变的结果，即数据污染。

Vue组件通讯有哪些方式？

组件间通信的分类

父子组件之间的通信
兄弟组件之间的通信
祖孙与后代组件之间的通信
非关系组件间之间的通信

组件间通信的方案

1、props 和 $emit。父组件向子组件传递数据是通过props传递的，子组件传递给父组件是通过$emit触发事件来做到的。

2、$parent 和 $children 获取当前组件的父组件和当前组件的子组件。

3、$attrs 和 $listeners A -> B -> C。Vue2.4开始提供了$attrs和$listeners来解决这个问题。

4、父组件中通过 provide 来提供变量，然后在子组件中通过 inject 来注入变量。（官方不推荐在实际业务中适用，但是写组件库时很常用。）

5、$refs 获取组件实例。

6、envetBus 兄弟组件数据传递，这种情况下可以使用事件总线的方式。

7、vuex 状态管理

具体演示：

props：（父传子）

Father.vue 父组件通过属性将值传递给子组件

<Children :menu-title="title" />

Children.vue 子组件内部通过props接收传递过来的值

props: {
	menuTitle: String
}

$emit：（子传父）

Children.vue 子组件通过自定义事件向父组件传递信息

<button @click="setUser">传值</button>
data() {
    return {
		user: '子组件要传给父组件的值'
	}
},
methods: {
	setUser() {
		this.$emit('handle',this.user)
	}
}

Father.vue 父组件监听子组件的事件

< Children @handle="getUser" />
	data() {
		return {
			username: ''
		}
	},
	methods: {
		getUser(msg) {
			this.username = msg
		}
	}

ref

父组件在使用子组件的时候设置ref

父组件通过设置子组件ref来获取数据

父组件Father.vue

< Children ref="foo" />
this.$refs.foo // 获取组件实例，通过子组件实例我们就能拿到对应的数据

vuex

适用场景: 复杂关系的组件数据传递

Vuex作用相当于一个用来存储共享变量的容器

state用来存放共享变量的地方

getter，可以增加一个getter派生状态，(相当于store中的计算属性），用来获得共享变量的值

mutations用来存放修改state的方法。

actions也是用来存放修改state的方法，不过action是在mutations的基础上进行。常用来做一些异步操作

Vue组件间通信有哪些方式-Vue.js-PHP中文网

• Vue的生命周期方法有哪些？一般在哪一步发送请求？

参考回答：

钩子概念： vue从创建到销毁过程中，会执行的一些回调函数

生命周期就是vue从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、卸载等一系列过程，我们称这是 Vue 的生命周期；

分为四大步（创建，挂载，更新，销毁），

每一步又分为两小步，如beforeCreate，created。

1. 生命周期的四个阶段 :

初始化阶段: beforeCreate、 created

挂载阶段 : beforeMount、mounted

更新阶段 : beforeUpdate、updated

销毁阶段: beforeDestroy、destroyed

执行顺序

钩子函数

执行时机

beforeCreate(){}

vue实例创建了，但是el和data还没有创建

底层（初始化vue实例完成，props解析之后，初始化钩子函数，初始化一些事件和侦听器配置项），此时，

最低0.47元/天解锁文章

iaz999

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

2023高薪前端面试题（三、前端进阶——Vue）

Vue 运行机制，全局流程图

Vue为什么出现？解决了什么问题？Vue跟传统开发的区别？

1、如果使用传统开发模式 jQuery + Ajax + 模板引擎：

2、总结：

说说你对vue的理解?

特点：

Vue核心特性

数据驱动（MVVM)

Model（模型）

View（视图）

ViewModel（视图模型）

组件化

指令系统

什么是MVC?