Vue的computed大致细节

computed

computed

具体实现流程

  1. computer内部首先是标准化参数
  2. 然后调用runner函数进行依赖收集
  3. 设置dirty为true
  4. 创建副作用函数,具体如下
js 复制代码
const runner = effect(getter,{
    //延迟执行
    lazy:true,
    //标记为computed effect 用于咋trigger阶段的优先级排序
    computed:true,
    //调度执行实现
    scheduler:() => {
        //如果dirty为true,则执行副作用函数
        if(dirty){
            //设置dirty为false
            dirty = false
            trigger(computed,"set",'value')
        }
    }
})
  1. 创建computed对象,具体如下
js 复制代码
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函数

例题

javascript 复制代码
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

相关推荐
一张假钞2 分钟前
Firefox默认在新标签页打开收藏栏链接
前端·firefox
高达可以过山车不行3 分钟前
Firefox账号同步书签不一致(火狐浏览器书签同步不一致)
前端·firefox
m0_593758104 分钟前
firefox 136.0.4版本离线安装MarkDown插件
前端·firefox
掘金一周7 分钟前
金石焕新程 >> 瓜分万元现金大奖征文活动即将回归 | 掘金一周 4.3
前端·人工智能·后端
三翼鸟数字化技术团队25 分钟前
Vue自定义指令最佳实践教程
前端·vue.js
Jasmin Tin Wei1 小时前
蓝桥杯 web 学海无涯(axios、ecahrts)版本二
前端·蓝桥杯
圈圈编码1 小时前
Spring Task 定时任务
java·前端·spring
猿榜1 小时前
js逆向-喜某拉雅Xm-Sign参数解密
javascript
转转技术团队1 小时前
代码变更暗藏危机?代码影响范围分析为你保驾护航
前端·javascript·node.js
Spark2381 小时前
关于vue3整合tiptap的slash菜单的ts支持
vue.js