详解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解决数字不能换行问题
Aug 10 Javascript
Javascript 多浏览器兼容总结(实战经验)
Oct 30 Javascript
js 通过html()及text()方法获取并设置p标签的显示值
May 14 Javascript
JQuery限制复选框checkbox可选中个数的方法
Apr 20 Javascript
浅谈jQuery构造函数分析
May 11 Javascript
jquery实现清新实用的网页菜单效果
Aug 28 Javascript
基于JavaScript判断浏览器到底是关闭还是刷新(超准确)
Feb 01 Javascript
vue-cli构建vue项目的步骤详解
Jan 27 Javascript
js比较两个单独的数组或对象是否相等的实例代码
Apr 28 Javascript
js实现右键弹出自定义菜单
Sep 08 Javascript
Ajax实现三级联动效果
Oct 05 Javascript
一文彻底理解js原生语法prototype,__proto__和constructor
Oct 24 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采集速度探究总结(原创)
2008/04/18 PHP
试用php中oci8扩展
2015/06/18 PHP
PHP多进程编程实例详解
2017/07/19 PHP
javascript之锁定表格栏位
2007/06/29 Javascript
CSS常用网站布局实例
2008/04/03 Javascript
javascript 多级checkbox选择效果
2009/08/20 Javascript
javascript利用初始化数据装配模版的实现代码
2010/11/17 Javascript
javascript继承之为什么要继承
2012/11/10 Javascript
javaScript NameSpace 简单说明介绍
2013/07/18 Javascript
jquery制作select列表双向选择示例代码
2014/09/02 Javascript
nodejs npm package.json中文文档
2014/09/04 NodeJs
推荐25个超炫的jQuery网格插件
2014/11/28 Javascript
一道JS前端闭包面试题解析
2015/12/25 Javascript
使用vue.js编写蓝色拼图小游戏
2017/03/17 Javascript
详解vue填坑之解决部分浏览器不支持pushState方法
2018/07/12 Javascript
浅谈Vue.js路由管理器 Vue Router
2018/08/16 Javascript
原生JS实现的简单轮播图功能【适合新手】
2018/08/17 Javascript
JavaScript队列结构Queue实现过程解析
2020/03/07 Javascript
解决vuecli3中img src 的引入问题
2020/08/04 Javascript
Vue elementui字体图标显示问题解决方案
2020/08/18 Javascript
vue中element 的upload组件发送请求给后端操作
2020/09/07 Javascript
vue el-upload上传文件的示例代码
2020/12/21 Vue.js
Python创建一个空的dataframe,并循环赋值的方法
2018/11/08 Python
Python面向对象之类和对象实例详解
2018/12/10 Python
维也纳通行证:Vienna PASS
2019/07/18 全球购物
Antonioli美国在线商店:时尚前卫奢华
2019/07/29 全球购物
西安当代医院管理研究院笔试题
2015/12/11 面试题
大专毕业生简历的自我评价
2013/10/20 职场文书
公立医院改革实施方案
2014/03/14 职场文书
工作推荐信范文
2014/05/10 职场文书
司法工作人员群众路线对照检查材料思想汇报
2014/09/30 职场文书
导游词范文
2015/02/13 职场文书
聘任证明怎么写
2015/03/02 职场文书
sql时间段切分实现每隔x分钟出一份高速门架车流量
2022/02/28 SQL Server
德生TECSUN S-2000使用手册文字版
2022/05/10 无线电
在SQL Server中使用 Try Catch 处理异常的示例详解
2022/07/15 SQL Server