实现Vue-MVVM-step1

一个利用defineProperty实现的MVVM双向数据绑

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Vue-MVVM</title>
    </head>
    <body>
        <input type="text" id="input1" value="" oninput="myFun()" />
        <input type="text" id="input2" />
    </body>
    <script>
        function myFun() {
            o._data.test = document.getElementById('input1').value
        }
        /* 这个函数用来模拟视图更新 */
        function cb(val) {
            console.log('试图更新啦~~');
            document.getElementById('input2').value = val
        }
        /* 遍历所有属性的方式对该对象的每一个属性都通过 defineReactive  */
        function observer(value) {
            if (!value || (typeof value !== 'object')) {
                return;
            }
            Object.keys(value).forEach((key) => {
                defineReactive(value, key, value[key]);
            })
        }
        /* 实现对对象的「响应式」 */
        function defineReactive(obj, key, val) {
            Object.defineProperty(obj, key, {
                enumerable: true,        // 能否被遍历，比如 for in，默认值为 false
                configurable: true,        // 描述该属性的描述符能否被改变，默认值为 false
                get: function reactiveGetter() {        // 取值的时候调用，默认值为 false
                    return val;
                },
                set: function reactiveSetter(newVal) {        // 设置值的时候使用
                    if (newVal === val) return;
                    cb(newVal);
                }
            });
        }
        /* 声明类 */
        class Vue {
            constructor(options) {
                this._data = options.data;
                observer(this._data)
            }
        }
        /* 创建实例 */
        var o = new Vue({
            data: {
                test: ""
            }
        })
    </script>
</html>

 

posted @ 2018-08-01 17:24  茹孟凯  阅读(372)  评论(0)  编辑  收藏  举报