一起读书Vuejs设计与实现16

北京中科白癜风医院爱心传递 http://baijiahao.baidu.com/s?id=1700352152225524141&wfr=spider&for=pc
1写在前面

上篇文章介绍使用虚拟节点来描述组件,讨论了组件在挂载的时候,响应式数据发生变化会导致组件频繁渲染,对此采用微任务队列可以避免频繁执行。介绍了如何创建组件实例,通过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


转载请注明:http://www.aierlanlan.com/tzrz/168.html

  • 上一篇文章:
  •   
  • 下一篇文章: