Vue的computed大致细节

computed

• computed
• • 具体实现流程
  • computer的执行顺序

computed

具体实现流程

1. computer内部首先是标准化参数
2. 然后调用runner函数进行依赖收集
3. 设置dirty为true
4. 创建副作用函数，具体如下

const runner = effect(getter,{
    //延迟执行
    lazy:true,
    //标记为computed effect 用于咋trigger阶段的优先级排序
    computed:true,
    //调度执行实现
    scheduler:() => {
        //如果dirty为true，则执行副作用函数
        if(dirty){
            //设置dirty为false
            dirty = false
            trigger(computed,"set",'value')
        }
    }
})

5. 创建computed对象，具体如下

computed = {
    _v_isRef:true,
    effect:runner,
    get value(){
        if(dirty){
            value = runner()
            dirty = false
        }
        track(computed,"get",'value')
        return value
    }
    set value(newValue){
        setter(newValue)
    }
}

//最后
return computed

相关介绍

• dirty默认是false，当依赖发送变化是会设置dirty为true，然后下一次执行get时会重新计算并设置dirty为false，得到新的value
• dirty为false为，直接返回value
• dirty为true时，会重新计算value并设置dirty为false，然后返回value

当computed被访问时会触发get

computer的执行顺序

runner大于普通effect函数

例题

import {effect } from '@vue/reactivity'
import {ref,computed} from 'vue'

const count = ref(0)
const plusOne = computed(() => count.value +1)

effect(() => {
    console.log(cont.value+plusOne.value)
})

function increment() {
    count.value++
}

increment() 

输出结果 : 1 3 3

主要原因时执行优先级不同，输出1就不解释了。先执行pluseOne的runner，将plusOne的runner的dirty设置为true，然后通知他的依赖effect,这时由于plusOne的dirty为true，所以会再次执行pluseOne的get拿到新值2，再加上1就得到了3，同时也会设置dirty为false，然后再次执行count普通effect依赖， 由于dirty为false再次输出3