往期点这里:↓
VUE面试题汇总(一)
VUE面试题汇总(二)
VUE面试题汇总(三)
VUE面试题汇总(四)
VUE面试题汇总(五)
VUE面试题汇总(六)
VUE面试题汇总(七)
VUE面试题汇总(八)
81. vue-router 路由的两种模式
参考答案:
hash
history
82. history 路由模式与后台的配合
参考答案:
参考
83. vue路由实现原理? 或 vue-router原理?
参考答案:
说简单点,vue-router的原理就是通过对URL地址变化的监听,继而对不同的组件进行渲染。
每当URL地址改变时,就对相应的组件进行渲染。原理是很简单,实现方式可能有点复杂,主要有hash模式和history模式。
如果想了解得详细点,建议百度或者阅读源码。
84. 什么是 MVVM?
参考答案:
- 拆分说明(M,V,VM 都是干啥的)
- 之间联系(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
通信方式如下
-
视图(View):用户界面。 传送指令到 Controller
-
控制器(Controller):业务逻辑 完成业务逻辑后,要求 Model 改变状态
-
模型(Model):数据保存 将新的数据发送到 View,用户得到反馈
二、MVP
通信方式如下
-
各部分之间的通信,都是双向的。
-
View 与 Model 不发生联系,都通过 Presenter 传递。
-
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
writable
是否可重写
var a = {};
Object.defineProperty(a, "b", {
value: 123,
writable: false
});
console.log(a.b); // 打印 123
a.b = 25; // 没有错误抛出(在严格模式下会抛出,即使之前已经有相同的值)
console.log(a.b); // 打印 123, 赋值不起作用。
enumerable
属性特性 enumerable 定义了对象的属性是否可以在 for… in 循环和 Object. keys() 中被枚举
var a = {};
Object.defineProperty(a, "b", {
value: 3445,
enumerable: true
});
console.log(Object.keys(a)); // 打印["b"]
enumerable 改为 false
var a = {};
Object.defineProperty(a, "b", {
value: 3445,
enumerable: false //注意咯这里改了
});
console.log(Object.keys(a)); // 打印[]
set 和 get
如果设置了 set 或 get, 就不能设置 writable 和 value 中的任何一个,否则报错
var a = {};
Object.defineProperty(a, "abc", {
value: 123,
get: function() {
return value;
}
});
//Uncaught TypeError: Invalid property descriptor. Cannot both specify accessors and a value or writable attribute, #<Object> at Function.defineProperty
对目标对象的目标属性 赋值和取值 时, 分别触发 set 和 get 方法
var a = {};
var b = 1;
Object.defineProperty(a, "b", {
set: function(newValue) {
b = 99;
console.log("你要赋值给我,我的新值是" + newValue);
},
get: function() {
console.log("你取我的值");
return 2; //注意这里,我硬编码返回2
}
});
a.b = 1; //打印 你要赋值给我,我的新值是1
console.log(b); //打印 99
console.log(a.b); //打印 你取我的值
//打印 2 注意这里,和我的硬编码相同的
上面的代码中,给 a. b 赋值,b 的值也跟着改变了。原因是给 a. b 赋值,自动调用了 set 方法,在 set 方法中改变了 b 的值。vue 双向绑定的原理就是这个。
扩展:参考
88. 实现一个自己的 MVVM(原理剖析)
参考答案:
参考
89. 递归组件的使用
参考答案:
组件是可以在自己的模板中调用自身的,不过他们只能通过name选项来做这件事
解析:
参考
90. Obj. keys()与 Obj. defineProperty
参考答案: