4.24observer中并不会出现类似obj.data.name读取时,obj的data与data的name都出现被读取的现象。(改正错误!)

    const obj = {
      data1: {
        data2: {
          name: "小强",
          age: 20
        },
        name: "小刚"
      },
      name: "小明",
      age: 18
    }
    //以这种obj.data1.data2.name形式访问和访问data2.name效果一样,前提是获得data2的地址然后进行访问name属性
    function observer(target) {
      //判断传入参数是否为对象
      if (typeof target !== "object" || target === null) return
      for (let key in target) {
        //属性为对象则继续observe
        let res = target[key]
        observer(res) //对属性值进行observer递归,若属性值为非对象则返回属性值,否则进行observer处理
        Object.defineProperty(target, key, {
          get() {
            console.log(key + "属性被读取了");
            return res
          },
          set(newValue) {
            observer(newValue) //如果新value是对象,则继续监听
            if (newValue !== res) {
              console.log(key + "属性被修改了");
              res = newValue
            }
          }
        })
      }

    }

    observer(obj)
    obj.data1.name //依次打印data1属性被读取了 name属性被读取了
    //哈默链接:https://www.bilibili.com/video/BV18p4y167We
    //结论:data中的所有初定义属性都应该被Object.defineProperty进行监听。只不过针对对象属性来说,还需要做的一步是:对对象属性进行 
    //Object.defineProperty深层次监听。另外在修改属性之的时候,对于newValue也要进行判断,若newValue为对象,则需要进行 Object.defineProperty深 
    //层次监听。
上一篇:Flutter之滚动数字动画 widget


下一篇:2/6 Vue.js实现滑动滚动条,导航栏固定在顶部