详解vue v-model


Posted in Javascript onAugust 31, 2020

1. v-model原理

vue中v-model是一个语法糖,所谓的语法糖就是对其他基础功能的二次封装而产生的功能。简单点说,v-model本身就是父组件对子组件状态以及状态改变事件的封装。其实现原理上分为两个部分:

通过props设置子组件的状态
通过监听子组件发出的事件改变父组件的状态,从而影响子组件的props值
通过以上两个部分,实现了父组件的状态和子组件状态进行了绑定的效果。

1.1 demo

v-model使用示例

<!DOCTYPE html>
<html>
 <head>
 <meta charset="utf-8" />
 <title>v-model示例</title>
 <script type="text/javascript" src="vue.js"></script>
 </head>

 <body>
 <div id="app">
 <div>这里是父组件的状态:</div>
 <div style="margin-bottom: 15px;">{{content}}</div>
 <Child v-model="content"></Child>
 </div>

 <template id="input">
 <div>
 <div>这里是子组件的输入区域:</div>
 <input :value="value" @input="contentChange" />
 </div>
 </template>

 <script type="text/javascript">
 var Child = {
 template: "#input",
 props: {
 value: {
 type: String,
 required: true
 }
 },
 methods: {
 contentChange(value){
 this.$emit("input", value.target.value);
 }
 }
 };

 var vueInstance = new Vue({
 el: "#app",
 components: {Child},
 data: {
 content: ""
 }
 })
 </script>
 </body>
</html>

在浏览器中打开上述html页面,可以看到实时效果:在子组件中的input框中输入内容可以在父组件区域实时显示,达到了子组件中状态和父组件状态实时绑定的效果。

2. 修改v-model默认监听的事件和设置prop的名称

v-model指令默认是在子组件上设置的prop名称是value,默认监听子组件上的input事件,在上面的demo上,如果我们修改子组件contentChange函数中发出的事件名称,在父组件中就无法实时获取到子组件的输入。

Vue中提供了通过在子组件上定义model属性来修改这两个参数名称的功能,不过该功能需要在版本2.2以上才能使用,如下demo所示:

2.1 demo

<!DOCTYPE html>
<html>
 <head>
 <meta charset="utf-8" />
 <title>v-model示例</title>
 <script type="text/javascript" src="vue.js"></script>
 </head>

 <body>
 <div id="app">
 <div>这里是父组件的状态:</div>
 <div style="margin-bottom: 15px;">{{content}}</div>
 <Child v-model="content"></Child>
 </div>

 <template id="input">
 <div>
 <div>这里是子组件的输入区域:</div>
 <input :value="content" @input="contentChange" />
 </div>
 </template>

 <script type="text/javascript">
 var Child = {
 template: "#input",
 model: {
 prop: "content",
 event: "contentChanged"
 },
 props: {
 content: {
 type: String,
 required: true
 }
 },
 methods: {
 contentChange(value){
 this.$emit("contentChanged", value.target.value);
 }
 }
 };

 var vueInstance = new Vue({
 el: "#app",
 components: {Child},
 data: {
 content: ""
 }
 })
 </script>
 </body>
</html>

3. Vue中对v-model指令处理分析

基于Vue2.0版本,分析我们在标签上写上v-model属性到vue组件实现响应的流程。

3.1 解析部分

3.1.1 在将HTML解析称AST时,会解析HTML中标签的属性

function processAttrs(el){
 ...
 name = name.replace(dirRE, '')
 // parse arg
 const argMatch = name.match(argRE)
 if (argMatch && (arg = argMatch[1])) {
 name = name.slice(0, -(arg.length + 1))
 }
 addDirective(el, name, value, arg, modifiers)
 ...
}

提取指令的名称,v-model的指令名称name为model,然后添加到实例的指令中

3.1.2 将指令相关内容添加到实例指令中

export function addDirective (
 el: ASTElement,
 name: string,
 value: string,
 arg: ?string,
 modifiers: ?{ [key: string]: true }
) {
 (el.directives || (el.directives = [])).push({ name, value, arg, modifiers })
}

在实例的指令属性中添加相应的指令,这样就实现了从html上的属性到Vue实例上指令格式的转换

3.2 指令设置部分

在将html解析称AST之后,实例对应的directives属性上就有了我们设置的v-model相关的值,包括参数值value,name是model

3.2.1 调用指令的构造函数

function genDirectives (el: ASTElement): string | void {
 const dirs = el.directives
 if (!dirs) return
 let res = 'directives:['
 let hasRuntime = false
 let i, l, dir, needRuntime
 for (i = 0, l = dirs.length; i < l; i++) {
 dir = dirs[i]
 needRuntime = true
 const gen = platformDirectives[dir.name] || baseDirectives[dir.name]
 if (gen) {
 // compile-time directive that manipulates AST.
 // returns true if it also needs a runtime counterpart.
 needRuntime = !!gen(el, dir, warn)
 }
 ...
}

在v-model指令的构造函数中会根据tag的种类进行不同的创建函数进行创建,如果我们自定义指令需要在子组件上添加属性,也需要在这个函数里面进行操作

3.2.2 普通tag下的v-model指令构造过程

function genDefaultModel 
 el: ASTElement,
 value: string,
 modifiers: ?Object
): ?boolean {
 ...
 addProp(el, 'value', isNative ? `_s(${value})` : `(${value})`)
 addHandler(el, event, code, null, true)
 ...
}
  • addProp在el上设置一个名称为value的prop,同时设置其值
  • addHandler在el上设置事件处理函数

3.3 指令响应变化部分

3.3.1 createPatchFunction统一处理指令的钩子函数
createPatchFunction函数返回一个patch函数,在patch处理过程中,会调用指令的钩子函数,包括:

  • bind
  • inserted
  • update
  • componentUpdated
  • unbind

4. 总结

4.1 编译过程

  1. 从html上解析所设置的指令
  2. 通过gen*函数将指令设置到AST上
  3. 调用指令的构造函数,设置指令需要在编译时期处理的事情

4.2 初始化过程

通过在patch函数中,调用统一的钩子函数,触发指令的钩子函数,实现相应的功能

以上就是详解vue v-model的详细内容,更多关于vue v-model的资料请关注三水点靠木其它相关文章!

Javascript 相关文章推荐
js jquery做的图片连续滚动代码
Jan 06 Javascript
javascript forEach通用循环遍历方法
Oct 11 Javascript
js实现图片放大缩小功能后进行复杂排序的方法
Nov 08 Javascript
在百度知道团队中快速审批新成员的js脚本
Feb 02 Javascript
JS实现仿QQ效果的三级竖向菜单
Sep 25 Javascript
jquery通过扩展select控件实现支持enter或focus选择的方法
Nov 19 Javascript
利用js编写响应式侧边栏
Sep 17 Javascript
微信小程序图片自适应支持多图实例详解
Jun 21 Javascript
JavaScript模拟实现封装的三种方式及写法区别
Oct 27 Javascript
微信小程序实现电子签名功能
Jul 29 Javascript
vue路由切换时取消之前的所有请求操作
Sep 01 Javascript
详解JavaScript执行模型
Nov 16 Javascript
vue.js 输入框输入值自动过滤特殊字符替换中问标点操作
Aug 31 #Javascript
vue路由结构可设一层方便动态添加路由操作
Aug 31 #Javascript
element-ui tree结构实现增删改自定义功能代码
Aug 31 #Javascript
vue elementui tree 任意级别拖拽功能代码
Aug 31 #Javascript
Element-ui树形控件el-tree自定义增删改和局部刷新及懒加载操作
Aug 31 #Javascript
JS遍历树层级关系实现原理解析
Aug 31 #Javascript
Element-ui el-tree新增和删除节点后如何刷新tree的实例
Aug 31 #Javascript
You might like
作为PHP程序员你要知道的另外一种日志
2018/07/30 PHP
JS重要知识点小结
2011/11/06 Javascript
页面图片浮动左右滑动效果的简单实现案例
2014/02/10 Javascript
JavaScript通过join函数连接数组里所有元素的方法
2015/03/20 Javascript
javascript判断网页是关闭还是刷新
2015/09/12 Javascript
Bootstrap每天必学之警告框插件
2016/04/26 Javascript
微信小程序中子页面向父页面传值实例详解
2017/03/20 Javascript
微信小程序下拉刷新界面的实现
2017/09/28 Javascript
Vuejs中使用markdown服务器端渲染的示例
2017/11/22 Javascript
浅谈MUI框架中加载外部网页或服务器数据的方法
2018/01/31 Javascript
Layui tree 下拉菜单树的实例代码
2019/09/21 Javascript
[01:04:22]2018DOTA2亚洲邀请赛 3.31 小组赛 B组 IG vs EG
2018/04/01 DOTA
[00:20]TI9不朽观赛名额抽取
2019/08/05 DOTA
python字符串排序方法
2014/08/29 Python
Python对数据库操作
2016/03/28 Python
Python读大数据txt
2016/03/28 Python
Python中防止sql注入的方法详解
2017/02/25 Python
Python中XlsxWriter模块简介与用法分析
2018/04/24 Python
python和shell获取文本内容的方法
2018/06/05 Python
Python中存取文件的4种不同操作
2018/07/02 Python
pandas 按照特定顺序输出的实现代码
2018/07/10 Python
python+PyQT实现系统桌面时钟
2020/06/16 Python
Python2.7实现多进程下开发多线程示例
2019/05/31 Python
python list数据等间隔抽取并新建list存储的例子
2019/11/27 Python
python opencv实现图片缺陷检测(讲解直方图以及相关系数对比法)
2020/04/07 Python
pandas的resample重采样的使用
2020/04/24 Python
如何用用Python将地址标记在地图上
2021/02/07 Python
印度最好的在线药品订购网站:PharmEasy
2018/11/30 全球购物
Abbacino官网:包、钱包和女士配饰
2019/04/15 全球购物
奢华的意大利皮革手袋:Bene Handbags
2019/10/29 全球购物
Silk Therapeutics官网:清洁、抗衰老护肤品
2020/08/12 全球购物
Collection和Collections的区别
2016/05/02 面试题
先进集体事迹材料
2014/02/17 职场文书
酒店行政人事部经理职务说明书
2014/02/26 职场文书
北大自主招生自荐信
2015/03/04 职场文书
Spring Boot 的创建和运行示例代码详解
2022/07/23 Java/Android