手写一套mvvm框架

1 MVVM是什么

MVVM 设计模式，是由 MVC、MVP 等设计模式进化而来。

1. M - 数据模型（Model），简单的JS对象
2. VM - 视图模型（ViewModel），连接Model与View
3. V - 视图层（View），呈现给用户的DOM渲染界面

通过以上的MVVM模式图，我们可以看出最核心的就是ViewModel，它主要的作用：对View中DOM元素的监听和对Model中的数据进行绑定，当View变化会引起Modal中数据的改动，Model中数据的改动会触发View视图重新渲染，从而达到数据双向绑定的效果，该效果也是Vue最为核心的特性。

---

2 Object.defineProperty的用法

下面介绍如何实现一个完整MVVM框架，首先介绍一下一个核心api，Object.defineProperty的使用。

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

语法：

Object.defineProperty(obj, prop, descriptor)

1. obj：要在其上定义属性的对象
2. prop：要定义或修改的属性的名称
3. descriptor：将被定义或修改的属性描述符

返回值：

被传递给函数的对象

使用方法：

var obj = {};
obj.name = 'hunger';
obj['age'] = 3;
Object.defineProperty(obj, 'intro', {
  value: 'hello world',
});
console.log(obj);  // {name: 'hunger', age: 3, intro: 'hello world'}

以上三种方法都可以用来定义 / 修改一个属性，Object.defineProperty 的方法貌似看起来有些小题大做。没关系，且往下看它更复杂的用法。

var obj = {};
Object.defineProperty(obj, 'intro', {
  configurable: false,
  value: 'hello world'
});
obj.intro = 'jirengu';
console.log(obj.intro);   // "helloworld"
delete obj.intro;           // false, 删除失败
console.log(obj.intro);  // "helloworld"

var obj = {};
Object.defineProperty(obj, 'name', {
  configurable: true,
  value: 'hunger'
});
console.log(obj.name);  // hunger
delete obj.name;   // true  ， 成功删除
console.log(obj.name); // undefind

 通过上面的例子可以看出，属性描述对象中 configurable 的值设置为 false 后(如果没设置，默认就是 false) ，以后就不能再次通过 Object.defineProperty修改属性，也无法删除该属性。

var obj = { name: 'hello' };
Object.defineProperty(obj, 'age', {
  value: 3,
  enumerable: false
});
for (var key in obj) {
  console.log(key);   // 只输出 'name'， 不输出'age'
}

设置 enumerable 属性为 false 后，遍历对象的时候会忽略当前属性(如果未设置，默认就是 false不可遍历) 。

var obj = { name: 'hello' }
Object.defineProperty(obj, 'age', {
  value: 3,
  writable: false
});
obj.age = 4;
console.log(obj.age);   // 3， writable为 false 时，修改对象的当前属性值无效

value 和 writable 叫数据描述符，具有以下可选键值：

1. value：该属性对应的值。可以是任何有效的 JavaScript 值（数值，对象，函数等）。默认为 undefined
2. writable：当且仅当该属性的writable为true时，该属性才能被赋值运算符改变。默认为 false
3. configurable：true 和 wriable：true 的区别是，前者是设置属性能删除，后者是设置属性能修改

var obj = {};
var age;
Object.defineProperty(obj, 'age', {
  get: function () {
    console.log('get age...')
    return age;
  },
  set: function (val) {
    console.log('set age...')
    age = val;
  }
});
obj.age = 100;  // 'set age...'
console.log(obj.age); // 'get age...', 100

get 和 set 叫存取描述符，有以下可选键值：

1. get：一个给属性提供 getter 的方法，如果没有 getter 则为 undefined。该方法返回值被用作属性值。默认为 undefined
2. set：一个给属性提供 setter 的方法，如果没有 setter 则为 undefined。该方法将接受唯一参数，并将该参数的新值分配给该属性。默认为 undefined
3. 数据描述符和存取描述符是不能同时存在的

var obj = {};
var age;
Object.defineProperty(obj, 'age', {
  value: 100,
  get: function () {
    console.log('get age...')
    return age;
  },
  set: function (val) {
    console.log('set age...')
    age = val;
  }
});

因为有 value，又有 get，上述代码会报错。

浏览器报：Uncaught TypeError: Invalid property descriptor. Cannot both specify accessors and a value or writable attribute, #