31 Vue 表单输入绑定的实现

news/2024/7/9 23:44:19 标签: vue, js

  前言 

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

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

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

 测试用例

测试用例如下, 一个简单的 v-model 的使用 

问题的调试

这里 HelloWorld 的 VueComponent 对应的 render 如下

可以大致能够看到的是 这里给 输入框增加了一个回调, 来更新 counter

更新了 counter 之后会级联走之后的所有更新流程 

然后这里是将 VNode.model 中的回调 转换到 VNode.on

然后 后面会将 VNode.on 中的回调注册到 VueComponent 的 _events[‘input’] 中

然后其 使用的流程 就和 上面的 click 的流程一致 

dom -> ElInput -> VueComponent.emit -> HelloWorld.elInput.model.callback

ElInput 的事件处理 

HelloWorld.elInput.model.callback 业务实例测回调的处理如下 


http://www.niftyadmin.cn/n/368471.html

相关文章

长连接心跳原理与机制工程上踩坑与优化

QA: 业务上对于心跳间隔一般怎么确定? 心跳间隔的确定一般需要根据具体业务场景和需求来进行。以下是一些常见的确定心跳间隔的方法: 根据应用场景和需求来确定心跳间隔。例如,在智能手环等健康监测设备中,心跳间隔通常设置为几秒钟到几分钟…

华为OD机试之真正的密码(Java源码)

真正的密码 题目描述 一行中输入一个字符串数组,如果其中一个字符串的所有以索引0开头的子串在数组中都有,那么这个字符串就是潜在密码在所有潜在密码中最长的是真正的密码,如果有多个长度相同的真正的密码,那么取字典序最大的为…

零基础自学黑客【网络安全】啃完这些足够了

我刚学网络安全,该怎么学?要学哪些东西?有哪些方向?怎么选? 怎么入门? 这个 Web 安全学习路线,整体大概半年左右,具体视每个人的情况而定。 (上传一直很模糊&#xff0c…

关于云计算和raid技术的对比

云计算和RAID技术是两个不同领域的概念,但它们可以在存储和数据保护方面进行对比。 云计算(Cloud Computing)是指通过网络将计算资源、存储资源和应用程序提供给用户的一种计算模式。它基于虚拟化技术,通过互联网实现按需访问和使…

springboot+springsecurity+jwt+elementui图书管理系统

​​图书管理系统​​ 关注公号&#xff1a;java大师&#xff0c;回复“图书”&#xff0c;获取源码 一、springboot后台 1、mybatis-plus整合 1.1添加pom.xml <!--mp逆向工程 --><dependency><groupId>org.projectlombok</groupId><artifactId&…

[动态规划]——线性DP(LIS/LCS/LCIS等) 详解

【引入】 线性DP&#xff0c;是较常见的一类动态规划问题&#xff0c;其是在线性结构上进行状态转移&#xff0c;这类问题不像背包问题、区间DP等有固定的模板 线性动态规划的目标函数为特定变量的线性函数&#xff0c;约束是这些变量的线性不等式或等式&#xff0c;目的是求…

Java经典笔试题—day14

Java经典笔试题—day14 &#x1f50e;选择题&#x1f50e;编程题&#x1f36d;计算日期到天数转换&#x1f36d;幸运的袋子 &#x1f50e;结尾 &#x1f50e;选择题 (1)定义学生、教师和课程的关系模式 S (S#,Sn,Sd,Dc,SA &#xff09;&#xff08;其属性分别为学号、姓名、所…

shell三剑客之grep

要想了解shell,grep是绕不过去的,今天就说说grep。 grep简介 grep是Linux中最常用的”文本处理工具”之一,grep与sed、awk合称为Linux中的三剑客。 grep (global search regular expression(RE) and print out the line,全面搜索正则表达式并把行打印出来)是一种强大的文…