vue源码第一章~

Posted 2021-01-15 lfqin

有大神说过，看源码，首先要看他的配置，这样比较能看出这个架构做得好不好，不过这里我主要是想写写我个人怎么去理解Vue实例的，就不说其他的，直接看构建Vue实例的代码了。

这段，就是创建Vue实例的代码了。在这段代码里，前几行引入了initMixin,stateMixin,eventsMixin,lifecycleMixin,renderMixin几个模块，并且在最后几行代码中作者将Vue实例作为参数传了进去，估计vue实例的众多属性和方法，就来源于此了。话说看到事件、生命周期、渲染函数这一块，感觉真是——特别亲切哇！激动，继续往下看。

声明Vue代码的函数，特别简单，首先就是一个简单的检测，如果不是vue实例不是生产环境，就提示你，我们的Vue哇，是个构造函数呢，你呀，要使用new关键字来声明实例哩~，好了，那么问题来了，我们的设计模式告诉我，我们的开发经验告诉我们，一般构造函数内部都会做对象检测时发现你没有使用new 操作符，一般二话不说就直接内部new一个然后返回了，也就是一下代码：

function Vue (options) {

  if (process.env.NODE_ENV !== ‘production‘ &&!(this instanceof Vue)){

    return new Vue();

  }

   this._init(options)

}

为什么没有这样写，纯粹只是为了让使用者自己要注意书写规范，还是有深层的原因啊？思考ing......

好了，继续看源码，如果是Vue实例，就执行this._init(options)方法，也就是挂载在Vue 实例上的_init()方法。这个方法在initMixin(Vue)里进行挂载，明天就看看这个initMixin(Vue)对我们的Vue都做了些什么吧~