Vue首次渲染过程
2020-12-03 10:03:38 0 举报AI智能生成
Vue 首次渲染过程
作者其他创作
大纲/内容
Vue 初始化，实例化，静态成员
new Vue
this._init()
vm.$mount()
src/platforms/web/entry-runtime-with-compiler.js
这个mount只有在完整版时才会执行
如果没有传递render,把模板编译成render函数
compileToFunctions() 生成 render() 渲染函数
options.render = render
vm.$mount()
src/platforms/web/runtime/index.js
mountComponent()
mountComponent(this,el)
src/core/instance/lifecycle.js
判断是否有render选项，如果没有但是传入了模板，并且当前是开发环境的话会发送警告
触发 beforeMount
定义 updateComponent
vm._update(vm.render(),...)
vm._render()渲染，渲染虚拟DOM
vm._update()更新，将虚拟DOM转换成真实DOM
创建 Watcher 实例
updateComponent 传递
调用 get 方法
触发 mounted
retrun vm
watcher.get()
创建完 watcher 会调用一次get
调用 updateComponent()
调用 vm.render() 创建 VNode
调用 render.call(vm._renderProxy,vm.$createElement)
调用实例化时Vue传入的render()
或者便宜 template 生成的 render()
返回 VNode
调用 vm._update(vnode,...)
调用 vm.__patch__(vm.$el,vnode)挂载真实DOM
记录vm.$el
0 条评论
下一页
