vue中的watcher

前言

Vue 中的 watcher 是一种特殊的对象,它可以订阅响应式数据的变化,并在变化时执行相应的回调函数。

Vue 中有三种类型的 watcher

  • 渲染 watcher 是负责更新视图的 watcher,每个组件实例都有一个对应的渲染 watcher。当组件实例创建时,会创建一个渲染 watcher,并执行组件的 render 函数,同时收集该组件依赖的响应式数据。当这些数据变化时,渲染 watcher 会触发组件重新渲染。
  • 计算属性 watcher 是负责执行计算属性的 watcher,每个计算属性都有一个对应的计算属性 watcher。当计算属性被访问时,会创建一个计算属性 watcher,并执行计算属性的 getter 函数,同时收集该计算属性依赖的响应式数据。当这些数据变化时,计算属性 watcher 会触发计算属性的重新求值,并通知其依赖的 watcher 更新。
  • 用户 watcher 是用户通过 watch API 自定义的 watcher,可以用来监听一个或多个响应式数据,并在数据变化时执行自定义的回调函数。用户可以通过一些选项来配置用户 watcher 的行为,例如 immediate、deep、sync 等。

watcher 被收集的时机主要有以下几种:

  • 组件实例创建时,会创建一个渲染 watcher,并执行组件的 render 函数,此时会触发响应式数据的 getter 函数,将渲染 watcher 收集到数据的依赖列表中。
  • 计算属性被访问时,会创建一个计算属性 watcher,并执行计算属性的 getter 函数,此时会触发响应式数据的 getter 函数,将计算属性 watcher 收集到数据的依赖列表中。
  • 用户通过 watch API 创建一个用户 watcher 时,如果设置了 immediate 选项为 true,会立即执行用户 watcher 的回调函数,此时会触发响应式数据的 getter 函数,将用户 watcher 收集到数据的依赖列表中。
  • 用户通过 watch API 创建一个用户 watcher 时,如果设置了 deep 选项为 true,会对监听的响应式对象进行深度遍历,将用户 watcher 收集到对象的所有嵌套属性的依赖列表中。

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

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

相关文章

『Linux升级路』基础开发工具——gdb篇

🔥博客主页:小王又困了 📚系列专栏:Linux 🌟人之为学,不日近则日退 ❤️感谢大家点赞👍收藏⭐评论✍️ 目录 一、背景知识介绍 二、gdb指令介绍 一、背景知识介绍 在软件开发中&#xff0c…

WT2003HX高品质MP3语音芯片,支持立体声输出的应用优势

在当今的音频处理领域,立体声输出已经成为一项基本的需求。许多电子产品都要求能够支持立体声音效,为用户提供更为沉浸式的音频体验。针对这一市场需求,唯创知音推出了WT2003HX高品质MP3语音芯片,该芯片支持立体声输出&#xff0c…

Ubuntu 常用命令之 cal 命令用法介绍

📑Linux/Ubuntu 常用命令归类整理 cal命令在Ubuntu系统下用于显示日历。它可以显示任何特定月份或整个年份的日历。 cal命令的参数如下 -1:只显示当前月份的日历。-3:显示前一个月、当前月和下一个月的日历。-s:指定日历的开始…

latex中工具包pdfcrop的使用:pdf自动裁剪

这里写自定义目录标题 https://blog.csdn.net/love_ljq/article/details/77604218 很多时候,我们在WORD或者是PPT里画完图之后,需要转换为矢量图,转换为矢量图有很多种方式,有一种方式就是转换为PDF文件,转换为PDF有一…

Redis命令参考手册完整版

Redis命令参考手册完整版 Key(键)DELKEYSRANDOMKEYTTLPTTLEXISTSMOVERENAMERENAMENXTYPEEXPIREPEXPIREEXPIREATPEXPIREATPERSISTSORT 获取 name 和 password<br />redis> SORT user_id BY user_level_* DESC GET user_name_* GET<br />user_password_*<br /&…

Linux chattr命令

Linux chattr命令用于改变文件属性。 这项指令可改变存放在ext2文件系统上的文件或目录属性&#xff0c;这些属性共有以下8种模式&#xff1a; a&#xff1a;让文件或目录仅供附加用途。 b&#xff1a;不更新文件或目录的最后存取时间。 c&#xff1a;将文件或目录压缩后存放…

ant-design-vue Message 用法以及内容为 html片段情况

全局配置&#xff1a; // main.ts// 进行全局配置 message.config({top: 0.7rem,//高度位置duration: 2,//提示持续时间maxCount: 1,//最大页面同时展示几条 });项目中最常用的用法&#xff1a; 1. 字符串 message.success("导入成功");2. html片段 message.error…

设计模式分类

不同设计模式的复杂程度、 细节层次以及在整个系统中的应用范围等方面各不相同。 我喜欢将其类比于道路的建造&#xff1a; 如果你希望让十字路口更加安全&#xff0c; 那么可以安装一些交通信号灯&#xff0c; 或者修建包含行人地下通道在内的多层互通式立交桥。 最基础的、 底…

音视频直播核心技术

直播流程 采集&#xff1a; 是视频直播开始的第一个环节&#xff0c;用户可以通过不同的终端采集视频&#xff0c;比如 iOS、Android、Mac、Windows 等。 前处理&#xff1a;主要就是美颜美型技术&#xff0c;以及还有加水印、模糊、去噪、滤镜等图像处理技术等等。 编码&#…

vue中监听Form表单值的变化

想要监听From表单中某个值的变化需要用到vue中的 watch watch: {inputForm.isHeating() {this.inputForm.otherHeating}}, isHeating是表单中的某个值&#xff0c;如果他变化就会清空另一个值

泛微OA C# 调用 WebAPI功能实现

泛微OA C# 调用 WebAPI功能实现 OA 在线文档地址1. 创建流程字段参数 mainData 简单说明字段表明细表2. 接口封装2.1 接口初始化2.2 接口注册2.3 获取Token2.4 拼装 Headers2.5 常用工作流方法2.5.1 创建2.5.2 删除2.5.3 撤回2.5.4 退回3. 接口调用OA 在线文档地址 Token认证 …

12.21_黑马数据结构与算法笔记Java

//最近在复习&#xff0c;&#xff0c;java的进度会比较慢一些 目录 219 排序算法 基数排序2 220 排序算法 java排序 221 排序 e01 根据另一个数组次序排序 222 排序 e02 根据出现频率排序 thinking&#xff1a;关于比较器 223 排序 e03 最大间距 解法1&#xff08;超出内…

快速学习 webpack

目录 1. webpack基本概念 webpack能做什么&#xff1f; 2. webpack的使用步骤 2.1_webpack 更新打包 3. webpack的配置 3.1_打包流程图 3.2_案例-webpack隔行变色 3.3_插件-自动生成html文件 3.4_加载器 - 处理css文件问题 3.5_加载器 - 处理css文件 3.6_加载器 - 处…

Linux文件目录结构与术语

/ 下的目录&#xff08;图形化界面样式&#xff09; Linux常用术语: 1.目录 -> 在Windows中叫文件夹 2.路径 -> 在Windows中叫文档所在的位置(如&#xff1a;文档hello.txt所在的位置是Winodws中的 D:\www文件夹下,也可以描述为&#xff1a;helllo.txt所在的路径是C:\www…

使用PE信息查看工具和Beyond Compare文件比较工具排查dll文件版本不对的问题

目录 1、问题说明 2、修改了代码&#xff0c;但安装版本还是有问题 3、使用PE信息查看工具查看音视频库文件&#xff08;二进制&#xff09;的时间戳 4、使用Beyond Compare比较两个库文件的差异 5、找到原因 6、最后 C软件异常排查从入门到精通系列教程&#xff08;专栏…

uniapp中使用封装步骤条组件

针对步骤条封装完终于清清楚楚啦 先看效果&#xff1a; 附上代码&#xff1a;使用可直接复用&#xff1a;数据是写在了当前组件中&#xff0c;如有必须&#xff0c;可以使用其中的props传值stepInfos传递相应的数据&#xff0c;根据steps步数就可以控制走到哪一步啦 <temp…

vue3+vite+ts父子组件之间的传值

vue3vitets父子组件之间的传值 前言一、父组件向子组件传值二、子组件向父组件传值三、非父子组件传值&#xff0c;也就是任意两个组件的传值&#xff0c;和vue2基本相似&#xff0c;这里就不描述了&#xff0c;vue3里面建议大家使用pinia来进行传值。 前言 提示&#xff1a;这…

laravel框架引用kafka

在 Laravel 中操作 Kafka&#xff0c;可以使用 php-rdkafka 扩展或 confluent-kafka-php 扩展。 以下展示如何使用 confluent-kafka-php 扩展来在 Laravel 中使用 Kafka。 操作步骤说明&#xff1a; 1、安装 confluent-kafka-php 扩展。您可以使用 Composer 进行安装&#x…

SpaceDesk如何连接平板/PC(生产力副屏)

1、下载安装 分为安卓端和PC端&#xff0c;两个设备都需要安装对应的软件。 SpaceDesk官网 https://link.zhihu.com/?targethttp%3A//spacedesk.net/ 需要魔法上网。安装过程比较简单&#xff0c;无脑下一步即可。 我已经把安装包准备好了&#xff0c;如果不想自己找&#…

Linux互斥锁pthread_mutex_lock和pthread_mutex_unlock

当一个进程中存在两个及以上的线程时&#xff0c;线程间会互相争夺共享资源&#xff0c;导致单个线程中的执行秩序会被打乱。所以需要用到互斥锁来进行秩序控制&#xff0c;保证单个线程中的程序先执行完毕。 2、创建互斥锁pthread_mutex_init(); int pthread_mutex_init(pth…