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函数;

vue源码阅读—06—响应式原理(三)之 props

 

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

vue源码阅读—06—响应式原理(三)之 props

 

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

vue源码阅读—06—响应式原理(三)之 props

 

 

 

 

 

 

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

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

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

比如:

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

}

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

原创文章,作者:254126420,如若转载,请注明出处:https://blog.ytso.com/tech/pnotes/278160.html

(0)
上一篇 2022年8月1日 08:01
下一篇 2022年8月1日 08:02

相关推荐

发表回复

登录后才能评论