Observer和Dep以及wacher概念

  1. Observer(观察者): Observer用于将一个普通的JavaScript对象转换为响应式对象。它递归地遍历对象的所有属性并使用Object.defineProperty将它们转换为getter和setter。这样,在属性被获取或修改时,就能够触发相应的操作。

  2. Dep(依赖): Dep是一个依赖管理器,用于管理多个Watcher实例。在Vue的响应式系统中,每个响应式对象都有一个对应的Dep实例。当属性被访问时,会将依赖收集到该属性对应的Dep实例中,而当属性被修改时,会通知该属性对应的Dep实例,然后Dep实例会通知所有依赖的Watcher更新视图。

  3. Watcher(观察者): Watcher用于观察响应式对象的变化,并执行相应的回调函数。在Vue中,我们可以使用watch选项或$watch方法创建一个Watcher实例,用于监听某个属性的变化。当属性发生变化时,Watcher会接收到通知,并执行相应的回调函数。

下面是一个简单的例子,展示了如何在Vue中使用Watch

new Vue({data() {return {message: 'Hello, Vue!'};},watch: {message(newVal, oldVal) {console.log(`message的值从 ${oldVal} 变为 ${newVal}`);}}
});

在上述代码中,我们定义了一个watch选项,它包含一个message属性的监听器函数。当message属性发生变化时,监听器函数会被调用,接收到新值和旧值作为参数。

你也可以使用$watch方法来创建一个Watcher实例:

const vm = new Vue({data() {return {message: 'Hello, Vue!'};}
});
​
vm.$watch('message', (newVal, oldVal) => {console.log(`message的值从 ${oldVal} 变为 ${newVal}`);
});

通过$watch方法创建的Watcher实例可以手动销毁,使用unwatch方法:

const unwatch = vm.$watch('message', (newVal, oldVal) => {console.log(`message的值从 ${oldVal} 变为 ${newVal}`);
});
​
// 手动销毁Watcher
unwatch();

希望以上解释对你有所帮助!

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

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

相关文章

8/18二叉树的总结

二叉树的遍历方式: 递归前中后序144,145,94 二叉树:前中后序递归法 (opens new window) 迭代法通过队列模拟102 求二叉树的属性 101是否对称,左数的外侧和右数的外侧比较,左树的内侧和右树的内侧比较 …

案例-基于MVC和三层架构实现商品表的增删改查

文章目录 0. 项目介绍1. 环境准备2. 查看所有2.1 编写BrandMapper接口2.2 编写服务类,创建BrandService,用于调用该方法2.5 编写Servlet2.4 编写brand.jsp页面2.5 测试 3.添加3.1 编写BrandMapper接口 添加方法3.2 编写服务3.3 改写Brand.jsp页面&#x…

CMake教程6:调用lib、dll

之前我们学到了如何编写一个可执行程序和Library,在继续学习之前,需要解释下target,在cmake中我们可以给executable和library设置一个target名字,这样可以方便我们在后续对target进行更加详细的属性设置。 本节我们将学习如何在项…

利用logstash/filebeat/插件,将graylog日志传输到kafka中

1.graylog配置输出 在System-outputs,选择GELF Output,填写如下内容,其它选项默认 在要输出的Stream中,选择Manage Outputs 选择GELF Output,右边选择刚才创建好的test。 2.安装logstash,作为中间临时…

LeetCode 786. 第 K 个最小的素数分数

&#x1f517; 原题链接&#xff1a;786. 第 K 个最小的素数分数 本题可以暴力求解&#xff1a; class Solution { public:vector<int> kthSmallestPrimeFraction(vector<int>& arr, int k) {int n arr.size();vector<pair<int, int>> frac;for …

Vue使用jspdf和html2canvas组件库结合导出PDF文件

效果图&#xff1a; 1、安装依赖&#xff1a; npm install html2canvas --save npm install jspdf --save 或 yarn add html2canvas --save yarn add jspdf --save 2、封装全局调用方法&#xff1a;this.$exportPDF(#id,文件名) 新建js文件&#xff1a;/utils/html2Pdf.js&am…

在linux中,使用sh文件脚本启动jar项目

使用方法 sh 执行脚本.sh [start|stop|restart|status]sh文件内容 APP_NAMEXXXX.jar#使用说明&#xff0c;用来提示输入参数 usage() { echo "Usage: sh 执行脚本.sh [start|stop|restart|status]" exit 1 }#检查程序是否在运行 is_exist(){ pidps -ef|grep $APP_N…

数据结构:选择排序

简单选择排序 选择排序是一种简单直观的排序算法。首先在未排序序列中找到最大&#xff08;最小&#xff09;的元素&#xff0c;存放到排序学列的其实位置&#xff0c;然后在剩余的未排序的元素中寻找最小&#xff08;最大&#xff09;元素&#xff0c;存放在已排序序列的后面…

高等数学:牛顿迭代发解方程

现在高数也要介绍牛顿法了&#xff0c;一般都是从几何上直接以“切线法”直接引入的。这种引入方式的确很简单&#xff0c;但如果脱离深入一点的分析就不大容易解释后面的事情。所以就在想怎么更直接地从分析的角度来一条线贯穿&#xff0c;把整个过程说一说。 文章目录 一、牛…

【深度学习】PyTorch快速入门

【深度学习】学习PyTorch基础 介绍PyTorch 深度学习框架是一种软件工具&#xff0c;旨在简化和加速构建、训练和部署深度学习模型的过程。深度学习框架提供了一系列的函数、类和工具&#xff0c;用于定义、优化和执行各种深度神经网络模型。这些框架帮助研究人员和开发人员专注…

漏洞+常见漏洞修复建议

一、漏洞级别 高级别漏洞&#xff1a;大部分远程和本地管理员权限漏洞 中级别漏洞&#xff1a;大部分普通用户权限、权限提升、读懂受限文件、远程和本杜漏洞、拒绝服务漏洞 低级别漏洞&#xff1a;大部分远程非授权文件存取、口令恢复、欺骗、信息泄露漏洞 二、漏洞扫描的…

Kotlin Lambda和高阶函数

Lambda和高阶函数 本文链接&#xff1a; 文章目录 Lambda和高阶函数 lambda输出&#xff08;返回类型&#xff09;深入探究泛型 inline原理探究 高阶函数集合、泛型自己实现Kotlin内置函数 扩展函数原理companion object 原理 > 静态内部类函数式编程 lambda 1、lambda的由…

Flink流批一体计算(13):PyFlink Tabel API之SQL DDL

1. TableEnvironment 创建 TableEnvironment from pyflink.table import Environmentsettings, TableEnvironment# create a streaming TableEnvironmentenv_settings Environmentsettings.in_streaming_mode()table_env TableEnvironment.create(env_settings)# or create…

嵌入式Linux开发实操(九):CAN接口开发

前言: CAN网络在汽车中的使用可以说相当广泛。而CAN网络需要的收发器最常用的就是NXP 的TJA1042: CAN网络:

605. 种花问题

链接 假设有一个很长的花坛&#xff0c;一部分地块种植了花&#xff0c;另一部分却没有。可是&#xff0c;花不能种植在相邻的地块上&#xff0c;它们会争夺水源&#xff0c;两者都会死去。给你一个整数数组 flowerbed 表示花坛&#xff0c;由若干 0 和 1 组成&#xff0c;其中…

8/16总结

WebSocket是双向通信协议&#xff0c;模拟Socket协议&#xff0c;可以双向发送或者接收信息 而Http是单向的 WebSocket是需要浏览器和服务器握手进行建立连接的 而http是浏览器发起向服务器的连接&#xff0c;服务器预先并不知道这个连接 WebSocket在建立握手时&#xff0c;数…

Python3内置函数大全

吐血整理 Python3内置函数大全 1.abs()函数2.all()函数3.any()函数4.ascii()函数5.bin()函数6.bool()函数7.bytes()函数8.challable()函数9.chr()函数10.classmethod()函数11.complex()函数12.complie()函数13.delattr()函数14.dict()函数15.dir()函数16.divmod()函数17.enumer…

注解@JsonInclude

注解JsonInclude 1. 注解由来 JsonInclude是一个用于Java类中字段或方法的注解&#xff0c;它来自于Jackson库。Jackson库是一个用于处理JSON数据的流行开源库&#xff0c;在Java对象和JSON之间进行序列化和反序列化时经常被使用。 2. 注解示例 下面是JsonInclude注解的一个…

【kubernetes】Pod控制器

目录 Pod控制器及其功用 pod控制器有多种类型 1、ReplicaSet ReplicaSet主要三个组件组成 2、Deployment 3、DaemonSet 4、StatefulSet 5、Job 6、Cronjob Pod与控制器之间的关系 1、Deployment 查看控制器配置 查看历史版本 2、SatefulSet 为什么要有headless&…

2023-08-18力扣每日一题

链接&#xff1a; 1388. 3n 块披萨 题意&#xff1a; 一个长度3n的环&#xff0c;选n次数字&#xff0c;每次选完以后相邻的数字会消失&#xff0c;求选取结果最大值 解&#xff1a; 这波是~~&#xff08;ctrl&#xff09;CV工程师了~~ 核心思想是选取n个不相邻的元素一定…