中英版网站系统,韩国网站never,国外企业网站设计欣赏,公司做官网要多少钱以下仅为个人见解。
1.大致流程#xff1a;
new Vue()时会调用initMixin(Vue)将_init挂载到vue原型上#xff1b;在_init()中调用$mount()方法($mount()方法也是挂载到vue原型上的)编译template模版#xff0c;并生成render()函数#xff1b;挂载到vm上后#xff0c;会…以下仅为个人见解。
1.大致流程
new Vue()时会调用initMixin(Vue)将_init挂载到vue原型上在_init()中调用$mount()方法($mount()方法也是挂载到vue原型上的)编译template模版并生成render()函数挂载到vm上后会再次调用$mount()并返回调用mountComponet()方法mountComponet中的updateComponent()方法调用vue原型上的render()和update()方法最后进行页面渲染
2. Vue.prototype._init
主要初始化proxy拦截器初始化组件事件监听初始化渲染方法初始化依赖注入初始化数据props/data/method/computed/watch初始化provide注入调用$mount() // 初始化proxy拦截器initProxy(vm)// 初始化组件生命周期标志位initLifecycle(vm)// 初始化组件事件侦听initEvents(vm)// 初始化渲染方法initRender(vm)callHook(vm, beforeCreate)// 初始化依赖注入内容在初始化data、props之前initInjections(vm) // resolve injections before data/props// 初始化props/data/method/computed/watchinitState(vm)initProvide(vm) // resolve provide after data/propscallHook(vm, created)....vm.$mount(vm.$options.el)
3. Vue.prototype.$mount()首次调用进行模版编译
1.可以在对象中定义template/render或者直接使用template、el表示元素选择器
2.将template解析ast tree
3.将ast tree转换成render语法字符串
4.生成render方法
template获取过程 4.生成render()函数后会挂载到vm上然后再次调用vue原型上的$mount()方法 此次调用会返回mountComponent()
// public mount method
Vue.prototype.$mount function (el?: string | Element,hydrating?: boolean
): Component {el el inBrowser ? query(el) : undefined// 渲染组件return mountComponent(this, el, hydrating)
}
updateComponent(): mountComponent()中调用updateComponent()执行初始化时原型上的_render和_update()方法
// 定义更新函数updateComponent () {// 实际调⽤是在lifeCycleMixin中定义的_update和renderMixin中定义的_rendervm._update(vm._render(), hydrating)} 5.Vue.prototype.render方法
主要是生成VNode
6.Vue.prototype.update方法
_update主要功能是调用patch将vnode转换为真实DOM并且更新到页面中
参考
面试官Vue实例挂载的过程 | web前端面试 - 面试官系列
