Vue 源码阅读2之从0到beforeCreated

     Hello,大家好。现在咱们正式进入Vue源码阅读的主体部分。当网页中存在Vue文件在浏览器中运行的时候,Vue的环境已经存在于浏览器中。

    当我们在其他脚本中执行var vm=new Vue(.....)时将会开始了Vue对象的一生。

   (1)执行上述程序的时候将会调用Vue源代码目录下的/src/core/instance/index.js的Vue函数。这个函数主要的作用是调用Vue原型链上的_init函数以实现Vue对象的初始化过程。

function Vue (options) {
  if (
    process.env.NODE_ENV !== 'production' &&
    !(this instanceof Vue)
  ) {
    warn('Vue is a constructor and should be called with the `new` keyword')
  }
  this._init(options)
}

(2)Vue原型链上的_init函数由源代码目录下的/src/core/instance/init.js的initMixin函数实现,从截取的这一部分代码我们看到最后调用了beforecreated的钩子函数,表明进入到了beforecreated过程。

也就是从调用_init函数到beforecreated之间进行了

1.设置vm的值为this值即Vue对象

2.设置Vue对象的ID号

3.设置对象的_isVue属性为真

4.将创建vue的参数与option属性进行合并。

5.初始化生命周期

6.初始化事件处理

7.初始化渲染器

8.使用callhook函数调用beforeCreated函数

const vm: Component = this
    vm._uid = uid++
    let startTag
    let endTag
    if (process.env.NODE_ENV !== 'production' && config.performance && mark) {
      startTag = `vue-perf-start:${vm._uid}`
      endTag = `vue-perf-end:${vm._uid}`
      mark(startTag)
    }
    vm._isVue = true
    if (options && options._isComponent) {
      initInternalComponent(vm, options)
    } else {
      vm.$options = mergeOptions(
        resolveConstructorOptions(vm.constructor),
        options || {},
        vm
      )
    }
    if (process.env.NODE_ENV !== 'production') {
      initProxy(vm)
    } else {
      vm._renderProxy = vm
    }
    vm._self = vm
    initLifecycle(vm)
    initEvents(vm)
    initRender(vm)
    callHook(vm, 'beforeCreate')

 

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

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值