vue的计算属性computed

• 可对数据进行逻辑处理
• 可对数据进行监视

基础例子

var vm = new Vue({
  data: { a: 1 },
  computed: {
    // 仅读取
    aDouble: function () {
      return this.a * 2
    },
    // 读取和设置
    aPlus: {
      get: function () {
        return this.a + 1
      },
      set: function (v) {
        this.a = v - 1
      }
    }
  }
})
vm.aPlus   // => 2
vm.aPlus = 3
vm.a       // => 2
vm.aDouble // => 4

要理解 computed 的工作原理，只需要理解下面三个问题

1、computed 也是响应式的

2、computed 如何控制缓存

3、依赖的 data 改变了，computed 如何更新

1.computed 也是响应式的

给 computed 设置的 get 和 set 函数，会跟 Object.defineProperty 关联起来，所以 Vue 能捕捉到 读取computed 和 赋值computed 的操作。读取computed 时，会执行你设置的 get 函数，但是并没有这么简单，因为还有一层缓存的操作赋值 computed 时，会执行你设置的 set 函数，这个就比较简单，会直接把 set 赋值给Object.defineProperty - set

2.Computed 如何控制缓存

我们都知道，computed 是有缓存的，官方已经说明

"计算属性是基于它们的依赖进行缓存的。计算属性只有在它的相关依赖发生改变时才会重新求值"

"我们为什么需要缓存？假设我们有一个性能开销比较大的计算属性 A，它需要遍历一个巨大的数组并做大量的计算。然后我们可能有其他的计算属性依赖于 A 。如果没有缓存，我们将不可避免的多次执行 A 的 getter"

现在我们要开始讲解，Computed 是如何判断是否使用缓存的

首先 computed 计算后，会把计算得到的值保存到一个变量中。读取 computed 时便直接返回这个变量。当使用缓存时，就直接返回这个变量。当 computed 更新时，就会重新赋值更新这个变量 

TIP:computed 计算就是调用 你设置的 get 函数，然后得到返回值

computed 控制缓存的重要一点是 【脏数据标志位 dirty】，dirty 是 watcher 的一个属性

当 dirty 为 true 时，读取 computed 会重新计算

当 dirty 为 false 时，读取 computed 会使用缓存

1.一开始每个 computed 新建自己的watcher时，会设置 watcher.dirty = true，以便于computed 被使用时，会计算得到值

2.当 依赖的数据变化了，通知 computed 时，会设置 watcher.dirty = true，以便于其他地方重新渲染，从而重新读取 computed 时，此时 computed 重新计算

3.computed 计算完成之后，会设置 watcher.dirty = false，以便于其他地方再次读取时，使用缓存，免于计算

3.依赖的data变化，computed如何更新

computed 会让 【data依赖】 收集到 【依赖computed的watcher】，从而 data 变化时，会同时通知 computed 和 依赖computed的地方

原理实现

//标识当前的Dep id
let uidep = 0
class Dep{
    constructor () {
        this.id = uidep++
        // 存放所有的监听watcher
        this.subs = []
      }

      //添加一个观察者对象
      addSub (Watcher) {
        this.subs.push(Watcher)
      }
      //依赖收集
    depend () {
        //Dep.target 作用只有需要的才会收集依赖
        if (Dep.target) {
          Dep.target.addDep(this)
        }
    }

    // 调用依赖收集的Watcher更新
    notify () {
        const subs = this.subs.slice()
        for (let i = 0, l = subs.length; i < l; i++) {
          subs[i].update()
        }
      }
}

Dep.target = null
const targetStack = []

// 为Dep.target 赋值
function pushTarget (Watcher) {
    if (Dep.target) targetStack.push(Dep.target)
      Dep.target = Watcher
}
function popTarget () {
  Dep.target = targetStack.pop()
}
/*----------------------------------------Watcher------------------------------------*/
//去重 防止重复收集
let uid = 0
class Watcher{
    constructor(vm,expOrFn,cb,options){
        //传进来的对象 例如Vue
        this.vm = vm
        if (options) {
          this.deep = !!options.deep
          this.user = !!options.user
          this.lazy = !!options.lazy
        }else{
            this.deep = this.user = this.lazy = false
        }
        this.dirty = this.lazy
        //在Vue中cb是更新视图的核心，调用diff并更新视图的过程
        this.cb = cb
        this.id = ++uid
        this.deps = []
        this.newDeps = []
        this.depIds = new Set()
        this.newDepIds = new Set()
        if (typeof expOrFn === 'function') {
            //data依赖收集走此处
              this.getter = expOrFn
        } else {
            //watch依赖走此处
              this.getter = this.parsePath(expOrFn)
        }
        //设置Dep.target的值，依赖收集时的watcher对象
        this.value = this.lazy ? undefined : this.get()
    }

    get(){
        //设置Dep.target值，用以依赖收集
        pushTarget(this)
        const vm = this.vm
        //此处会进行依赖收集 会调用data数据的 get
        let value = this.getter.call(vm, vm)
        popTarget()
        return value
    }

    //添加依赖
      addDep (dep) {
          //去重
          const id = dep.id
        if (!this.newDepIds.has(id)) {
              this.newDepIds.add(id)
              this.newDeps.push(dep)
              if (!this.depIds.has(id)) {
                  //收集watcher 每次data数据 set
                  //时会遍历收集的watcher依赖进行相应视图更新或执行watch监听函数等操作
                dep.addSub(this)
              }
        }
      }

      //更新
      update () {
          if (this.lazy) {
              this.dirty = true
        }else{
            this.run()
        }
    }

    //更新视图
    run(){
        console.log(`这里会去执行Vue的diff相关方法，进而更新数据`)
        const value = this.get()
        const oldValue = this.value
        this.value = value
        if (this.user) {
            //watch 监听走此处
            this.cb.call(this.vm, value, oldValue)
        }else{
            //data 监听走此处
            //这里只做简单的console.log 处理，在Vue中会调用diff过程从而更新视图
            this.cb.call(this.vm, value, oldValue)
        }
    }

    //如果计算熟悉依赖的data值发生变化时会调用
    //案例中 当data.name值发生变化时会执行此方法
    evaluate () {
        this.value = this.get()
        this.dirty = false
    }
    //收集依赖
    depend () {
        let i = this.deps.length
        while (i--) {
          this.deps[i].depend()
        }
    }

    // 此方法获得每个watch中key在data中对应的value值
    //使用split('.')是为了得到 像'a.b.c' 这样的监听值
    parsePath (path){
        const bailRE = /[^w.$]/
      if (bailRE.test(path)) return
          const segments = path.split('.')
          return function (obj) {
            for (let i = 0; i < segments.length; i++) {
                  if (!obj) return
                  //此处为了兼容我的代码做了一点修改     
                //此处使用新获得的值覆盖传入的值 因此能够处理 'a.b.c'这样的监听方式
                if(i==0){
                    obj = obj.data[segments[i]]
                }else{
                    obj = obj[segments[i]]
                }
            }
            return obj
         }
    }
}

/*----------------------------------------Observer------------------------------------*/
class Observer{
    constructor (value) {
        this.value = value
        // 增加dep属性（处理数组时可以直接调用）
        this.dep = new Dep()
        //将Observer实例绑定到data的__ob__属性上面去，后期如果oberve时直接使用，不需要从新Observer,
        //处理数组是也可直接获取Observer对象
        def(value, '__ob__', this)
        if (Array.isArray(value)) {
            //这里只测试对象
        } else {
            //处理对象
              this.walk(value)
        }
    }

    walk (obj) {
        const keys = Object.keys(obj)
        for (let i = 0; i < keys.length; i++) {
            //此处我做了拦截处理，防止死循环，Vue中在oberve函数中进行的处理
            if(keys[i]=='__ob__') return;
              defineReactive(obj, keys[i], obj[keys[i]])
        }
      }
}
//数据重复Observer
function observe(value){
    if(typeof(value) != 'object' ) return;
    let ob = new Observer(value)
      return ob;
}
// 把对象属性改为getter/setter，并收集依赖
function defineReactive (obj,key,val) {
      const dep = new Dep()
      //处理children
      let childOb = observe(val)
      Object.defineProperty(obj, key, {
        enumerable: true,
        configurable: true,
        get: function reactiveGetter () {
            console.log(`调用get获取值，值为${val}`)
              const value = val
              if (Dep.target) {
                dep.depend()
                if (childOb) {
                      childOb.dep.depend()
                }
              }
              return value
        },
        set: function reactiveSetter (newVal) {
            console.log(`调用了set，值为${newVal}`)
              const value = val
               val = newVal
               //对新值进行observe
              childOb = observe(newVal)
              //通知dep调用,循环调用手机的Watcher依赖，进行视图的更新
              dep.notify()
        }
  })
}
//辅助方法
function def (obj, key, val) {
  Object.defineProperty(obj, key, {
    value: val,
    enumerable: true,
    writable: true,
    configurable: true
  })
}
/*----------------------------------------初始化watch------------------------------------*/
//空函数
const noop = ()=>{}
// computed初始化的Watcher传入lazy: true就会触发Watcher中的dirty值为true
const computedWatcherOptions = { lazy: true }
//Object.defineProperty 默认value参数
const sharedPropertyDefinition = {
  enumerable: true,
  configurable: true,
  get: noop,
  set: noop
}
// 初始化computed
class initComputed {
    constructor(vm, computed){
        //新建存储watcher对象，挂载在vm对象执行
        const watchers = vm._computedWatchers = Object.create(null)
        //遍历computed
        for (const key in computed) {
            const userDef = computed[key]
            //getter值为computed中key的监听函数或对象的get值
            let getter = typeof userDef === 'function' ? userDef : userDef.get
            //新建computed的 watcher
            watchers[key] = new Watcher(vm, getter, noop, computedWatcherOptions)
            if (!(key in vm)) {
                  /*定义计算属性*/
                  this.defineComputed(vm, key, userDef)
            }
        }
    }
    //把计算属性的key挂载到vm对象下，并使用Object.defineProperty进行处理
    //因此调用vm.somecomputed 就会触发get函数
    defineComputed (target, key, userDef) {
      if (typeof userDef === 'function') {
        sharedPropertyDefinition.get = this.createComputedGetter(key)
        sharedPropertyDefinition.set = noop
      } else {
        sharedPropertyDefinition.get = userDef.get
          ? userDef.cache !== false
            ? this.createComputedGetter(key)
            : userDef.get
          : noop
          //如果有设置set方法则直接使用，否则赋值空函数
            sharedPropertyDefinition.set = userDef.set
              ? userDef.set
              : noop
      }
      Object.defineProperty(target, key, sharedPropertyDefinition)
    }

    //计算属性的getter 获取计算属性的值时会调用
    createComputedGetter (key) {
      return function computedGetter () {
          //获取到相应的watcher
        const watcher = this._computedWatchers && this._computedWatchers[key]
        if (watcher) {
            //watcher.dirty 参数决定了计算属性值是否需要重新计算，默认值为true，即第一次时会调用一次
              if (watcher.dirty) {
                  /*每次执行之后watcher.dirty会设置为false，只要依赖的data值改变时才会触发
                  watcher.dirty为true,从而获取值时从新计算*/
                watcher.evaluate()
              }
              //获取依赖
              if (Dep.target) {
                watcher.depend()
              }
              //返回计算属性的值
              return watcher.value
        }
      }
    }
}

computed测试：

//1、首先来创建一个Vue构造函数：
function Vue(){
}
//2、设置data和computed的值：
let data={
    name:'Hello',
}
let computed={
    getfullname:function(){
        console.log('-----走了computed 之 getfullname------')
        console.log('新的值为：'+data.name + ' - world')
        return data.name + ' - world'
    }
}
//3、实例化Vue并把data挂载到Vue上
let vue         = new Vue()
vue.data         = data
//4、创建Watcher对象
let updateComponent = (vm)=>{
    // 收集依赖
    data.name
    
}
new Watcher(vue,updateComponent,()=>{})
//5、初始化Data并收集依赖
observe(data)
//6、初始化computed
new initComputed(vue,computed)

在浏览器console中测试：

//首先或的一次getfullname
vue.getfullname

//第二次调用getfullname看看会有什么变化呢
vue.getfullname