vue响应式原理

229 阅读1分钟

 var obj = {};
        var _name = 'zhangsan';
        //第二参数是添加到obj中的第二个参数
        Object.defineProperty(obj,'name',{
            get:function(){
                console.log('get',_name);
                return _name
            },
            set:function(newVal){
                console.log('set',newVal)
                name = newVal
            }
        })

Object.defineProperty() 方法会直接在一个对象上定义一个新属性,或者修改一个对象的现有属性,并返回此对象。

匿名函数直接执行应该怎么办呢,其实很简单,就是在function前面加上一些操作符

02.html:29 Uncaught TypeError: (intermediate value)(...) is not a function

自执行函数


        //  1.最前最后加括号   
        (function () {
            console.log('我是大帅哥!!!')//我是大帅哥!!!
        }());//加分号结尾
        // 2.function外面加括号
        (function () {
            console.log('2号执行')
        })();
        (function () { alert(1); })(); 
        // 3.function前面加运算符
        !function(){ alert(200); }();  
//  注:
// 1、可以给立即执行函数传递参数  
// 2、立即函数内部是可以访问外部变量
// 3、立即执行函数模式被广泛使用,它可以帮你封装大量的工作而不会在背后遗留任何全局变量。
// 4、定义的所有变量都会成员立即执行函数的局部变量,所以你不用担心这些临时变量会污染全局空间。   
// 5、立即执行函数通常作为一个单独模块使用。一般没有问题,但是,建议在自己写的立即执行函数前加分号,这样可以有效地与前面代码进行隔离。否则,可能出现意想不到的错误。

模拟响应式

 var vm = {}
            var data = {
                name : 'chenbo',
                age : 23
            }

            var key ,value
            for(key  in data){
                (function(key){
                    // Object.defineProperty(vm,data[key],{
                    Object.defineProperty(vm,key,{//第二个值是对象的属性
                        // get:function(){
                        //     console.log('get',data[key])//监听获取
                        //     return data[key]
                        // },
                        // set:function(newVal){
                        //     console.log('set',newVal)//监听修改
                        //     data[key] = newVal
                        // }

                        // 这样写法也行  看下是不是es6的
                        get(){
                            console.log('get',data[key])//监听获取
                            return data[key]
                        },
                        set(newVal){
                            console.log('set',newVal)//监听修改
                            data[key] = newVal
                        }
                    })
                })(key)
            }
            
            
    ```

![](https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2020/7/12/1734316b20709e77~tplv-t2oaga2asx-image.image)