详解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 相关文章推荐
Dom与浏览器兼容性说明
Oct 25 Javascript
javascript椭圆旋转相册实现代码
Jan 16 Javascript
学习从实践开始之jQuery插件开发 对话框插件开发
Apr 26 Javascript
整理AngularJS中的一些常用指令
Jun 16 Javascript
深入探究使JavaScript动画流畅的一些方法
Jun 30 Javascript
jQuery实现可高亮显示的二级CSS菜单效果
Sep 01 Javascript
jquery checkbox无法用attr()二次勾选问题的解决方法
Jul 22 Javascript
Javascript中的prototype与继承
Feb 06 Javascript
javascript浏览器用户代理检测脚本实现方法
Oct 27 Javascript
微信小程序上传图片到服务器实例代码
Nov 07 Javascript
vue 实现setInterval 创建和销毁实例
Jul 21 Javascript
JS中循环遍历数组的四种方式总结
Jan 23 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中static关键字原理的学习研究分析
2011/07/18 PHP
PHP实现对二维数组某个键排序的方法
2016/09/14 PHP
PHP大文件切割上传功能实例分析
2019/07/01 PHP
文本加密解密
2006/06/23 Javascript
通过MSXML2自动获取QQ个人头像及在线情况(给初学者)
2007/01/22 Javascript
如何简单地用YUI做JavaScript动画
2007/03/10 Javascript
json-lib出现There is a cycle in the hierarchy解决办法
2010/02/24 Javascript
JQuery最佳实践之精妙的自定义事件
2010/08/11 Javascript
suggestion开发小结以及对键盘事件的总结(针对中文输入法状态)
2011/12/20 Javascript
jquery设置按钮停顿3秒不可用
2014/03/07 Javascript
angularJS结合canvas画图例子
2015/02/09 Javascript
检测一个函数是否是JavaScript原生函数的小技巧
2015/03/13 Javascript
js数组常见操作及数组与字符串相互转化实例详解
2015/11/10 Javascript
AngularJs IE Compatibility 兼容老版本IE
2016/09/01 Javascript
js 能实现监听F5页面刷新子iframe 而父页面不刷新的方法
2016/11/09 Javascript
微信开发之调起摄像头、本地展示图片、上传下载图片实例
2016/12/08 Javascript
jquery请求servlet实现ajax异步请求的示例
2017/06/03 jQuery
用vue写一个仿简书的轮播图的示例代码
2018/03/13 Javascript
使用Node搭建reactSSR服务端渲染架构
2018/08/30 Javascript
React实现全局组件的Toast轻提示效果
2018/09/21 Javascript
jQuery实现聊天对话框
2020/02/08 jQuery
python使用socket实现的传输demo示例【基于TCP协议】
2019/09/24 Python
python yield关键词案例测试
2019/10/15 Python
浅谈tensorflow中dataset.shuffle和dataset.batch dataset.repeat注意点
2020/06/08 Python
浅谈Python __init__.py的作用
2020/10/28 Python
美国最顶级的精品店之一:Hampden Clothing
2016/12/22 全球购物
莫斯科制造商的廉价皮大衣:Fursk
2020/06/09 全球购物
世界上最大的艺术社区:SAA
2020/12/30 全球购物
德语专业求职信
2014/03/12 职场文书
物业保安岗位职责
2014/07/02 职场文书
反对四风自我剖析材料
2014/10/07 职场文书
无违反计划生育证明格式
2015/06/24 职场文书
谢师宴家长答谢词
2015/09/30 职场文书
班级管理经验交流材料
2015/11/02 职场文书
MySQL Shell的介绍以及安装
2021/04/24 MySQL
vue-element-admin项目导入和导出的实现
2021/05/21 Vue.js