VUE面试题汇总（九）

VUE面试题汇总（五）

VUE面试题汇总（六）

VUE面试题汇总（七）

VUE面试题汇总（八）

81. vue-router 路由的两种模式

参考答案：

hash history

82. history 路由模式与后台的配合

参考答案：

参考

83. vue路由实现原理? 或 vue-router原理?

参考答案：

说简单点，vue-router的原理就是通过对URL地址变化的监听，继而对不同的组件进行渲染。

每当URL地址改变时，就对相应的组件进行渲染。原理是很简单，实现方式可能有点复杂，主要有hash模式和history模式。

如果想了解得详细点，建议百度或者阅读源码。

参与互动

84. 什么是 MVVM？

参考答案：

1. 拆分说明（M，V，VM 都是干啥的）

2. 之间联系（Model 和 ViewModel 的双向数据绑定）

解析：

MVVM 是 Model-View-ViewModel 的缩写。MVVM 是一种设计思想。Model 层代表数据模型，也可以在 Model 中定义数据修改和操作的业务逻辑；View 代表 UI 组件，它负责将数据模型转化成 UI 展现出来，ViewModel 是一个同步 View 和 Model 的对象（桥梁）。

在 MVVM 架构下，View 和 Model 之间并没有直接的联系，而是通过 ViewModel 进行交互，Model 和 ViewModel 之间的交互是双向的， 因此 View 数据的变化会同步到 Model 中，而 Model 数据的变化也会立即反应到 View 上。

ViewModel 通过双向数据绑定把 View 层和 Model 层连接了起来，而 View 和 Model 之间的同步工作完全是自动的，无需人为干涉，因此开发者只需关注业务逻辑，不需要手动操作 DOM, 不需要关注数据状态的同步问题，复杂的数据状态维护完全由 MVVM 来统一管理。

85. MVC、MVP 与 MVVM 模式

参考答案：

一、MVC

通信方式如下

1. 视图（View）：用户界面。 传送指令到 Controller

2. 控制器（Controller）：业务逻辑 完成业务逻辑后，要求 Model 改变状态

3. 模型（Model）：数据保存 将新的数据发送到 View，用户得到反馈

二、MVP

通信方式如下

1. 各部分之间的通信，都是双向的。

2. View 与 Model 不发生联系，都通过 Presenter 传递。

3. View 非常薄，不部署任何业务逻辑，称为"被动视图"（Passive View），即没有任何主动性，而 Presenter 非常厚，所有逻辑都部署在那里。

三、MVVM

MVVM 模式将 Presenter 改名为 ViewModel，基本上与 MVP 模式完全一致。通信方式如下

唯一的区别是，它采用双向绑定（data-binding）：View 的变动，自动反映在 ViewModel，反之亦然。

86. 常见的实现 MVVM 几种方式

参考答案：

1.发布-订阅者模式(backbone.js) 最早的mvvm框架

一般通过pub、sub的方式来实现数据和视图的绑定 使用起来比较麻烦

2.脏值检查(angular.js)

用定时器轮训检测数据是否发生改变 性能低

3.(vue用什么方式实现的数据绑定?)

数据劫持 Object.defineProperty给对象的属性增加修饰符来劫持各个属性的setter getter(获取值和设置值的时候 你都能知道

然后就可以修改页面的视图了) 此外还结合了发布订阅模式 把所有订阅 指定 统一做更新的处理

IE8以下不支持 Object.defineProperty这个属性的 所以vue只兼容到ie9

87. 解释下 Object. defineProperty()方法

参考答案：

这是 js 中一个非常重要的方法，ES6 中某些方法的实现依赖于它，VUE 通过它实现双向绑定，此方法会直接在一个对象上定义一个新属性，或者修改一个已经存在的属性， 并返回这个对象

解析：

语法

---

Object. defineProperty(object, attribute, descriptor)

• 这三个参数都是必输项

• 第一个参数为 目标对象

• 第二个参数为 需要定义的属性或者方法

• 第三个参数为 目标属性所拥有的特性

descriptor

---

前两个参数都很明确，重点是第三个参数 descriptor， 它有以下取值

• value: 属性的值

• writable: 属性的值是否可被重写（默认为 false）

• configurable: 总开关，是否可配置，若为 false, 则其他都为 false（默认为 false）

• enumerable: 属性是否可被枚举（默认为 false）

• get: 获取该属性的值时调用

• set: 重写该属性的值时调用

一个例子

var a = {};

Object.defineProperty(a, “b”, {

value: 123

});

console.log(a.b); //123

a.b = 456;

console.log(a.b); //123

a.c = 110;

for (item in a) {

console.log(item, a[item]); //c 110

}

因为 writable 和 enumerable 默认值为 false, 所以对 a. b 赋值无效，也无法遍历它

configurable

---

总开关，是否可配置，设置为 false 后，就不能再设置了，否则报错， 例子

var a = {};

Object.defineProperty(a, “b”, {

configurable: false

});

Object.defineProperty(a, “b”, {

configurable: true

});

//error: Uncaught TypeError: Cannot redefine property: b

文末

从转行到现在，差不多两年的时间，虽不能和大佬相比，但也是学了很多东西。我个人在学习的过程中，习惯简单做做笔记，方便自己复习的时候能够快速理解，现在将自己的笔记分享出来，和大家共同学习。

个人将这段时间所学的知识，分为三个阶段：

第一阶段：HTML&CSS&JavaScript基础

第二阶段:移动端开发技术

第三阶段:前端常用框架

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

• 推荐学习方式：针对某个知识点，可以先简单过一下我的笔记，如果理解，那是最好，可以帮助快速解决问题；

• 大厂的面试难在，针对一个基础知识点，比如JS的事件循环机制，不会上来就问概念，而是换个角度，从题目入手，看你是否真正掌握。所以对于概念的理解真的很重要。