Vue.js: 从Object.defineProperty到双向绑定

近日读了Vue.js一部分源代码，倒也是感到道阻且长。其中最核心的一点就是数据绑定。
相比于Angular.js的脏值检查与React.js的虚拟DOM，Vue.js运用了Object.defineProperty来追踪数值的变化和依赖，相当于对数据的读取进行了“劫持”。
于是这篇文章就介绍一个最最简单的利用Object.defineProperty来实现数据的双向绑定的例子。
其中JS代码没超过50行，超级短是不是

其中用了ES6语法，由于代码很短，就没有用babel转码，所以demo请用Chrome浏览器。

Demo

下面是用来展示的MVVM.html

MVVM.html

    
    



输入:



输出:

MVVM构造函数（类）接收三个参数，分别是输入元素输出元素和data对象
注意到其中id为input的元素，其中有一个指令model，值为someStr，这个值将会被绑定到data对象中的someStr上。

MVVM.js

class MVVM {
    constructor(options) {
        this.input = options.input
        this.output = options.output
        let data = this.data = options.data
        let key = null
        //解析节点，找到节点的model属性
        Array.from(this.input.attributes).forEach((attr) => {
            if (attr.name == 'model') {
                key = attr.value
            }
        })

        if (key && data[key]) {
            let value = data[key]
            this.input.value = value
            this.output.textContent = value
            //开始绑定
            this.defineReactive(data, key, value)
        }
    }

    defineReactive(data, key, val) {
        //对节点的值监听
        this.input.addEventListener('input', (e) => {
            this.data[key] = e.target.value
        }, false)
        //将data对象中的值转换为getter和setter
        Object.defineProperty(data, key, {
            enumerable: true,
            configurable: false,
            get: () => val,
            set: (newVal) => {
                if (newVal === val) {
                    return
                }
                val = newVal
                //通知视图更新
                this.notify(newVal)
            }
        })
    }
    notify(val) {
        this.output.textContent = val
    }
}

MVVM.js返回一个类，对传入的数据进行绑定。不过这个实在是再简单不过了，因为绑定的只只有一个，属性也只有model，甚至如果其中someStr不是数值而是对象也不能进行深层的绑定。
嘿不过用于演示Object.defineProperty的数据绑定最基本用法已经足够啦。
接下来如果有时间（呜呜快开学了），我想写一点读Vue.js核心代码的体会，看一看在Vue.js源码里Object.defineProperty的用法，那才是复杂的不像话。。。