vue2,3Proxy

79 阅读1分钟

vue2:

  let obj = {
            name: 'zhangsan',
            age: 30
        }
        // Object.defineProperties(obj,{
        //     name:{
        //         enumerable:false
        //     },
        //     age:{
        //         enumerable:false
        //     }
        // })
        // for( var key in obj ){
        //     document.write(obj[key] + '<br>')
        // }

        var params = {
            _name : 'wanger'
        }
        var p = {

        }
        Object.defineProperty(params, 'name', {
            configurable: false,
            get() {
                return '用户名:' + this._name
            },
            set(v) {
                p.name = v
            }
        })

        // p.name = 'lisi'
        document.write(params.name + '<br>')
        params.name = 'lisi'
        document.write(params.name + '<br>')
        document.write(p.name)

vue3:

 // let p = {
        //     name:'zhangsan',
        //     age:30
        // }
        // let p2 = {
        //     get(obj,key){
        //         return obj[key]
        //     },
        //     set(obj,key,val){
        //         obj[key] = val
        //     }
        // }
        // let proxy1 = new Proxy(p,p2)
        // document.write(proxy1.name + '  '  + proxy1.age + '<br>')
        // proxy1.name = 'lisi'
        // document.write(proxy1.name)



        let stu = {
            name:'aaa',
            no:9083,
            sex:'男'
        }
        let stu2 = {
            get(obj,key){
                if(key == 'no'){
                    return obj[key]
                }
                if(key == 'sex'){
                    return obj[key]
                }
            },
            set(obj,key,val){
                if(val == '女'){
                    document.write('只能是爷们')
                    return obj[key] = '男'
                }
            }
        }
        let prox2 = new Proxy(stu,stu2)
        document.write(prox2.no+'  '+prox2.sex+'<br>')
        prox2.sex = '女'
        document.write('<br>'+prox2.sex)