31 Vue 表单输入绑定的实现

news/2024/10/30 21:27:57/

  前言 

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

主要记录的是 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.ppmy.cn/news/97647.html

相关文章

真相只有一个——谁是凶手

谁是凶手 1.题目描述2. 解题思路3.代码展示 所属专栏:脑筋急转弯❤️ 🚀 >博主首页:初阳785❤️ 🚀 >代码托管:chuyang785❤️ 🚀 >感谢大家的支持,您的点赞和关注是对我最大的支持&am…

数据安全治理科技系统能力-数据安全复合治理框架和模型解读(3)

数据治理,数据安全治理行业在发展,在实践,所以很多东西是实践出来的,哪有什么神仙理论指导,即使有也是一家之说,但为了提高企业投产比,必要的认知是必须的,落地数据安全治理科技水平差异直接决定产品和项目是否可持续性,当前和未来更需要专业和有效创新。数据安全治理…

@Resource和@Autowired的区别

1.相同点 Resource和Autowired这两个注解的作用都是在Spring生态里面去实现Bean的依赖注入 2.不同点 2.1 Autowired 首先,Autowired是Spring里面提供的一个注解,默认是根据类型来实现Bean的依赖注入。 Autowired注解里面有一个required属性默认值是t…

MessageBoxA-函数原型-消息提示-显示为顶层窗口

文章目录 1.函数功能2.返回值3.示例 1.函数功能 显示一个模式对话框,其中包含系统图标、一组按钮和一条简短的应用程序特定消息,例如状态或错误信息。 消息框返回一个整数值,该值指示用户单击的按钮。 int MessageBoxA([in, optional] HWND…

【MySQL新手到通关】第六章 时间日期函数

文章目录 1.获取日期时间函数1.1 获取当前日期时间1.2 获取当前日期1.3 获取当前时间 2.日期格式化★★★2.1 日期转指定格式字符串2.2 字符串转日期 3.日期间隔3.1 增加日期间隔 ★★★3.2 减去一个时间间隔★★★3.3 日期相差天数(天)3.4 相差时间&…

1105 Spiral Matrix(32行代码+详细注释)

分数 25 全屏浏览题目 切换布局 作者 CHEN, Yue 单位 浙江大学 This time your job is to fill a sequence of N positive integers into a spiral matrix in non-increasing order. A spiral matrix is filled in from the first element at the upper-left corner, then…

关于强电与弱的的介绍

强电?弱电?傻傻分不清楚,今天海翎光电的小编为大家系统的介绍一下强电与弱电。 什么是强电? (1)供配电系统:供配电系统包括负荷分级、供电措施、负荷力矩、电网谐波限值、用电指标、负荷所需要…

RNN Seq2Seq

Feedforward v.s. Recurrent Feedforward network does not have input at each stepFeedforward network has different parameters for each layer 双向RNN 双向递归层可以提供更好的识别预测效果,但却不能实时预测,由于反向递归的计算需要从最末时刻…