我觉得vue原理就是 Object.defineProperty，简单实现了set和get，谢谢

简单实现了一个对象的set和get

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript">
            function Observer(data){
                this.data = data;
                this.observe();
            }
            
            var pro = Observer.prototype;
            pro.observe = function(){
                var _this = this;
                var arr = Object.keys(this.data);
                
                for(var i = 0; i < arr.length; i++){
                    (function(k , v){
                        Object.defineProperty(_this.data , k , {
                            set: function(value){
                                console.log('您设置了' + k + '属性的值为：' + value);
                            },
                            get: function(){
                                console.log('您调用了'+ k + '属性的get方法');
                                return v;
                            }
                        })
                    })(arr[i] , _this.data[arr[i]]);
                }
            }
            var _data = {
                name: 'xudy',
                age: 30
            }
            //注意不能传临时对象
            /*不可以这么写
             var o = new Observer({
                 name: 'xudy',
                age: 30
             });
             * */
            var o = new Observer(_data);
            
            o.data.name = 'aaaaaaaaa';    //您设置了name属性的值为：aaaaaaaaa
            o.data.name;    //您调用了name属性的get方法
            
            o.data.age = 28;    //您设置了age属性的值为：28
            o.data.age;            // 您调用了age属性的get方法
        </script>
    </head>
    <body>
    </body>
</html>

相关阅读:
PowerMock详解
java -agent与Javassist
gradle_____最后到齐的构建工具
JVM--参数调优
提高速度 history 的利用
shell-异步执行
redis常用命令与使用分析
chrome mac 快捷键
idea的快捷键和操作
mysql事务以及隔离级别

原文地址：https://www.cnblogs.com/xudy/p/6487098.html