
1.new Vue()
时先对vm实例initProxy(),
2.this.key访问data中定义的变量
3.$mount()
$mount() => mountComponent(this, el, hydrating)//【判断有无render函数,定义 updateComponent(){vm._update(vm_render(), hydrating)}】 => new Watcher(vm, updateComponent)//【渲染Watcher】先执行渲染watcher再执行initData()将data转为响应式数据
4.vm.render()
最终是通过执行 createElement 方法并返回的是 vnode,它是一个虚拟 Node
5.VDOMsda
对真实DOM的抽象描述,关键属性:标签、数据、子节点、键值等6.CreateElement()
通过 createTextVNode 方法转换成 VNode 。类型tag是component则会执行创建子组件7.update()
_update 方法的作用是把 VNode 渲染成真实的 DOM。_update 的核心就是调用vm.__patch__ 方法。createElm 的作用是通过虚拟节点创建真实的 DOM 并插入到它的父节点中8.patch()
9.合并配置
10.生命周期
11.组件注册
全局注册和局部注册
12.异步组件
实现原理
3种实现方式:工厂函数、promise、高级
异步组件实现本质是2次渲染,先渲染成注释节点,当组件加载成功后,再通过forceRender重新渲染
异步组件3中实现方式中,高级异步组件设计非常巧妙的,它可以通过简单的配置实现loading、resolve、reject、timeout 4种状态