DDR爱好者之家

详解vue v-model
站长资源 2024/12/25 佚名
32 1538
DDR爱好者之家 Design By 杰米

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="/UploadFiles/2021-04-02/vue.js">


在浏览器中打开上述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="/UploadFiles/2021-04-02/vue.js">


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: "color: #ff0000">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: "color: #ff0000">3.3 指令响应变化部分


3.3.1 createPatchFunction统一处理指令的钩子函数

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


    
  
  • bind
    • 
  
  • inserted
    • 
  
  • update
    • 
  
  • componentUpdated
    • 
  
  • unbind
    
  
    • 



4. 总结




4.1 编译过程




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



4.2 初始化过程




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


以上就是详解vue v-model的详细内容，更多关于vue v-model的资料请关注其它相关文章！


                                

                                

                                     

                                
DDR爱好者之家 Design By 杰米
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
DDR爱好者之家 Design By 杰米
ddrfans.com DDR爱好者之家
8,675无损音乐
1,324高清电影
213破解软件
70,141收录资讯

更新日志

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网
DDR爱好者之家 Design By 杰米