vue computed 原理

computed: {
  a(){
     return this.b ++
   }  
}
data:{
  b: 1  
}

    // 做一个构造函数A,作用是对data添加特性方法（set,get）
    class A {
      constructor(data, computed) {
        this.defineProperty(data, ‘a‘,data.a) // 对data中的属性‘a’添加特性方法
        this.collect =  computed.computA, // computed中的函数,记录下来
          
        computed.computA() // 运行此函数，会对data.a 进行取值，触发data.a的get函数，建立依赖
      }

      defineProperty(obj, key, val) { // 使用函数封装 添加特性方法
        const collect = [] 
        Object.defineProperty(obj, key, {
          get() {                    // 当取值 data.a 时会触发get函数
            if (this.collect) {
              collect.push(this.collect)  // 如果探测到有需要运行的compueted函数，搜集起来。
            }
            return val
          },
          set(value) {
            val = value
            collect.forEach(it => it())  // 如果data.a = 2 则运行set特性函数，此时，那些搜集起来的computed函数都运行
          }
        })
      }
    }




    const computed = {
      computA() {
        return data.a + 1
      }
    }

    const data = {
      a: 1
    }
  // 测试
    new A(data, computed)
    computed.computA() // 2
    data.a++
    computed.computA() // 3