vue初始化过程发生了什么?

20 篇文章 0 订阅
  • vue本质是一个构造函数,执行new Vue()的时候,会通过它的构造函数,构造函数执行了很多xxxMinxin函数,本质都是为了给vue的prototype扩展一些方法,调用this._init
  • this._init函数内部处理组件配置项
    • 1、给每个 vue 实例写上 _uid,并且是依次递增的,确保唯一性
    • 2、合并opitions。如果是子组件,将组件配置对象上的一些深层次属性放到vm.$options 选项中,以提高代码的执行效率;如果是根组件,对 options 进行合并,vue 会将相关的属性和方法都统一放到 vm.$options 中。vm.$options 的属性来自两个方面,一个是 Vue 的构造函数vm.constructor 预先定义的,一个是 new Vue 时传入的入参对象。
    • 3、执行一堆initxxx函数,初始化lifecycle、events、hook等
    • 4、如果有 el 属性,则调用vm.$mount方法挂载 vm ,挂载的目标就是把模板渲染成最终的 DOM;不存在el不挂载,需要手动挂载
  • 执行vm.$mount,调用mountComponent,创建updateComponent
  • 执行_render,获取虚拟dom
  • 执行_update,将虚拟dom转化为真实dom

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值