vue响应式原理浅解

响应式原理是通过Object.defineProperty()结合发布者订阅者模式来实现的，Object.defineProperty(obj,prop,desc)方法用来添加对象属性，并可进行监听其被获取和被修改。

obj：需要绑定属性的目标对象，与get和set方法不可同时存在。

prop：属性名

desc：属性描述对象，是一个配置项，在其中定义该属性的get和set方法.

set:修改属性时调用。

get:读取属性时调用。

 

    let obj = {
        name: "张三",
        age: 18,
    };
    Object.defineProperty(obj, "addr", {
        // value: "广州", //默认值属性，与get和set方法不可同时存在
        enumerable: true, //设置属性是否可以枚举，即是否允许遍历
        configurable: false, //设置属性是否可以删除或编辑
        // writable: true,//规定是否可被修改，与get和set方法不可同时存在
        get: function () {
            console.log("获取值")
            return value//属性值，
        },
        set:  (newVal)=> {
            console.log("修改值")
            value = newVal
        }
    });
//   let a=obj.addr先赋属性值再获取，不然是undefine
  obj.addr="深圳"
  let a=obj.addr
  console.log(a)//深圳