好资源导航 » 文章资讯 » 详解vue v-model

详解vue v-model

2023-07-17 14:20:05 207

1.v-model原理

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

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

1.1demo

v-model使用示例





v-model示例





这里是父组件的状态:
{{content}}

这里是子组件的输入区域:

varChild={ template:"#input", props:{ value:{ type:String, required:true } }, methods:{ contentChange(value){ this.$emit("input",value.target.value); } } }; varvueInstance=newVue({ el:"#app", components:{Child}, data:{ content:"" } })

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

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

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

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

2.1demo





v-model示例





这里是父组件的状态:
{{content}}

这里是子组件的输入区域:

varChild={ template:"#input", model:{ prop:"content", event:"contentChanged" }, props:{ content:{ type:String, required:true } }, methods:{ contentChange(value){ this.$emit("contentChanged",value.target.value); } } }; varvueInstance=newVue({ el:"#app", components:{Child}, data:{ content:"" } })

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

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

3.1解析部分

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

functionprocessAttrs(el){
...
name=name.replace(dirRE,'')
//parsearg
constargMatch=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将指令相关内容添加到实例指令中

exportfunctionaddDirective(
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调用指令的构造函数

functiongenDirectives(el:ASTElement):string|void{
constdirs=el.directives
if(!dirs)return
letres='directives:['
lethasRuntime=false
leti,l,dir,needRuntime
for(i=0,l=dirs.length;i
在v-model指令的构造函数中会根据tag的种类进行不同的创建函数进行创建，如果我们自定义指令需要在子组件上添加属性，也需要在这个函数里面进行操作
3.2.2普通tag下的v-model指令构造过程
functiongenDefaultModel
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.1createPatchFunction统一处理指令的钩子函数

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

bind
inserted
update
componentUpdated
unbind



4.总结


4.1编译过程



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



4.2初始化过程


通过在patch函数中，调用统一的钩子函数，触发指令的钩子函数，实现相应的功能
以上就是详解vuev-model的详细内容，更多关于vuev-model的资料请关注毛票票其它相关文章！
声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

返回顶部
3162201930
czq8825@qq.com

详解vue v-model

热门推荐

随机推荐