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为falsedirty = falsetrigger(computed,"set",'value')}}
})
  1. 创建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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/855474.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

pygame游戏开发

Pygame游戏开发 pygame简介 模块库请参考:pygame官方文档 pygame可以用作游戏开发,但在商业游戏中真正的开发工具却不是pygame。使用pygame开发游戏周期长。 安装pygame 在pycharm中安装第三方库pygame: 在计算机中安装pygame&#xf…

ElasticSearch学习篇13_《检索技术核心20讲》进阶篇之LSM树

背景 学习极客实践课程《检索技术核心20讲》https://time.geekbang.org/column/article/215243,文档形式记录笔记。 内容 磁盘和内存数据读取特点 工业界中数据量往往很庞大,比如数据无法全部加载进内存,无法支持索引的高效实时更新&…

Nature Electronics|微器件在柔性基底上的高密度集成(可穿戴电子/界面调控/电子皮肤/柔性电子)

2024年4月22日,韩国首尔大学Yongtaek Hong和美国斯坦福大学Byeongmoon Lee团队,在《Nature Electronics》上发布了一篇题为“A site-selective integration strategy for microdevices on conformable substrates”的论文。论文内容如下: 一、 摘要 微器件可以被集成在柔性…

【GD32F303红枫派使用手册】第十九节

19.1 实验内容 通过本实验主要学习以下内容: SPI简介 GD32F303 SPI简介 SPI NOR FLASH——GD25Q32ESIGR简介 使用GD32F303 SPI接口实现对GD25Q32ESIGR的读写操作 19.2 实验原理 19.2.1 SPI简介 SPI(Serial Peripheral interface)&…

Django期末重点

思维导图 一、Djanog框架基础 MVT设计模式(model模型【操作数据库】、template模板【页面展示】、view视图【处理请求和调用模型模板】) 二、Django项目框架搭建 创建项目骨架 django-admin startproject 项目名启动服务 (1)p…

STM32(七)———TIM定时器(基本and通用)

文章目录 前言一、通用定时器TIM简介1.STM32F10X系列总共最多有八个定时器:2.三种STM32定时器的区别:3.STM32 的通用定时器功能:4.计数器模式 二、基本定时器1.基本定时器的结构框图2.定时时间的计算3.定时器的结构体和库函数 总结 前言 一个…

C#——文件读取BufferedStream类详情

文件读取BufferedStream类 BufferedStream字节流临时存储 缓存区是内存中字节块,用于缓存数据,减少对操作系统调用失败的次数,缓存区可以提升数据 用法: // 创建一个缓存区对象 参数是stream对象,指定字节临时存储的路径 Buffe…

如何利用机器学习算法进行数据分析和挖掘,数据优化、预处理、特征提取等老板吩咐的工作

在利用机器学习算法进行数据分析和挖掘时,数据优化、预处理和特征提取是非常重要的步骤。 1. 数据收集 收集相关数据,这是整个过程的起点和基础。数据可以来自多个来源,如数据库、API、网络爬虫等。 2. 数据预处理 数据预处理是保证数据质…

如何实现ElementUI动态表头?

可能看到这个标题,有些小伙伴会有些疑惑,动态表头是个什么东西,怎么没听说过? 其实动态表头在企业的项目中用途还是非常广泛的,比如erp系统什么的 那么动态表头是什么呢?说简单点就是让ElementUI的Table表格可以实现自定义表头展示+表头拖拽排序的一个功能 这个东西我…

<Rust><iced>基于rust使用iced构建GUI实例:如何将svg格式转为ico格式图片?

前言 本专栏是Rust实例应用。 环境配置 平台:windows 软件:vscode 语言:rust 库:iced、iced_aw 概述 本文是专栏第4篇实例,依旧是一个图像格式转换程序,基于rust的svg库resvg、图像处理库image以及文件处理库rfd。 流程是先用resvg获取svg图片的数据并将其转为png数据…

20.Dcoker跨宿主机容器通信之overlay

Dcoker跨宿主机容器通信之overlay http://www.cnblogs.com/CloudMan6/p/7270551.html 环境准备,三台机器,主机名为docker01(192.168.111.11)、docker02(192.168.111.12)、docker03(192.168.111…

电子竞赛5——作息时间控制器

一 . 题目要求 用单片机制作作息时间控制器;用四位数码管显示实时时钟(时、分,24小时制、12小时制),有秒闪,小时十位有零消隐;可用数字键或、-键校时(可快速、-)被校位&…

【ARMv8/ARMv9 硬件加速系列 4 -- 加解密 Cryptographic Extension 介绍】

文章目录 ARMv8.0 Cryptographic ExtensionFEAT_AESFEAT_PMULLFEAT_SHA1FEAT_SHA256ARMv8.2 扩展FEAT_SHA512FEAT_SHA3FEAT_SM3FEAT_SM4ARMv8.0 Cryptographic Extension ARMv8.0引入了加密扩展(Cryptographic Extension),旨在加速加密和解密操作。这一扩展通过新增专用指令…

redis雪崩问题怎么解决

Redis雪崩问题通常发生在大量缓存同时过期,导致所有请求直接打到数据库上,从而可能压垮数据库。解决这一问题的关键在于分散缓存失效时间,避免集中失效。此外,还可以通过限流、降级、预热等策略来进一步缓解压力。 下面是一个综合…

C++代码编写风格:Header-Only与声明实现分离的选择

C代码编写风格:Header-Only与声明实现分离的选择 最近看到一些小伙伴问到了几个比较有趣的问题,这里总结一下,这些都是实际面试中出现过的问题,看看你知道多少,考察一下底子。 面试问题1:你通常编写代码的风…

JAVA云HIS医院管理系统源码 云HIS系统的应用场景

JAVA云HIS医院管理系统源码 云HIS系统的应用场景 云HIS是针对中小医疗健康机构推出的一套基于云端的诊所云HIS服务平台,包括内部管理系统、临床辅助决策系统、体检系统、客户管理与服务系统、健康管理系统、知识管理系统、医患沟通系统、线上营销系统、其他外部系…

降价潮背后:中国产业大模型落地的卡点到底在哪?

“技术是不会以任何商业行为或者人们的意愿所改变它的上限和下限的,它需要的时间是恒定的。” 如果说中国大模型市场最核心的话题是什么?降价则必然是其中之一。 从目前的参赛玩家来看,不论是字节豆包,还是阿里、百度、腾讯、科…

PostgreSQL源码分析——常量表达式化简

常量表达式化简 常量表达式可以进行化简,可降低执行器计算表达式的代价。在逻辑优化阶段,会判断是否可以进行常量表达式化简,如果可以,则在执行器执行之前就预先对常量表达式树进行计算,计算出常量后,以新…

Linux系统之mtr命令的基本使用

Linux系统之mtr命令的基本使用 一、mtr命令介绍二、mtr命令使用帮助2.1 mtr命令的帮助信息2.2 mtr帮助信息解释 三、安装mtr工具四、mtr命令的基本使用4.1 直接使用4.2 设定ping次数4.3 禁用DNS解析4.4 显示IP地址4.5 调整间隔 五、总结 一、mtr命令介绍 mtr命令是一个网络诊断…

Multisim软件仿真之频谱分析仪

网络上有很多Multisim文件,有些是不能复现的,比如频谱仪,按照下面链接去操作,怎么也测试不出来波形,multisim频谱仪使用_multisim输入输出端口-CSDN博客。 原因分析: 1、博主设置参数未讲全,按…