华山资源网

详解vue v-model
网络编程 2024/12/23 佚名
3 1

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的资料请关注其它相关文章！


                                

                                

                                     

                                
华山资源网 Design By www.eoogi.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
华山资源网 Design By www.eoogi.com
www.eoogi.com 华山资源网
120,135影音资源
344,641技术资源
22,817软件资源
435,032站长资源

更新日志

友情链接

杰晶网络 DDR爱好者之家 桃源资源网 杰网资源 富贵资源网 南强小屋 铁雪资源网 幽灵资源网 万梅资源网 狼山资源网 白云岛资源网 昆仑资源网 相思资源网 明霞山资源网 内蒙古资源网 黑松山资源网 茶园资源网 饿虎岗资源网 大旗谷资源网 常春岛资源网 岱庙资源网 兴国资源网 快活林资源网 蝙蝠岛资源网 帝王谷资源网 白云城资源网 伏龙阁资源网 清风细雨楼 天枫庄资源网 圆月山庄资源网 无争山庄资源网 神水资源网 移花宫资源网 神剑山庄资源网 无为清净楼资源网 金钱帮资源网 丐帮资源网 华山资源网 极乐门资源网 小李飞刀资源网 凤求凰客栈 风云阁资源网 金狮镖局 鸳鸯亭资源网 千金楼资源网 更多链接
华山资源网 Design By www.eoogi.com