Vue加载流程
1.初始化的第一阶段是Vue实例也就是vm对象创建前后:首先Vue进行生命周期,事件初始化发生在beforeCreate生命周期函数前,然后进行数据监测和数据代理的初始化,也就是创建vm对象的过程,当vm对象创建完成就可以通过vm对象访问到劫持的数据,比如data中的数据,methods中的方法等。然后Vue调用内部的render函数开始解析模板将其解析为一个JS对象也即在内存中生成虚拟DOM也就是Vnode对象。第二阶段是vm对象挂载前后:挂载完成前页面呈现的是未经过Vue编译的DOM结构,所有对DOM的操作最终都不会生效。挂载前首先将内存中的Vnode转换为真实DOM插入页面,此时完成挂载。页面中呈现的就是经过Vue编译的DOM结构,至此初始化过程结束。
2.开启订阅消息也就是数据劫持代理监听,其实就是写了一个watcher函数去监听数据的改变,发送网络请求,绑定自定义事件等初始化操作。当数据发生变化以后即状态变更的时候,会重新构造新的Vnode对象。然后用新的Vnode对象和旧的Vnode对象进行差异比较也就是DIFF算法,然后把差异应用到旧的Vnode对象所构建的真正的DOM树上这个过程就是patch,视图就更新了
每一个组件在加载时都会调用Vue内部的render函数把该组件的tamplate选项的模板解析为一个JS对象,这个对象和DOM节点对象结构一样,然后是数据劫持代理监听,当数据发生变化以后,将旧Vnode对象和生成的新Vnode对象比较差异然后更新DOM
Vnode: