vue.js - 数据绑定（响应式属性）

一、数据绑定

之前的一篇文章中，系统的学习了 vue.js 中数据绑定的使用方式，但是对于其基本原理却缺乏更进一步的理解，本篇将尝试理解其中的思路，并实现一个类似的简单示例。
注：vue.js 官网文档也进行了说明，双向绑定的 v-model 所引入的视图（View）到模型（Model）更新，不过是基于 input 事件的一个语法糖，这里不再考虑双向绑定中视图到数据的更新，而重点关注模型（Model）到视图（View）的更新（单向绑定）。

二、基本理论依据——观察者模式

关于观察者模式的理论此处不再赘述，而类似 vue.js 之类的 MVVM 框架，基本都是由 View-Model 层担任观察者，观察 Model 层数据的数据变化，并将其通知给 View 层，进而实现 Model 层更新时，View 随之更新的效果。

三、实操

（一）方案一

较老的实现方案或者说要求兼容较为古老的浏览器的框架中，它们一般是由框架自身提供出来一套 get/set 方法给开发者，开发者可以通过这个方法读 / 写模型里面的数据，而避免开发者直接接触到原始数据。在实现 set 这个方法时，除了修改模型数据的时候，同时也会检查数据的更新是否需要通知视图进行更新。
下面来一个简单的例子（可以点击这里查看效果）：

<div id="app"></div>
<button id="add">add</button>

<script>
    var app = document.getElementById('app');
    var btn = document.getElementById('add');
    var model = (function () {
        var data = {
            counter: 0
        };
        app.innerHTML = data.counter;

        return {
            set(key, val) {
                if(val !== data[key]) {
                    data[key] = val;

                    app.innerHTML = data.counter;
                }
            },
            get(key) {
                return data[key];
            }
        }
    })();

    btn.onclick = function () {
        model.set('counter', model.get('counter') + 1);
    };
</script>

每次我们点击 add 按钮的时候，页面上 #app 元素的内容便会 +1。这里主要依靠的就是我们自己维护的一个核心数据以及与之对应的 get/set 方法。这里我们通过立即执行匿名函数的形式，在这里封入了一个 data 对象，这一个 data 对象是不能直接被开发者接触到的，因为如果开发者不小心通过直接修改 data 对象的方式，将不会触发视图更新。我们通过闭包的方式，返回了一个包含了 get/set 方法的对象，这个对象最后被赋值给了变量 model。而 model 上的 get/set 方法作为在前面的匿名函数中定义的方法，拥有访问这个闭包内数据的特权。我们通过 model.get('counter') 可以获取到当前的数据的值，通过 model.set('counter', xxxxx) 可以设置当前数据的值，这一切的读写行为对于框架而言都是可见的，框架便有机会在必要的时候（比如这里 data.counter 被修改的时候），更新视图（比如这里的 app.innerHTML = data.counter;）。上面这段代码只是一个示例，仅供参考，一般框架的实现方式远比这个来得复杂。

（二）方案二

得益于 ES5 为我们新增的 getter/setter 特性，我们可以有更简洁、高效的方式实现“观察者”这一功能。如果你对它们还不熟，可以参考 MDN 相关文档。
下面来一个示例（可以点击这里查看效果）：

<div id="app"></div>
<button id="add">add</button>

<script>
    var app = document.getElementById('app');
    var btn = document.getElementById('add');

    var model = {
        counter: 0,
        set counter (val) {
            this.counter = val;
        },
        get counter() {
            return this.counter;
        }
    };
    app.innerHTML = model.counter;

    btn.onclick = function () {
        model.counter += 1;
    };
</script>

等等，小编，你骗我？你这个怎么没有显示出来？而且点击按钮的时候还提示 “Uncaught RangeError: Maximum call stack size exceeded”？
这个地方确实是一个常见的坑，主要问题出在我们的 getter 上，我们在 getter 函数中执行 this.counter 相当于再次调用了 getter，这里最终就变成了无限递归调用，最终导致调用栈溢出，所以提示了 “Maximum call stack size exceeded”。这里是使用 getter 很常见的误区，小编一开始也是想当然地写成了这种形式，囧。。。
那我们改进一下吧（可以点击这里查看效果）：

<div id="app"></div>
<button id="add">add</button>

<script>
    var app = document.getElementById('app');
    var btn = document.getElementById('add');

    var model = (function () {
        var data = {
            counter: 0
        };
        
        app.innerHTML = data.counter;

        return {
            set counter (val) {
                data.counter = val;

                app.innerHTML = val;
            },
            get counter() {
                return data.counter;
            }
        };
    })();

    btn.onclick = function () {
        model.counter += 1;
    };
</script>

哇，小编，你有毒吧？你不是说使用 getter/setter 更简洁、高效吗？为啥还是引入了一个闭包，搞得看起来那么复杂。
为了解决调用栈溢出的问题，我们尝试维护了两个不同的数据对象。一个是我们的真正的模型数据 data，它包含了真正的数据信息；另一个则是我们定义为 model 的对象，它实际上并不是真正的模型，而是我们模型的一个代理。尝试读写 model 对象的时候最终将去读写 data 对象。而这里的闭包，主要还是考虑到防止开发者直接读写 data 对象。如果不喜欢，在支持的情况下，也可以通过块级作用域或者其它方式对其进行屏蔽。
至于简洁的问题，对比

model.set('counter', model.get('counter') + 1);

和

model.counter += 1;

应该不难看出吧。。。
而高效地话，前者是通过我们自己维护的 get/set 方法，而后者使用原生的 getter/setter，一般原生的代码都是经过优化的，我们自己实现的在效率上根本远远赶不上。

四、结论

（一）自己实现 get/set 方法

优点：兼容性好；
确定：需要自己去实现一套“观察者”，使用体验不好（必须通过指定的方式读写数据），且效率相对较低；

（二）基于原生的 getter/setter

优点：实现简单，使用体验好（读写和其它一般的属性无异），且效率相对较高；
缺点：ES5 才开始支持，较古老浏览器可能不支持（这也是 vue.js 不支持 ie8 的原因）。

注：以上内容，纯属小编在瞎扯，仅供参考~