vue 子组件实例和根组件实例的区别？

Question

今天在一个组件中打印了下this，准备是看下上面的的几个属性，但是实例的原型链走向有点让我蒙蔽；直接上图片吧，

这是子组件的实例，里面包含了，vue提到的实例属性；


我是比较好奇这是怎么一回事，在我最开始的理解中可能都是Vue的构造函数，然后实例化了。但是这个子组件实例像是一个继承了Vue的实例。第二个问题，像路由router，状态管理工具store是怎么挂在实例上面的，像我之前引用的插件是挂在Vue.prototype这上面的。如果是挂在实例上是怎么做的。搞忘说main的Vue实例了就是正常的proto指向Vue.prototype。望各位大佬说说，我网上搜了没找到什么相关的或者有什么想过博客也可以发来看看### 问题描述

Answer 1

• 根组件和某个 dom 根节点绑定
• 若干子组件与单个根组件绑定

Answer 2

可惜了这么好的提问，竟然没人回答，唉

Answer 3

这个问题很有意思。

VueRouter 和 Vuex 等插件如何实现将自身实例挂载到 Vue.prototype 呢？

首先，明确一点，是在生命周期函数 beforeCreate 钩子中完成挂载的，因为在beforeCreate钩子中可以取到$options，而我们 new Vue 时会传递这些插件的实例，因此 $options 下包含这些插件实例的引用

另外一点，有些朋友可能会疑惑，这些插件怎么就能调用 beforeCreate 钩子呢，它主要依赖 Vue.mixin 这个 API，简而言之就是这些插件在实例化时会利用传递进来的 Vue 构造函数的 mixin 方法向 beforeCreate 钩子注入一些向 Vue.prototype 挂载插件实例的代码

在未来，当 Vue 被初始化时，beforeCreate 会被调用（需要判断是否是 Vue 根实例的初始化，只需挂载一次即可），插件的挂载也就完成