Vue原理-笔记

Object.defineproperty - (Vue的原理)

例1：

const obj = {}
        Object.defineProperty(obj, 'x', {
            value:21,
            writable:false //不能被改变
        })

结果：

> obj
< {x: 21}
> obj.x =24
< 24
> obj
> {x: 21}

例2：

//事先定义一个对象
const obj = {}
//定义一个中间值，用于过渡
        let y = 20
        //使用Object.defineProperty来为obj定义一个x的值
        Object.defineProperty(obj, 'x', {
            //当每次调用 obj.x 这个get方法会自动执行，它的return值就是上面定义的y
            get () {    //获取时走的方式
                return y
            },
            //当每次使用obj.x = 某个值 来赋值的时候 这个set方法会自动执行，set方法的参数就是你的那个'某个值'
            set (newValue) { //赋值时走的地方
                console.log(newValue);
                //把新值赋给y，那么下次在执行obj.x取出来的值就是新值
                y = newValue;
            }
        })

结果

> obj.x
< 20
> obj.x = 24
  24
< 24

特性检测：

> 'borderRadius' in document.createElement('div').style;
< true
> 'placeholder' in document.createElement('input');
< true

Proxy

//设置初始值方便理解
let x = 10;
    //使用Proxy来定义一个对象，对象可为空
    const obj = new Proxy({ x },{
        //当每次使用obj.x = 某个值 来赋值的时候 这个set方法会自动执行，set方法的参数就是 "{ x }, x, 某个值"
        set (obj, prop, value) { //obj就是 { x }
            obj[prop] = value; 
        },
        //当每次使用obj.x时这个get方法会自动执行，get方法的参数就是 "{ x }, x"
        get (obj, prop) {
            return obj[prop]  //返回obj[prop]的value值
        }
    })

Vue原理-笔记

推荐阅读更多精彩内容