标签：vue 06 name 对象 age value 源码 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,name,对象,age,value,源码,props,规范化
来源： https://www.cnblogs.com/EricShen/p/16538805.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。