21 VueComponent 事件的处理

news2024/10/6 14:23:37

前言 

这是最近的碰到的那个 和响应式相关的问题 特定的操作之后响应式对象不“响应“了 引起的一系列的文章 

主要记录的是 vue 的相关实现机制 

呵呵 理解本文需要 vue 的使用基础, js 的使用基础 

测试用例

测试用例如下, 一个简单的 按钮事件的触发  

问题的调试

调用具体的 @click 的回调函数的堆栈信息如下

注册到原生 js 的事件, 这个 invoker 是原生的按钮, 他的处理函数为 el-button 的 handleClick

来到了 el-button, 他的 handleClick 为 this.$emit("click", e)

Vue 组件本身的事件处理, 获取组件的 vm._events['click'] 事件, 然后触发, vm._events['click'] 的处理为 invoker

这个 invoker 的处理函数为 业务上面注册的 handleClick

 这里的 vm 为触发事件对应的组件 VueComponent

vm._events 中包含的是各个事件 以及处理函数

click 的处理函数为 invoker, 组合了 handleClick 函数 

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

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

相关文章

理解 Linux 文件权限

章节目录: 一、Linux 的安全性1.1 /etc/passwd 文件1.2 /etc/shadow 文件1.3 添加新用户1.4 删除用户1.5 修改用户 二、使用 Linux 组2.1 /etc/group 文件2.2 创建新组2.3 修改组 三、理解文件权限3.1 使用文件权限符号3.2 默认文件权限 四、更改安全设置4.1 修改权…

chatgpt赋能python:Python如何捕捉窗口?——一位有10年Python编程经验的工程师谈Windows操作系统编程

Python 如何捕捉窗口?——一位有10年Python编程经验的工程师谈Windows操作系统编程 自从计算机出现以来,人们就开始与操作系统打交道。而对于Windows系统而言,捕捉窗口通常需要在应用程序级别完成。但是,使用Python与Windows编程…

新手须知的pr入门知识,小红书媒介话术分享

我们都知道,这是一个内容为王的时代。在众多的平台上,都存着无数优秀的内容产出者,也就是达人。今天对新手须知的pr入门知识,小红书媒介话术分享。 一、什么是pr PR即Public Relations的简称,翻译过来就是公关的意思 。…

惠普HP4294A(110M) 安捷伦agilent 4294a精密阻抗分析仪

HP/Agilent 4294A 精密阻抗分析仪是一种集成解决方案,可对元件和电路进行有效的阻抗测量和分析。HP/Agilent 4294A 覆盖更宽的测试频率范围(40 Hz 至 110 MHz),基本阻抗精度为 /-0.08%。出色的高 Q/低 D 精度可实现低损耗组件的分…

恭喜,拿到华为OD offer了,并分享刷题经验

目录 一、先介绍一下华为OD是个什么鬼?1、华为OD背景2、华为OD现状3、华为OD趋势4、华为OD介绍(1)人力外包(2)员工关系(3)工作关系(4)薪酬福利(5)…

Window MinGW 编译 OpenCV 人快疯了看这里!

目录 一、使用官方编译好的 二、使用MinGW编译器自行进行编译 三、编译好的OpenCV库 OpenCV3.4.5 OpenCV 4.5.4 一、使用官方编译好的 【Qt】opencv源码&官方编译好的opencv在windows下使用的区别_外来务工人员徐某的博客-CSDN博客 官方替我们编译好了,可以直…

一篇文章带你了解Netty

Netty 传统的IO模型的web容器,比如老版本的Tomcat,为了增加系统的吞吐量,需要不断增加系统核心线程数量,或者通过水平扩展服务器数量,来增加系统处理请求的能力。有了NIO之后,一个线程即可处理多个连接事件…

DNSPod十问崔久强:证书有效期缩短,CA机构要凉透?

本期嘉宾 崔久强 上海CA中心总经理 崔久强,上海市数字证书认证中心有限公司总经理、上海市静安区政协委员、第一届上海市智慧城市建设领军先锋、一带一路信息产业发展联盟数字签名专委会主任委员、中国电子认证产业联盟专委会委员、中国密码学会电子认证专委会理事…

【P35】JMeter 包含控制器(Include Controller)

文章目录 一、包含控制器(Include Controller)参数说明二、准备工作三、测试计划设计3.1、保存测试片段3.2、使用测试片段 一、包含控制器(Include Controller)参数说明 可以将测试计划的某一部分提取为公用逻辑,这样…

Goby 漏洞更新 |中保無限Modem Configuration Interface 默认口令漏洞

漏洞名称:中保無限Modem Configuration Interface 默认口令漏洞 English Name:Gemtek Modem Configuration Interface Default password vulnerability CVSS core: 5.0 影响资产数:4521 漏洞描述: Modem Configuration Inter…

chatgpt赋能python:Python操作网页的SEO

Python操作网页的SEO 在当今的数字时代,许多企业专注于提高其网站的排名。在这种竞争激烈的环境中,搜索引擎优化(SEO)是必不可少的。虽然有许多方法可以提高网站的排名,但其中一个最重要的是使用Python来操作网页。 …

Git进阶·GitFlow·壹

文章目录 1 Git进阶——GitFlow工作流程1.1 master与develop分支1.1.1 master1.1.2 develop 1.2 feature分支1.3 Release分支1.4 hotfix分支1.5 GitFlow示例1.5.1 在master上新建dev分支1.5.2 基于dev创建feature分支1.5.3 feature分支上开发业务代码1.5.4 将feature合并到dev1…

Linux的进程信号(上)

文章目录 1. 信号入门2. 技术应用角度的信号3. 信号概念4. 信号处理常见方式5. 产生信号5.1 通过终端按键产生信号5.2 调用系统函数向进程发信号5.3 由软件条件产生信号5.4 硬件异常产生信号 6. Core Dump 1. 信号入门 在生活中,比如红绿灯,铃声这些&am…

chatgpt赋能python:Python指定行:如何快速定位和修改代码?

Python指定行:如何快速定位和修改代码? 在日常Python编程中,我们经常需要在众多行的代码中找到一个特定行,进行修改或者执行操作。如果依靠肉眼逐行检查,不仅费时费力,而且容易漏看或者出错。那么有没有一…

chatgpt赋能Python-python_或与非

介绍 随着互联网的不断发展,搜索引擎优化(SEO)已经成为了数百万网站主必不可少的一项工作。而Python作为一门高效,灵活和易于阅读的编程语言,不仅可以加快SEO的工作进程,同时也可以提高工作效率。本文将重…

Linux读写锁逻辑解析

一、Linux为何会引入读写锁? 除了mutex,在linux内核中,还有一个经常用到的睡眠锁就是rw semaphore(后文简称为rwsem),它到底和mutex有什么不同呢?为何会有rw semaphore?无他&#xf…

在Flask中构建API接口

重定向行为 斜杠 以下两个路由的不同之处在于是否使用尾部的斜杠。 第一个路由的URL尾部有一个斜杠,看起来就像一个文件夹,访问一个没有斜杠结尾的URL时,Flask会自动进行重定向,在结尾加上一个斜杠。 第二个路由的URL没有尾部…

CVPR 2023 | 风格迁移论文3篇简读,视觉AIGC系列

CAP-VSTNet: Content Affinity Preserved Versatile Style Transfer 内容相似度损失(包括特征和像素相似度)是逼真和视频风格迁移中出现伪影的主要问题。本文提出了一个名为CAP-VSTNet的新框架,包括一个新的可逆残差网络(reversib…

微信小程序一键登录功能,使用uni-app和springboot(JWT鉴权)

目录 概述 微信登录接口说明 关于获取微信用户的信息 前端代码(uni-app) 后端代码(SpringBoot) 配置文件:application.yml 配置文件:Pom.xml 类:WeChatModel 类:WeChatSe…

《面试1v1》JVM内存模型

聊聊 JVM 内存模型 我是 javapub,一名 Markdown 程序员从👨‍💻,八股文种子选手。 面试官: 你好,请问你对JVM内存模型有了解吗? 候选人: 当然,JVM内存模型是Java程序运…