Vue的computed大致细节

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为falsedirty = falsetrigger(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