详解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 相关文章推荐
javascript实现的使用方向键控制光标在table单元格中切换
Nov 17 Javascript
js Event对象的5种坐标
Sep 12 Javascript
JQuery与JSon实现的无刷新分页代码
Sep 13 Javascript
js前台分页显示后端JAVA数据响应
Mar 18 Javascript
关于eval 与new Function 到底该选哪个?
Apr 17 Javascript
javascript模拟实现ajax加载框实例
Oct 15 Javascript
jquery实现定时自动轮播特效
Dec 10 Javascript
JavaScript事件学习小结(三)js事件对象
Jun 09 Javascript
jQuery实现移动端Tab选项卡效果
Mar 15 Javascript
微信小程序chooseImage的用法(从本地相册选择图片或使用相机拍照)
Aug 22 Javascript
小程序实现左滑删除功能
Oct 30 Javascript
JavaScript Math对象和调试程序的方法分析
May 13 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
MySQL GBK→UTF-8编码转换
2007/05/24 PHP
PHP第一季视频教程(李炎恢+php100 不断更新)
2011/05/29 PHP
一个简单的php MVC留言本实例代码(必看篇)
2016/09/22 PHP
php执行多个存储过程的方法【基于thinkPHP】
2016/11/08 PHP
php微信公众号开发(2)百度BAE搭建和数据库使用
2016/12/15 PHP
PHP7 安装event扩展的实现方法
2019/10/08 PHP
Thinkphp框架+Layui实现图片/文件上传功能分析
2020/02/07 PHP
IE8下关于querySelectorAll()的问题
2010/05/13 Javascript
动态获取复选框checkbox选中个数的jquery代码
2013/06/25 Javascript
判断字符串的长度(优化版)中文占两个字符
2014/10/30 Javascript
Javascript实现获取及设置光标位置的方法
2015/07/21 Javascript
jQuery打字效果实现方法(附demo源码下载)
2015/12/18 Javascript
简易的JS计算器实现代码
2016/10/18 Javascript
jQuery实现判断控件是否显示的方法
2017/01/11 Javascript
基于Vue实现timepicker
2017/04/25 Javascript
Webpack4 使用Babel处理ES6语法的方法示例
2019/03/07 Javascript
python中list常用操作实例详解
2015/06/03 Python
Python实现树莓派WiFi断线自动重连的实例代码
2017/03/16 Python
python中nan与inf转为特定数字方法示例
2017/05/11 Python
Python获取二维矩阵每列最大值的方法
2018/04/03 Python
Python贪心算法实例小结
2018/04/22 Python
pytorch 批次遍历数据集打印数据的例子
2019/12/30 Python
解决torch.autograd.backward中的参数问题
2020/01/07 Python
Python中if有多个条件处理方法
2020/02/26 Python
Python实现电视里的5毛特效实例代码详解
2020/05/15 Python
python 利用百度API识别图片文字(多线程版)
2020/12/14 Python
介绍一下linux文件系统分配策略
2012/11/17 面试题
教师自我鉴定范文
2013/11/10 职场文书
离职保密承诺书
2014/05/28 职场文书
女生节标语
2014/06/26 职场文书
品牌转让协议书
2014/08/20 职场文书
小学大队长竞选稿
2015/11/20 职场文书
小学班长竞选稿
2015/11/20 职场文书
2016春季幼儿园小班开学寄语
2015/12/03 职场文书
python pyhs2 的安装操作
2021/04/07 Python
Python万能模板案例之matplotlib绘制直方图的基本配置
2022/04/13 Python