当前位置：首页 > news >正文

Vue.js---watch 的实现原理

news 来源：原创 2025/6/8 15:03:46

4.7 watch 的实现原理

watch本质上就是使用了effect以及options.scheduler

定义watch函数：

  // watch函数:传入参数source以及回调函数function watch(source , cb) {effect(() => source.foo,{scheduler(){// 回调函数cb()}})}

watch接收两个参数分别是source和cb

source 是一个对象，我们希望监听它的 foo 属性的变化。
cb 是一个回调函数，当 source.foo 发生变化时，这个回调函数会被执行。

watch的使用：

    // 使用watch函数watch(obj , () => {console.log('值发生改变')})// 修改响应数据的值，导致回调函数执行obj.foo++


值发生改变

**改为更加通用：**除了foo发生改变，其他的发生改变也可以

修改思路：使用函数对传入的对象循环读取，traverse函数：传入对象以及一个set集合(存储已经访问过的)，判断类型，类型过关就进行遍历。

    // traverse:值以及读取放入的setfunction traverse(value , seen = new Set){// 如果要读取的数据是原始值，或者已经读取过了，那么什么都不做if(typeof value !== 'object' || value === null || seen.has(value)){return;}// 暂时仅考虑value是一个对象，遍历valuefor(const k in value){traverse(value[k] , seen);}}// watch函数:传入参数source以及回调函数function watch(source , cb) {effect(// traverse() => traverse(source),{scheduler(){// 回调函数cb()}})}

壮大watch—getter函数：

修改思路：定义一个getter，如果source是函数类型直接使用getter函数，如果不是则递归调取

    // watch函数:传入参数source以及回调函数function watch(source , cb) {// 定义getterlet getter if(typeof source === 'function'){getter = source}else {getter = () => traverse(source)}effect(() => getter(),{scheduler(){// 回调函数cb()}})}

重要功能—新旧值

修改思路：这时候要拿到effect的返回参数，返回参数就是oldval，最核心的改动就是添加了懒加载lazy创建了一个懒加载effect，需要的时候才会执行,在值发生改变时，更新新值和旧值

    // watch函数:传入参数source以及回调函数function watch(source , cb) {// 定义getterlet getter if(typeof source === 'function'){getter = source}else {getter = () => traverse(source)}// 定义新旧值let newVal , oldValconst effectFn = effect(() => getter(),{lazy: true,scheduler(){// 值发生改变会发生，此时就有新值了newVal = effectFn()// 回调函数,传入新旧值cb(oldVal , newVal)// 一定要记得更新旧值oldVal = newVal}})// 调用effectFn就是旧值oldVal = effectFn();}

source以及回调函数
function watch(source , cb) {
effect(
// traverse
() => traverse(source),
{
scheduler(){
// 回调函数
cb()
}
}
)
}


**壮大watch---getter函数：**修改思路：定义一个getter，如果source是函数类型直接使用getter函数，如果不是则递归调取

// watch函数:传入参数source以及回调函数
function watch(source , cb) {// 定义getterlet getter if(typeof source === 'function'){getter = source}else {getter = () => traverse(source)}effect(() => getter(),{scheduler(){// 回调函数cb()}})
}


**重要功能---新旧值**修改思路：这时候要拿到effect的返回参数，返回参数就是oldval，最核心的改动就是添加了懒加载lazy创建了一个懒加载effect，需要的时候才会执行,在值发生改变时，更新新值和旧值

// watch函数:传入参数source以及回调函数
function watch(source , cb) {// 定义getterlet getter if(typeof source === 'function'){getter = source}else {getter = () => traverse(source)}// 定义新旧值let newVal , oldValconst effectFn = effect(() => getter(),{lazy: true,scheduler(){// 值发生改变会发生，此时就有新值了newVal = effectFn()// 回调函数,传入新旧值cb(oldVal , newVal)// 一定要记得更新旧值oldVal = newVal}})// 调用effectFn就是旧值oldVal = effectFn();
}

Vue.js---watch 的实现原理

4.7 watch 的实现原理 watch本质上就是使用了effect以及options.scheduler 定义watch函数： // watch函数:传入参数source以及回调函数function watch(source , cb) {effect(() > source.foo,{scheduler(){// 回调函数cb()}})}watch接收两个参数分别是source和c…...

编程日记 2025/5/27 6:31:34

Linux_ELF文件

目录前言： 一、ELF文件的类型二、ELF文件的组成格式 1. ELF头部(ELF Header) 2. 节头表(Section Header Table) 3. 程序头表(Program Header Table) 4. 节(Sections)与段(Segments) 三、ELF文件从形成到加载轮廓 1、ELF可执行文件形成过程 2、可执行文…...

编程日记 2025/5/22 7:58:07

磁盘I/O子系统

一、数据写入磁盘流程当执行向磁盘写入数据操作的时候，会发生如下的一系列基本操作。假设文件数据存在于磁盘扇区上，并且已经被读入到页缓存中。进程使用write()系统调用写入文件。内核更新映射到文件的page cache。内核线程pdflush负责把页缓存刷入…...

编程日记 2025/5/26 14:54:03

【2025 技术指南】如何创建和配置国际版 Apple ID

想要体验更丰富的应用生态、使用国际版专属服务，或访问更多开发者工具？一个国际版 Apple ID 能帮你实现这些需求。本教程将详细介绍如何注册国际版 Apple ID 并正确配置支付信息，全程操作简单，适合开发者和技术爱好者参考。一、准…...

编程日记 2025/5/18 12:13:02

C++（20）：文件输入输出库 —— ＜fstream＞

目录一、的核心功能二、核心类及功能三、核心操作示例 1. 文本文件写入（ofstream） 2. 文本文件读取（ifstream） 3. 二进制文件操作（fstream） 四、文件打开模式五、文件指针操作六、错误处理技巧…...

编程日记 2025/5/27 7:16:08

05、基础入门-SpringBoot-HelloWorld

05、基础入门-SpringBoot-HelloWorld ## 一、Spring Boot 简介 **Spring Boot** 是一个用于简化 **Spring** 应用初始搭建和开发的框架，旨在让开发者快速启动项目并减少配置文件。 ### 主要特点 - **简化配置**：采用“约定优于配置”的原则，减…...

编程日记 2025/5/29 18:05:34

深入理解指针(6)

目录 1 sizeof和strlen的对⽐ 1.1 sizeof 编辑1.2strlen 1.3 sizeof 和 strlen的对⽐ 2 数组和指针笔试题解析 2.1 ⼀维数组编辑 2.2 字符数组 3 指针运算笔试题解析 3.1 题⽬1： 编辑3.2 题目2 3.3 题目3 3.4 题目4 3.5 题目5 3.6 题目6 3.7…...

编程日记 2025/5/29 22:58:34

力扣HOT100之二叉树：108. 将有序数组转换为二叉搜索树

这道题之前做过，思路又给忘了，这道题用递归做是最简单的。由于得到的数组是有序的，我们只需要取出中间位置的元素medium作为根节点，然后medium左边的剩余元素组成根节点的左子树，medium右边的剩余元素组成根节点的右子…...

编程日记 2025/5/26 10:38:22

手撕I2C和SPI协议实现

手撕I2C和SPI协议实现目录 I2C协议原理I2C位操作实现I2C驱动代码编写SPI协议原理SPI位操作实现SPI驱动代码编写 I2C协议原理 I2C（Inter-Integrated Circuit）是一种串行通信总线，使用两根线：SCL（时钟线&#xff09…...

编程日记 2025/5/29 17:05:47

452. Minimum Number of Arrows to Burst Balloons

题目描述这道题用leetcode官方的解答反而搞复杂了。本题其实就是求重叠区间的交集。先按照区间左端点从小到大排序。然后拿出第一个区间作为【当前区间交集】的初始值。遍历后面的区间看那个区间和【当前交集】是否有重叠。如果有重叠则将【当前交集】和【当前区间】求交集并更…...

编程日记 2025/5/22 20:02:19

React 中，闭包陷阱

文章目录前言1. 经典闭包陷阱示例过期状态问题 2. 解决方案2.1 正确声明依赖数组2.2 使用 useRef 捕获最新值**2.3 使用函数式更新（针对状态更新）****2.4 使用 useCallback 冻结闭包** **3. 异步操作中的闭包陷阱****事件监听示例** **4. 自定义 Hooks …...

编程日记 2025/5/29 17:12:29

项目地址 1 Setup # 拉取VLMaps仓库，成功运行后会在主目录生成文件夹vlmapsgit clone https://github.com/vlmaps/vlmaps.git#通过 conda 创建虚拟环境conda create -n vlmaps python=3.8 -yconda activate vlmaps #激活环境cd vlmaps # 切换到项目文件下bash install.ba…...

编程日记 2025/6/1 17:04:06

qt6 c++操作qtableview和yaml

保存qtableview数据到yaml文件从yaml文件读取数据到qtableview qtableview在UI界面拖放。代码是问chat百度的深度探索。 - name: a1address: db1.dbw10type: int - name: a2address: db1.dbx1.0type: bool写到yaml，写前检查 bool plot1::isRowValid(const QStan…...

编程日记 2025/5/27 7:14:28

使用UniApi调用百度地图API的需要注意的地方

目录前言一、百度开放平台 1、功能简介 2、地点搜索服务 3、按行政区划检索API 二、Uniapi集成百度API 1、API集成流程 2、访问接口的定义 3、业务调用集成三、可能遇到的问题 1、指定输出格式无效 2、返回数据的总数四、总结前言在之前的系列博客中&#xf…...

编程日记 2025/6/3 20:31:26

（9）python开发经验

文章目录 1 os.path.join()拼接路径2 条件变量3 添加临时环境变量更多精彩内容👉内容导航 👈👉Qt开发 👈👉python开发 👈 1 os.path.join()拼接路径 os.path.join() 是 Python 中处理文件路径拼接的核心函…...

编程日记 2025/5/24 2:33:04

windows 10 做服务器其他电脑无法访问，怎么回事？

一般我们会先打开win10自己的防火墙策略，但是容易忽略电脑之间路由器上的防火墙，此时也需要查看一下，可以尝试先关闭路由器防火墙，如果可以了，再设置路由器上的防火墙规则。将路由器的上网设置改成路由模式 &a…...

编程日记 2025/5/29 9:24:00

mysql中limit深度分页详细剖析【爽文】

目录一 mysql中limit深度分页 1.1 背景描述 1.2 mysql深度分页很慢原因 1.2.1 mysql的sql执行流程 1.2.2 mysql的深度分页很慢原因 1.3 解决办法 1.3.1 覆盖索引 1.3.2 子查询 1.3.3 标签查询 1.3.4 分区表一 mysql中limit深度分页 1.1 背景描述 Limit深度分页造…...

编程日记 2025/5/28 7:35:03

【C++ Qt】布局管理器

每日激励：“不设限和自我肯定的心态：I can do all things。 — Stephen Curry” 🤔绪论： 在Qt开发中，界面布局的合理设计是提升用户体验的关键。早期，开发者常采用绝对定位的方式摆放控件，即通…...

编程日记 2025/5/22 10:40:25

Windows系统永久暂停更新操作步骤

目录 Windows系统永久暂停更新操作步骤打开运行窗口进入注册表编辑器导航路径图示新建并配置DWORD值新建值操作图示数值设置图示在系统设置中应用暂停暂停选项图示注意事项打开运行窗口按下键盘上的 Win键 R 组合键，调出“运行”对话框。进入组策略编…...

编程日记 2025/5/24 1:37:52

Java IO流进阶实战详解（含文件读写、拷贝、加密、字符集）

本文基于 Java 原生 IO 流，从最基础的字节流到字符流，再到实战案例（如文件夹拷贝、文件加密等）进行逐步深入讲解。适合有一定 Java 基础、希望掌握文件读写操作的。一、前言 Java IO（输入输出）是我们日常…...

编程日记 2025/5/29 18:58:35

JavaScript【7】BOM模型

1.概述： BOM（Browser Object Model，浏览器对象模型）是 JavaScript 中的一个重要概念，它提供了一系列对象来访问和操作浏览器的功能和信息。与 DOM（Document Object Model）主要关注文档结构不同&…...

编程日记 2025/5/29 12:14:20

STM32F10xx 参考手册

6. 什么是寄存器本章参考资料：《STM32F10xx 参考手册》、《STM32F10xx数据手册》、学习本章时，配合《STM32F10xx 参考手册》“存储器和总线架构”及“通用I/O(GPIO)”章节一起阅读，效果会更佳，特别是涉及到寄存器说明的部分。…...

编程日记 2025/5/29 10:16:22

使用instance着色

本节我们学习使用instance着色器进行着色 //拾取var handler new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);handler.setInputAction(function(movement){console.log(movement);var pickedObject viewer.scene.pick(movement.position);if(Cesium.defined(picke…...

编程日记 2025/5/26 14:50:49

MySQL——4、表的约束

表的约束 1、空属性2、默认值3、列描述4、zerofill5、主键6、自增长7、唯一键8、外键9、综合案例真正约束字段的是数据类型，但是数据类型约束很单一，需要有一些额外的约束，更好的保证数据的合法性，从业务逻辑角度保证数据的正确性…...

编程日记 2025/5/18 11:51:50

Datawhale PyPOTS时间序列5月第3次笔记

下游任务的两阶段(two-stage) 处理下载数据并预处理的程序： # ------------------------------- # 导入必要的库 # ------------------------------- import numpy as np import torch from benchpots.datasets import preprocess_physionet2012 from pypots.imp…...

编程日记 2025/5/29 20:33:01

初探Reforcement Learning强化学习【QLearning/Sarsa/DQN】

文章目录一、Q-learning现实理解：举例：回顾： 二、Sarsa和Q-learning的区别三、Deep Q-NetworkDeep Q-Network是如何工作的？前处理：Convolution NetworksExperience Replay 一、Q-learning 是RL中model-free、value-…...

编程日记 2025/6/2 19:27:29

计算机图形学编程(使用OpenGL和C++)(第2版)学习笔记 12.曲面细分

1. 曲面细分曲面细分着色器（Tessellation Shader）是OpenGL 4.0及以上版本引入的一种可编程着色器阶段，用于在GPU上对几何体进行细分，将粗糙的多边形网格自动细分为更平滑、更精细的曲面。它主要用于实现高质量的曲面渲染&#x…...

编程日记 2025/5/29 18:30:14

8天Python从入门到精通【itheima】-14~16

目录第二章学习内容总体预览： 14节-字面量： 1.学习目标：编辑 2.Python中6大常用数据类型： 3.实现：整数、浮点数、字符串类型的数据输出 4.字面量的定义： 5.小节总结 15节-注释： 1.le…...

编程日记 2025/5/29 10:54:01

Spring Boot 项目的计算机专业论文参考文献

技术范围：SpringBoot、Vue、SSM、HLMT、Jsp、PHP、Nodejs、Python、爬虫、数据可视化、小程序、安卓app、大数据、物联网、机器学习等设计与开发。主要内容：免费功能设计、开题报告、任务书、中期检查PPT、系统功能实现、代码编写、论文编写和辅导、论文…...

编程日记 2025/5/27 6:31:45

linux线程基础

1. 什么是线程进程是承担系统资源分配的基本实体，而线程（Thread）是进程内的一个执行单元，是CPU调度的基本单位。一个进程可以包含多个线程，这些线程共享进程的地址空间和资源（如文件描述符、全局变量等&a…...

编程日记 2025/5/27 6:37:40

进阶-数据结构部分：3、常用查找算法

飞书文档https://x509p6c8to.feishu.cn/wiki/LRdnwfhNgihKeXka7DfcGuRPnZt 顺序查找查找算法是指：从一些数据之中，找到一个特殊的数据的实现方法。查找算法与遍历有极高的相似性，唯一的不同就是查找算法可能并不一定会将每一个数据都进行访…...

编程日记 2025/5/29 12:37:31

JavaScript 中的 for...in 和 for...of 循环详解

在 JavaScript 中，for...in 和 for...of 是两种常用的循环结构，但它们有着不同的用途和行为。很多初学者容易混淆这两者，本文将详细解析它们的区别、适用场景以及注意事项。目录 for…in 循环基本用法遍历对象属性注意事项 for…of 循环 …...

编程日记 2025/5/22 9:59:33

【汇总】影视仓接口地址,影视仓最新配置接口【2025.5】

📦 TVBOX接口分类与制作加载指南结合参考资料，整理TVBOX接口的核心分类、制作方法及加载技巧，助你快速上手！ 🌐 一、接口分类 🌍 网络接口（远程URL） 特点：动态加载在线J…...

编程日记 2025/6/1 8:10:57

vue引用cesium，解决“Not allowed to load local resource”报错

vue引用cesium，解决“Not allowed to load local resource”报错TOC 工具 vscode node ：v22.14.0npm ：10.9.2vue：vue/cli 5.0.8 一、创建一个 Vue 3 项目 1.创建名为cesium_test的项目： vue create cesium_test2.…...

编程日记 2025/5/27 6:15:13

阿里云服务器跑模型教程

首先打开阿里云官网点击免费试用选择250工时/月的免费仨月新人试用套餐点击右上角主账号选择人工智能平台PAI 然后选择交互式建模(DSW) 选择新建实例起个名字然后点击确定点击打开进入到命令行工具下载MINIConda和对应的pytorch还有相关依赖库文件即可然后上传…...

编程日记 2025/5/29 11:45:49

JavaScript入门【2】语法基础

1.JavaScript的引⼊⽅式(使用): 1.方式1:行内引用: 此种方式是将<font style"color:rgb(38,38,38);">JavaScript代码作为HTML标签的属性值使⽤,示例如下:</font><html lang"en"> <head><meta charset"UTF-8"><…...

编程日记 2025/5/31 9:21:49

调用DeepSeek系列模型问答时，输出只有＜/think＞标签，而没有＜think＞标签

问题：调用DeepSeek系列模型问答时，输出结果缺少只有标签，而没有标签？ DeepSeek官方有关说明这里设置成这样是为了保证让模型的生成是以"<think>\n"开头的，然后开始思考过程，避免模型没…...

编程日记 2025/5/25 21:47:38

python：gimp 与 blender 两个软件如何协作？

GIMP（GNU Image Manipulation Program）和 Blender 是两个不同领域的开源工具，但它们在数字创作流程中常协同使用，以下是它们的主要联系和互补性： 1. 功能互补：2D 与 3D 的结合 GIMP 是专业的 2D 图像处理工…...

编程日记 2025/5/21 11:45:02

MMDetection环境安装配置

MMDetection 支持在 Linux，Windows 和 macOS 上运行。它需要 Python 3.7 以上，CUDA 9.2 以上和 PyTorch 1.8 及其以上。 MMDetection 至今也一直更新很多个版本了，但是对于最新的pytorch版本仍然不支持，我安装的时候仍然多次遇到m…...

编程日记 2025/5/29 12:34:02

【springboot+vue3的前后端分离项目实现支付宝的沙箱支付】

【springbootvue3的前后端分离项目实现支付宝的沙箱支付】以下是基于SpringBoot Vue前后端分离项目实现支付宝沙箱支付的完整解决方案，包含关键代码和调试技巧一、项目架构设计二、后端实现（SpringBoot） 1. 添加依赖 <!-- pom.xml…...

编程日记 2025/5/31 6:36:02

基于Llama3的开发应用（二）：大语言模型的工业部署

大语言模型的工业部署 0 前言1 ollama部署大模型1.1 ollama简介1.2 ollama的安装1.3 启动ollama服务1.4 下载模型1.5 通过API调用模型 2 vllm部署大模型2.1 vllm简介2.2 vllm的安装2.3 启动vllm模型服务2.4 API调用 3 LMDeploy部署大模型3.1 LMDeploy简介3.2 LMDeploy的安装3.3…...

编程日记 2025/6/2 15:22:15

MySQL只操作同一条记录也会死锁吗?

大家好，我是锋哥。今天分享关于【MySQL只操作同一条记录也会死锁吗?】面试题。希望对大家有帮助； MySQL里where条件的顺序影响索引使用吗？ 1000道互联网大厂Java工程师精选面试题-Java资源分享网在MySQL中，死锁通常发生在多…...

编程日记 2025/5/29 11:12:16

Linux的静态库共享库进程主函数的参数

1、库文件库文件库是一组预先编译好的方法的集合； Linux系统储存的位置一般在/lib和/usr/lib中库的头文件放在/usr/include 库分类：静态库（libxxx.a）共享库（libxxx.so） 静态库 （1&#…...

编程日记 2025/5/21 14:30:56

软件设计师考试结构型设计模式考点全解析

结构型设计模式考点全解析一、分值占比与考察趋势分析（75分制） 设计模式近5年平均分值考察频率趋势分析适配器模式3-5分高频保持稳定桥接模式2-3分中频略有上升组合模式4-6分高频持续重点装饰器模式3-4分高频稳定考察代理模式5-7分高频逐年增加外观模…...

编程日记 2025/5/28 16:39:22

Java-Objects类高效应用的全面指南

Java_Objects类高效应用的全面指南前言一、Objects 类概述二、Objects 类的核心方法解析2.1 requireNonNull系列方法：空指针检查的利器2.2 equals方法：安全的对象比较2.3 hashCode方法：统一的哈希值生成2.4 toString方法：灵活的对…...

编程日记 2025/5/27 7:46:19

PostGIS实现栅格数据入库-raster2pgsql

raster2pgsql使用与最佳实践一、工具概述 raster2pgsql是PostGIS提供的命令行工具，用于将GDAL支持的栅格格式（如GeoTIFF、JPEG、PNG等）导入PostgreSQL数据库，支持批量加载、分块切片、创建空间索引及金字塔概览，是栅格数据入库的核心工具。二、核心功能与典型用法 1…...

编程日记 2025/5/31 8:49:02

专题四：综合练习（组合问题的决策树与回溯算法）

以leetode77题为例题目分析： 给一个数字n，你可以在1到n中选k个数字进行组合，注意包括1和n，而且通过观察实例 1，2和2，1是一样的，所以我们画决策树的时候，只需要从当前位置往后列举…...

编程日记 2025/5/29 11:19:31

从神经架构到万物自动化的 AI 革命：解码深度学习驱动的智能自动化新范式

目录一、深度学习与 AI 自动化概述二、深度学习核心技术解析 2.1 常见深度学习架构 2.2 关键算法三、AI 自动化实践案例 3.1 图像分类自动化 3.2 自然语言处理自动化 —— 文本情感分析编辑五、自动化系统设计与实现 5.1 端到端自动化框架 5.2 自动化测试框架…...

编程日记 2025/5/30 19:42:48

3.5/Q1，GBD数据库最新文章解读

文章题目：Burden, trends, projections, and spatial patterns of lip and oral cavity cancer in Iran: a time-series analysis from 1990 to 2040 DOI：10.1186/s12889-025-22202-8 中文标题：伊朗唇癌和口腔癌的负担、趋势、预测和空间模式…...

编程日记 2025/5/29 17:55:49

智慧校园（含实验室）智能化专项汇报方案

该方案聚焦智慧校园（含实验室）智能化建设，针对传统实验室在运营监管、环境监测、安全管控、排课考勤等方面的问题，依据《智慧校园总体框架》等标准，设计数字孪生平台、实验室综合管理平台、消安电一体化平台三大核心平台，涵盖通信、安防、建筑设备管理等设施，涉及 395 个…...

编程日记 2025/5/27 6:52:30

4.7 watch 的实现原理

相关文章：