关于MVVM的面试问题

一.了解mvvm框架吗？

vue.js  react.js  angular.js

(一定要想好说哪个，后面的话题都会围绕该框架继续延伸)

 

二.谈谈你对MVVM的认识？

1.先说mvc：所有通信都是单向的：提交一次反馈一次，通信一次相互制约。

• 视图（View）：用户界面。（传送指令到 Controller）
• 控制器（Controller）：业务逻辑（完成业务逻辑后，要求 Model 改变状态）
• 模型（Model）：数据保存（将新的数据发送到 View，用户得到反）

MVC允许在不改变视图的情况下改变视图对用户输入的响应方式，用户对View的操作交给了Controller处理，在Controller中响应View的事件调用Model的接口对数据进行操作，一旦Model发生变化便通知相关视图进行更新。

2.MVVM定义

前后端分离：Model用纯JavaScript对象表示，View负责显示。

model：服务器的业务逻辑操作

view：用户界面

ViewModel：核心枢纽

过程：把view和model关联起来的就是View Model。

            ViewModel负责吧Model的数据同步到view显出来，还负责吧view修改同步到Model。

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

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

 

三.双向绑定是什么原理，能写出来吗？

大大减轻开发负担，自动化处理。

双向绑定：data和view之间的自动化处理

（ViewModel中的）data > view:正向Objest.defineProperty(ES5的js api)/reflect.defineProperty（ES6）。api能监听到这个data的变化，监听到变化后会有一个回调函数，回调函数里写清data和view关系。

view > data:input时间

Objest.defineProperty了解更多:MDN的Object.defineProperty()解析

Objest.defineProperty和reflect.defineProperty区别：

• Objest.defineProperty：返回一个新的对象
• reflect.defineProperty：返回一个布尔值

Objest.defineProperty要手写：

var obj = {
    test:"hello"
}
//对象已有的属性添加特性描述
Object.defineProperty(obj,"test",{
    configurable:true | false,
    enumerable:true | false,
    value:任意类型的值,
    writable:true | false
});

// 在对象中添加一个属性与存取描述符的示例
var bValue;
Object.defineProperty(obj,"newKey",{
    get : function(){
        return bValue;
    },
    set : function(newValue){
       bValue = newValue;
    },    
    configurable:true,
    enumerable:true,
});
obj.newKey = 38;
// 对象o拥有了属性b，值为38

• configurable 为 true 时，该属性描述符才能够被改变，同时该属性也能从对应的对象上被删除。默认为 false。
• enumerable为true时，该属性才能够出现在对象的枚举属性中。默认为 false。
• value属性对应的值。可以是任何有效的 JavaScript 值（数值，对象，函数等）。默认为 undefined。
• writable为true时，value才能被赋值运算符改变。默认为 false。

• get: 一个给属性提供 getter 的方法，如果没有 getter 则为 undefined。当访问该属性时，该方法会被执行，方法执行时没有参数传入，但是会传入this对象（由于继承关系，这里的this并不一定是定义该属性的对象）。默认为 undefined。

• set:一个给属性提供 setter 的方法，如果没有 setter 则为 undefined。当属性值修改时，触发执行该方法。该方法将接受唯一参数，即该属性新的参数值。默认为 undefined。

 

四.使用了什么设计模式？

• 实现一个数据监听器Observer，能够对数据对象的所有属性进行监听，如有变动可拿到最新值并通知订阅者（Dep）
• 实现一个指令解析器Compile，对每个元素节点的指令进行扫描和解析，根据指令模板替换数据，以及绑定相应的更新函数
• 实现一个Watcher，作为连接Observer和Compile的桥梁，能够订阅并收到每个属性变动的通知，执行指令绑定的相应回调函数，从而更新视图
• mvvm入口函数，整合以上三者

五.生命周期是什么？

以vue为例，贴一下官方的链接vue的生命周期

这个是我觉得比较好的vue生命周期解析：https://segmentfault.com/a/1190000011381906

六.有看源码吗？

vue的github地址：https://github.com/vuejs/vue