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

源码地址  

地址1

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

知识点：

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

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

 

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

知识点：

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

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

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

地址2    

3.当走完一系列的init方法时，最终vm上挂载了一些最基础的属性，例如写组件时会用到的$attrs,$listeners，例如图下所示

new Vue()就顺利走完了

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