Vue_1 get&&&set vue双向数据绑定的原理（存储器属性）

相应式属性(一种更加深入控制属性的方式)

• 写在data 下的属性会自动成为相应式属性
  * 原理:getter & seter

属性特性

• writable 可写性
• enumerble 可枚举性（是否可以遍历） 控制台__propty__ 浅颜色的

有值的 -----值属性
无值的 ---- 存储器属性 – get &&& set

设置属性特性：Object.defineProperty(obj,key,descriptor)
(需要控制的对象，控制对象下的属性，属性特性)


<script>

    /**
    设置属性特性：Object.defineProperty(obj,key,descriptor)
    * key 添加的键名
    * descriptor 
       *writable   可写性 
       *enumerable 可枚举性(是否可以遍历)
       * writable 可写性 
       * value     键值
    */ 
    let user = {
        username: 'xiaoluo',

    }
    Object.defineProperty(user, 'age', {
        // writable:true, 
        value: 21// 设置属性特性里面的值
        , enumerable:true

        

    })


</script>

     * 属性特性（一种更深入控制属性的方式）
        * 设置属性特性：Object.defineProperty(obj,key,descriptor)
        * 获取属性特性：Object.getOwnPropertyDescriptor(obj,key)
            * 值属性（有自己的值的属性）
                * configurable  可配置性（属性特性总开关）
                * enumerable    可枚举性（是否可遍历）
                * writable      可写性
                * value
            * 存储器属性（本身没有值，一般用于代理其他数据）
                * configurable  可配置性（属性特性总开关）
                * enumerable    可枚举性（是否可遍历）
                * get           监听读取操作
                * set           监听写入操作
                本身没有值 ，代理着别人的数据 

PS：传统方式设置的属性，所有的属性特性默认为true；
而通过Object.defineProperty()设置的属性特性默认为false

get && set

  let user = {
        username: 'xiaoluo',

    }

   let psw = 123;
    Object.defineProperty(user, 'password', {
        configurable: true,  // 总开关 设置是否可以遍历 是否可写
        get() {
            console.log('进入get')
            return 99999
        },
        set() {
            console.log('监听到更改值')
        }

    })
    

get() 跟 set（） 本身是没有值的 只能用来代理其他的值

获取数据的时候 本身是没有值的 值是有另外一个函数 return 出来的

改变数据的时候 进入的set 里面

  let psw = 123;
    Object.defineProperty(user, 'password', {
        configurable: true,  // 总开关 设置是否可以遍历 是否可写
        get() {
            console.log('进入get')
            return psw
        },
        set(value) {
            console.log('监听到更改值');
            psw = value;
            document.getElementById('test').innerText = user.password;

        }


    })

二次总结

<script>
    let user = {
        username: 'zhijie'
    }

    // 设置存储器属性，属性的值不能正常的修改

    // 设置的值不能被修改

    /*
    * 设置属性特性
    * object.defineProperty(obj,key,descriptor)

    * 获取属性特性
    *object.getOwnPropertyDescriptor('需要获取的属性特性的值')
     (所需操作的对象，目标值，内置的方法)

     ## 值属性 （有值）
        * configurable  可配置性（属性特性总开关）
        * writable  可写性
        *enumerable    可枚举型(是否可以遍历)
         默认的值死false

    ## 无值的话 (存储器属性) 本身的话死没有值的
configurable  可配置性 （属性特性的总开关）
enumerable   可枚举性 

get   读取的时 监听读取的值 

set     监听写入的操作




    **/
    Object.defineProperty(user, 'age', {
        configurable: false,// 总开关 控制着 writable 是否可以修改
        writable: false,
        enumerable: false,
        value: 22
    });

    let str = 321312
    Object.defineProperty(user, 'password', {
        configurable: true,

        get() {

            console.log('进入get')
            return str // 接收的数据，返回去给数据层
        },
        set(val) {  // 需要修改的值传进来，可以在val里面拿得到
            // 修改的话进入set
            console.log('进入set')
            console.log(val)
            str = val  // 拿到需要的修改的值 ，并且把它赋给str 
            //执行这一步代码，并把val的值更新到视图层
            document.getElementById('password').innerText = user.password
        }
    })

    // document.getElementById('password').innerText = user.password
</script>