首页  思维导图  详情

Vue源码流程

2022-01-12 17:07:01   8  举报





仅支持查看

AI智能生成

Vue源码流程

vue

作者其他创作

大纲/内容

_render

$createElement

在调用_c前,先调用里面的_s,_v,_l等,获取_c参数,在此过程中会获取模板内数据,进行数据依赖收集将当前updata方法作为订阅者存入发布者subs中

处理实例参数

调用def ineReactive

Watcher

Observer

Dep

diff算法更新,做了四种假设，假设新老节点开头结尾有相同节点的情况，一旦命中假设，就避免了一次循环，以提高执行效率如果不幸没有命中假设，则执行遍历，从老节点中找到新开始节点找到相同节点，则执行 patchVnode，然后将老节点移动到正确的位置,如果没有找到相同节点就执行createElm,进行创建,如果老节点先于新节点遍历结束，则剩余的新节点执行新增节点操作,如果新节点先于老节点遍历结束，则剩余的老节点执行删除操作，移除这些老节点

observe

initLifecycle

initEvents

initRender

beforeCreate

initInjections

initState

initProvide

created

initData

initMethods

initProps

initComputed(Watcher)

initWatch(Watcher)

当computed中关联数据修改的时候,会触发当前computed的watcher的update,将dirty变为true,并且当前视图也会触发update,那么就会重新触发computed的get重新执行,此时的dirty为true

$mount(挂载)

mountComponent

beforeMount

通过render获取Vnode,然后将当前视图更新方法变为订阅者

_update

__patch__($el,vnode)

__patch__(oldVnode,vnode)

获取组件后,根据导出的default参数可以拿到组件配置,之后借助Vue.extend变为构造器

注意,delay是配置延迟loading组件加载的时间,跟其他无关,如果配置了loading组件,且delay为0,就根据配置先返回loading组件,如果delay不为0,则返回undefined先,如果component返回resolve,那么就返回对应组件,否则,就reject出error组件,当之后重新获取时,会根据之前返回的结果直接返回对应成功或错误组件(状态变更时返回组件,都会通知对应当前关联的实例调用$forceUpdate更新)

createElm

组件的情况

非组件,类型是标签

invokeCreateHooks

insert

createChildren

createElm

createComment

insert

createTextNode

insert

$mount(组件)