上篇文章介绍使用虚拟节点来描述组件,讨论了组件在挂载的时候,响应式数据发生变化会导致组件频繁渲染,对此采用微任务队列可以避免频繁执行。介绍了如何创建组件实例,通过instance实例上的isMounted的状态,区分组件的挂载与更新。那么本文将继续讲解组件的实现细节。
2props与组件的被动更新props在虚拟DOM中,组件的props和普通html标签上的属性差别并不大。
MyComponentname="pingping"age="18"/
对应的虚拟DOM是:
constvnode={type:MyComponent,props:{name:"pingping",age:18}}
对于组件而言:
constMyComponent={name:"MyComponent",props:{name:String,age:Number},render(){return{type:"div",children:`mynameis{this.name},myageis:{this.age}`}}}
对于组件而言,需要关心的props内容有两部分:
为组件传递数据的props,即vnode.props对象组件内部选项自定义的props,即MyComponent.props组件在渲染时解析props数据需要结合这两个选项,最终解析出组件在渲染时需要使用到的props和attrs。
functionmountComponent(vnode,container,anchor){const