整体流程图: www.processon.com/view/link/6…
源码流程(总结成以下四步, 记录零零散散,帮助理解的点~)
1.初始化组件数据
- 事件处理: 在初始化时,会将父组件绑定的事件,通过listeners传到子组件,然后子组件会将所有事件都通过
$on在本组件注册,之后,通过$emit就可以调用到了.
2.初始化组件渲染函数render
- new Vue中,先看是否有render函数,没有的话看是否有template,有的话转为render函数,template也没有的话,就以el的作为模板,转化为render函数
- 在组件中,首先,会将整个template转化为ast语法树,再转化为模板引擎(render函数的字符串格式),再由模板引擎通过new Function转为render函数,并且配合with改变里面的this指向为当前组件实例,形成最终的render函数
3.根据render函数获取Vnode
- Vnode中,如果是组件,那么children存到Vnode.componentOptions.children中,如果是正常的标签就存到Vnode.children中
- 通过Vue构造器直接new的,第一个组件内的props可以通过propsData传递属性给组件内,正常情况下的组件props是通过在组件标签传入的. 源码处理: 在传入的过程中,会根据组件内的props,匹配到传入的属性,再把匹配到的属性存到Vnode.componentOptions.propsData中,在处理组件的时候,也是通过new这个组件的构造器,和通过new构造器一样的处理方式给组件
- 原生事件会存到Vnode.data.on中(正常标签,也是存到这),,但是组件的事件会将Vnode.data.on清空,只保留被.native修饰符的原生事件,组件的事情会被放到Vnode.componentOptions.listeners中
- 事件处理: 在render转成Vnode的过程中,会把我们在标签或者组件里面注册的事件,与methods中定义的方法联系起来,变成映射的关系,在data.on中,对应事件名称匹配对应名称的方法.
4.根据Vnode创建真实DOM,根据el进行挂载
- 事件处理: 在由Vnode转化为正常DOM节点的时候,会进行对应的事件注册,这个时候,会将根据Vnode中data.on中的键和值,进行对应的事件注册.
