了解MVVM框架吗？

• Vue.js
• React.js
• Angular.js

谈谈你对MVVM的认识？

MVVM的定义

M：Model（服务器上的业务逻辑操作）
V：View（页面）
VM：ViewModel（Model与View之间核心枢纽，比如Vue.js）

微信图片_20181130154445.png

• Model与ViewModel之间的双向关系
  Model通过Ajax通信，发送数据给ViewModel。
  ViewModel也可以通过Ajax通信，发送请求给Model。

• ViewModel与View之间的双向关系
  ViewModel中的数据改变，可以同时改变View上的显示内容。
  View上的内容改变(比如输入框中的内容)，也可以同时改变ViewModel中对应的数据。

MVC的定义，MVC与MVVM的区别

好文链接：MVC与MVVM的区别

双向绑定是什么意思？

微信图片_20181202104626.png

双向是指ViewModel中的data部分和View之间的双向关系。
正向：数据驱动页面
反向：页面更新数据

绑定是指自动化处理，data改变了view随之改变，反之也是。
不用像传统方式那样，通过onChange事件获取用户输入，然后再通过改变innerHtml修改显示。

双向绑定是什么原理，可以写出来吗？

微信图片_20181202141158.png

双向绑定都是依赖ES5中一个重要的API，Object.defineProperty。

• 正向
  Object.defineProperty的作用是监听data的变化，再监听到变化之后会触发一个回调函数。
  所以，我们要在Object.defineProperty的回调函数中写明data与View的关联就可以了，后续中data有变化就会自动根据你写的关联处理修改View的显示内容。
• 反向
  当用户在View中输入内容时，使用input事件(比如onChange)，修改data的值。
  有些框架已经为我们自动做了这个事情，不需要我们再关心。
  比如，在Vue框架中，可以使用V-Model方便的关联view和data。

Object.defineProperty()

定义：
Object.defineProperty() 方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性， 并返回这个对象。

语法：
Object.defineProperty(obj, prop, descriptor)

参数：
obj：要在其上定义属性的对象。
prop：要定义或修改的属性的名称。
descriptor：将被定义或修改的属性描述符。

返回值：
被传递给函数的对象。

// 这个例子中，把obj对象和input绑定了。
// 当obj的值发生变化时，input框的内容也会自动发生变化
// 当然，input框中的内容发生改变时，只要帮点onChange事件就能改变obj了，不再做演示

<input type="text" id="userInput">

<script>
    // 数据双向绑定
    const obj = {};

    Object.defineProperty(obj, "a", {
        value: 12,
        writable: true,
        enumerable: true,
        configurable: true
    });

    let bValue = 88;
    Object.defineProperty(obj, "b", {
        enumrable: true,
        configurable: true,
        get: function () {
            return bValue;
        },
        set: function (value) {
            bValue = value;

            // 绑定输入框
            const userInput = document.getElementById("userInput");
            userInput.value = value;
        }
    });
</script>

好文链接：理解Object.defineProperty

object.defineProperty()与reflect.defineProperty()的区别

• object.defineProperty()返回的是修改后的新对象
• reflect.defineProperty()返回的是一个布尔值

使用了什么设计模式？

微信图片_20181203103556.png

• Observer：监听者
  监听Data的变化，一旦监听到变化，就通知Dep(观察者列表)
• Dep：观察者列表
  一旦收到来自Observer的通知，就会回调所有的观察者(Watcher)，做相应的更新处理。
• Watcher：观察者
  观察者这里存放的就是相应的更新处理，会更新View的显示内容。
  另外，观察者可以通过订阅的方式，加入到Dep(观察者列表中)

生命周期是什么？

• Vue的生命周期

  
  lifecycle.png

• React的生命周期

  
  lifecycle-react.png

有看过源码吗？

。。。