Vue MVVM模型原理

最近反思了下自己，觉得自己很急躁，学技术总是觉得能用就行了，其实这样很不好，总是这样，就永远只能当用轮子的人。好了，废话不多说，转入正题：

要理解MVVM的原理，首先要理解它是什么，怎么运作起来的：

以下这样图来自这位大佬的文章《Vue.js入门（一）--MVVM框架理解》

由图可见，MVVM模型需要靠Observer（监视者）、Compile（解析器）、Dep（Dependency，收集依赖）、Watcher（观察者）等来实现。

Observer()之所以能够监听数据变化，是因为它依靠了es5的Object.defineProperty(obj, prop, descriptor):

具体关于Object.defineProperty()的属性，可见MDN的Object.defineProperty()。

这个方法可以给对象添加或一个属性，并且返回这个对象，它有三个参数，前面两个obj、prop不多说了，重头戏是第三个参数descriptor，既描述对象，这个对象可以传configurable、enumerable、value...以及get、set

        function Observer(obj, vm) {
            Object.keys(obj).forEach(function(key) {
                Object.defineProperty(obj, key, {
                    get: function() {
                        return obj[key];
                    },
                    set: function(newVal) {
                        if (newVal === obj[key]) return;
                        obj[key] = newVal;
                    }
                });
            });
        }

这段代码的作用就是遍历obj的每个属性，加上get和set，读取obj属性的时候就会触发get，给obj属性赋值的时候就会触发set.

那Observer()怎么样才能在数据变更时及时通知到Dep,再有Dep去通知Watcher呢？看看Dep()代码：

        /**
         * 收集Watcher依赖并通知数据变更
         */
        function Dep () {
            this.subs = []
        }
        Dep.prototype = {

            // 添加订阅者
            addSub: function(sub) {
                this.subs.push(sub);
            },

            // 通知订阅者
            notify: function() {
                this.subs.forEach(function(sub) {
                    sub.update();
                });
            }
        };

改写下Observer():

        function observe (obj, vm) {
            Object.keys(obj).forEach(function (key) {
                defineReactive(vm, key, obj[key]);
            });
        }
        function defineReactive (obj, key, val) {
            var dep = new Dep();
            Object.defineProperty(obj, key, {
                get: function () {
                    if (Dep.target) dep.addSub(Dep.target);
                    return val
                },
                set: function (newVal) {
                    if (newVal === val) return
                    val = newVal;
                    dep.notify();
                }
            });
        }

而Dep.target指的是Watcher:

        function Watcher(vm, cb, expOrFn) {
            //  this为Watcher构造函数
            Dep.target = this;
            this.cb = cb
            this.vm = vm
            this.expOrFn = expOrFn
            this.value = this.get()
            this.update();
            Dep.target = null;
        }
        Watcher.prototype = {
            update: function () {
                this.run()
            },
            run: function () {
                const value = this.get()
                if (value !== this.value) {
                    this.value = value
                    this.cb.call(this.vm)
                }
            },

            // 获取属性值
            get: function () {
                this.value = this.vm[this.expOrFn];
            }
        }

由此可见：

　　Oberver()通过Object.defineProperty()通知Dep()，而Dep()这里收集了Watcher依赖，当Dep()里有个订阅者的数组，全都是Watcher，当Oberver触发了Dep原型上的方法notify()的时候，就会触发Watcher去update，更新数据，而view层将进行render(),从而更新视图。