一、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属性的值就是错的,所以需要验证;
原创文章,作者:254126420,如若转载,请注明出处:https://blog.ytso.com/tech/pnotes/278160.html