码迷,mamicode.com
首页 > 其他好文 > 详细

vue源码第一章~

时间:2018-10-26 17:51:02      阅读:138      评论:0      收藏:0      [点我收藏+]

标签:为什么   构造函数   生命周期   规范   估计   生产环境   返回   option   方法   

有大神说过,看源码,首先要看他的配置,这样比较能看出这个架构做得好不好,不过这里我主要是想写写我个人怎么去理解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都做了些什么吧~

 

vue源码第一章~

标签:为什么   构造函数   生命周期   规范   估计   生产环境   返回   option   方法   

原文地址:https://www.cnblogs.com/lfqin/p/9857196.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!