vue2源码解读:new Vue()细节及应用点

源码地址  

地址1

操作方式:  F12打开控制台, F5刷新即可跳入断点, 如下图所示:

vue2源码解读:new Vue()细节及应用点

知识点:

1. instanceof 检测是不是运用了 new 操作符, 保证了通过原型链 prototype chain) 继承了默认的属性,例如  $delete,$destroy 等

2.通过 Object.defineProperty(Vue.prototype, '$data', dataDef) 定义的是被继承但不被共享的属性 。Vue.prototype.$set = set; 直接定义在原型上的属性是继承且被共享的,源码中有如下例子:

vue2源码解读:new Vue()细节及应用点

 

接着往下走进入到了原型中定义的私有方法Vue.prototype._init,调用了一系列init方法

vue2源码解读:new Vue()细节及应用点

知识点:

1.当进入到如下方法时,通过 Object.create(null)  创建的对象, 原型对象是null,可以有效节省内存

vue2源码解读:new Vue()细节及应用点

vue2源码解读:new Vue()细节及应用点

2.当调用callHook(vm, 'beforeCreate')

vue2源码解读:new Vue()细节及应用点

如上图所示,可知每次调用相关生命周期函数时,都可以通过监听 vm.$once('hook:beforeDestroy', fn)   来进行相关的操作,增加代码的关联性,弊端有可能让有些人看不懂,相关实例链接

地址2    

改bug中,未完待续

可加微信,进行相关Vue探讨

vue2源码解读:new Vue()细节及应用点