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

相关推荐
啊波次得饿佛哥19 分钟前
在winform中使用chromiumWebBrowser显示Echarts图表
前端·javascript·echarts·winform·cefsharp
秋天的一阵风1 小时前
突发奇想:border: 0 和boder: none 有区别吗?🤔🤔🤔
前端·css·html
秋天的一阵风1 小时前
🌈尘埃落定!ECMASCRIPT 2025 标准来袭,开发者的新福音🎁
前端·javascript·ecmascript 8
Coffeeee1 小时前
重新开始学Threejs,了解一下里面的一些高级几何体
前端·typescript·three.js
沉迷...1 小时前
el-input限制输入只能是数字 限制input只能输入数字
开发语言·前端·elementui
xx24061 小时前
date-picker组件的shortcuts为什么不能配置在vue的data的return中
前端·javascript·vue.js
古时的风筝1 小时前
Caddy 比Nginx 还优秀吗
前端·后端·程序员
Anlici2 小时前
无脑字节面基🥲
前端·面试·架构
古时的风筝2 小时前
Cursor 建议搭配 CursorRules 食用
前端·后端·cursor
前端南玖2 小时前
通过performance面板验证浏览器资源加载与渲染机制
前端·面试·浏览器