Vue源码学习(一)

442 阅读1分钟


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种状态

13.响应式原理