本文主要是介绍vue源码阅读—06—响应式原理(三)之 props，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

一、props规范化

1.1概念：规范化只是格式上的规范化，确保我们的props是一个对象，对象的key的value又是一个对象；

1.2流程：

规范化主要发生在这几个流程中：

    <script>
      const A = {
        name:'A',
        props:['name','nick-name'],
        template:`
        <div id="dependencyDepend">
          <p> name:  {{name}}</p>
          <p> nickName:  {{nickName}}</p>
        </div>
        `,

        
      }


      const B = {
        name:'B',
        template:`
        <div id="dependencyDepend">
          <p> age:  {{age}}</p>
          <p> sex:  {{sex}}</p>
        </div>
        `,
        props:{
          age:Number,
          sex:{
            type:String,
            default:'female',
            validator(value){
              return value === 'male' || value === 'female'
            }
          }
        }
      }


      new Vue({
        el: "#app",
        components:{
          A,B,
        },
        template:`  
        <div id="dependencyDepend">
          <A name='kobe' nickName='james'> </A>
          <B :age='18' sex='mail'> </B>
        </div>
        `
      });
    </script>

在根vm实例init时，会进行Vue.opstions和自己写的options合并，所以会调用mergeOptions函数；

 然后这个函数又会调用normalizeProps；并且把我们定义的props配置项和根vm实例传递进去；

 然后就是把我们自己写的props配置项规范化成对象的形式；方便后续mergeOptions；

为什么后面又需要验证，前面不是已经规范化了吗？

前面的规范化只是格式上的规范化，确保我们的props是一个对象，对象的key的value又是一个对象；

但是格式对了，语法并不一定对。

比如：

props：{
    age：{
          type:'djldsadaf',
          default:'18',
    }

}

这里面的type属性的值就是错的，所以需要验证；

这篇关于vue源码阅读—06—响应式原理(三)之 props的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！