vmodel双向绑定原理_【Vue原理】VModel白话版

专注 Vue 源码分享&＃xff0c;为了方便大家理解&＃xff0c;分为了白话版和 源码版&＃xff0c;白话版可以轻松理解工作原理和设计思想&＃xff0c;源码版可以更清楚内部操作和 Vue的美&＃xff0c;喜欢我就关注我的公众号&＃xff0c;公众号的文章&＃xff0c;排版更好看

如果你觉得排版难看&＃xff0c;请点击下面链接 或者 关注公众号

说到 Vue&＃xff0c;感觉第一印象就是双向绑定&＃xff0c;所以v-model键值是Vue印象的半壁江山啊&＃xff0c;这么重要的东西&＃xff0c;你好歹要知道是怎么实现的吧

我们今天就来讲解双向绑定的工作原理&＃xff0c;你应该知道&＃xff0c;双向绑定就是通过绑定 dom 事件来实现的&＃xff0c;可是&＃xff0c;怎么绑定的事件&＃xff0c;绑定什么事件&＃xff1f;

首先&＃xff0c;双向绑定&＃xff0c;我个人认为应该分为 初始化绑定 和 双向更新 两part。

初始化绑定&＃xff0c;就是初始化时给表单元素绑定值&＃xff0c;绑定事件&＃xff0c;为双向更新做准备

双向更新&＃xff0c;就是任意一边变化&＃xff0c;同时能让另一个边更新

双向更新那是后话&＃xff0c;只有一开始时成功执行绑定操作才会有之后 双向更新这个东西&＃xff0c;所以&＃xff0c;今天按顺序来了解两个part&＃xff0c;从四个问题开始

1、v-model 怎么给表单绑定数据

2、v-model 绑定什么事件

3、v-model 怎么绑定事件

4、v-model 如何进行双向更新

TIP

v-model 还可以用在 自定义组件上&＃xff0c;但是很明显&＃xff0c;这次我们先不讲这一块&＃xff0c;而是先将正常的表单使用

先看结论

我们先以 input text 类型讲解&＃xff0c;对于其他的表单元素&＃xff0c;流程都差不多&＃xff0c;只是中间涉及的内容不同。所以就先讲个例子&＃xff0c;然后具体在源码版全部一起说

1、怎么赋值&＃xff1f;v-model 绑定的数据赋值给表单元素的 value 属性

2、怎么绑定事件&＃xff1f;解析不同表单元素&＃xff0c;配置相应的事件名和事件回调&＃xff0c;在插入dom之前&＃xff0c;addEventListener 绑定上事件

3、怎么双绑&＃xff1f;外部变化&＃xff0c;触发事件回调&＃xff0c;event.target.value 赋值给model绑定的数据&＃xff1b;内部变化&＃xff0c;修改表单元素属性 value

看完结论&＃xff0c;有点懵&＃xff1f;我们来看看具体的内容&＃xff0c;结果导向来进行学习

下面的讲解以下面这个为例

v-model 怎么给表单绑定数据

获取值流程

首先&＃xff0c;上面例子解析后的渲染函数是下面这样&＃xff08;已简化&＃xff0c;只保留表单值相关&＃xff09;

1、这个渲染函数是没有执行的 匿名函数。执行的时候&＃xff0c;会绑定上下文对象为 组件实例

2、于是 with(this) 中的 this 就能取到 组件实例本身&＃xff0c;with 的代码块 顶层作用域 就绑定为了 组件实例

3、于是 with 内部变量的访问&＃xff0c;就会首先访问到 组件实例上。其中 name 的 获取&＃xff0c;就会先从 组件实例上获取&＃xff0c;相当于 vm.name。赋值完成后&＃xff0c;domProps 就是下面这样

4、上面的 value 是 v-model 解析成的原生属性&＃xff0c;保存在属于该节点 input 的 domProps 对象存储器中

绑定值流程

创建dom input 之后&＃xff0c;插入dom input 之前&＃xff0c;遍历该 input 的 domProps &＃xff0c;逐个添加给 input dom

简化后的代码像下面这样进行赋值

其中给节点赋值就是这样

v-model 绑定什么事件

不同的表单元素使用v-model&＃xff0c;会绑定不同的 事件

change 事件

select&＃xff0c;checkbox&＃xff0c;radio

input 事件

这是默认事件&＃xff0c;当不是上面三种表单元素时&＃xff0c;会解析成 input 事件

比如 text、number 等 input 元素和 textarea

TIP

实际上关于 input 和 textarea 绑定的事件远不止 input 一个事件&＃xff0c;但是涉及内容太多&＃xff0c;打算放在源码版说明&＃xff0c;这里先简单默认是 input 事件

v-model 怎么绑定事件

上面例子解析成下面的渲染函数&＃xff08;已简化&＃xff0c;只保留事件相关&＃xff09;

解析事件流程

1解析不同表单元素&＃xff0c;配置不同的事件

2拼装 事件回调函数&＃xff0c;不同表单元素&＃xff0c;回调不一样

3把 事件名和拼装回调 配套 保存给相应的表单元素的 on 事件存储器

什么时候绑定事件

生成 input dom 之后&＃xff0c;插入input dom 之前

怎么绑

使用之前保存的 事件名和 事件回调&＃xff0c;给 input dom 像下面这样绑定上事件

v-model 如何进行双向更新

双向&＃xff0c;指的是 外部和内部

外部变化&＃xff1a;用户手动改变表单值&＃xff0c;输入或者选择

内部变化&＃xff1a;从内部修改绑定值

内部变化

1、v-model 绑定了 name &＃xff0c;name 会收集到 本组件的 watcher

a. 下面渲染函数执行时&＃xff0c;会绑定本身组件实例为上下文对象

b. name 访问的是 组件实例的 name

c. name 此时便收集到了 当前正在渲染的组件实例&＃xff0c;当前渲染的实例是自己&＃xff0c;于是收集到了自身的 watcher

如果你不懂 收集 watcher 什么意思&＃xff0c;建议看下我的另一篇文章

【Vue原理】响应式原理 - 白话版

2、内部修改 name 变化&＃xff0c;通知收集器内的 watcher 更新&＃xff0c;所以本组件会更新&＃xff0c;上面的渲染函数重新执行&＃xff0c;便 重新从实例读取 name

3、重新给 input dom 的 value 赋值&＃xff0c;于是 页面就更新了

怎么赋值&＃xff1f;那是回到第一个问题了&＃xff0c;兄弟

外部变化

手动改变表单&＃xff0c;事件触发&＃xff0c;执行事件回调&＃xff08;下面这个&＃xff09;&＃xff0c;更新组件数据 name

更新内部数据流程

1、当事件触发的时候&＃xff0c;会把 表单的值 赋值给 name

2、name 是从 组件实例上访问的

3、所以这次赋值会 直接改变组件实例的 name

回调怎么赋值给组件实例的name&＃xff1f;

一开始不懂&＃xff0c;所以不理解&＃xff0c;也没查到&＃xff0c;写了个例子&＃xff0c;大概理解了意思

1、因为事件回调 在 with 里面声明

2、于是事件回调的 作用域链最顶层 就加上了一层 with 绑定的作用域

3、就算事件回调不在 with 中执行&＃xff0c;事件回调中的 变量访问&＃xff0c;也会先访问之前 with 绑定过的作用域&＃xff0c;因为作用域链的最顶层

with举栗子

你认为 fn 执行的时候&＃xff0c;会打印出什么呢&＃xff1f;行了&＃xff0c;给你看结果了

好吧&＃xff0c;再一次深刻认识到一个知识点&＃xff0c;with 绑定作用域原来这么强&＃xff0c;离开with执行&＃xff0c;还是先访问他的作用域&＃xff0c;脱离不出魔爪啊&＃xff0c;强盗作用域

回来总结&＃xff01;

于是当事件回调执行的时候&＃xff0c;会 直接赋值 给 组件实例的name&＃xff0c;这样便通过外部改变了内部数据

TIP

外部变化&＃xff0c;本来可能会存在一种情况

a、手动修改表单后&＃xff0c; 回调内会更新组件的值

b、组件的值更新之后&＃xff0c;会通知组件更新&＃xff0c;组件更新时&＃xff0c;便又会重新把input 赋值一遍

非常多余的一步操作&＃xff0c;所以这里&＃xff0c;Vue做一个判断&＃xff0c;判断旧值和 新值是否相等&＃xff0c;不等才更新&＃xff0c;关于旧值&＃xff0c;会保存在 dom 的 _value 属性

总结

v-model 三要素

1、绑定属性

2、绑定事件

3、属性&＃43;事件组合完成双向更新

历史分享

【Vue原理】Vue源码阅读总结大会 - 序

【Vue原理】学会调试Vue源码

【Vue原理】响应式原理 - 白话版

【Vue原理】Props - 白话版

【Vue原理】月老Computed - 白话版

【Vue原理】Watch - 白话版

【Vue原理】Mixin - 白话版

【Vue原理】Methods - 源码版

【Vue原理】Filters - 源码版

最后

希望你认真阅读后&＃xff0c;能豁然开朗。如果你懂了&＃xff0c;我的目的也达到了&＃xff0c;如果你还不懂&＃xff0c;可以留言告诉我哦&＃xff0c;百分百回复好吧

当然如果本文有任何描述不当的问题&＃xff0c;欢迎后台联系本人&＃xff0c;重谢

如果你认为有帮助的&＃xff0c;谢谢点个赞。如果写得不对的地方&＃xff0c;可以骂我