VueComponent组件与Vue之间的重要内置关系

目录

前言

前提

讲解：VueComponent . prototype._ _proto_ _ === Vue . prototype    

 总结

---

前言

       想要知道VueComponent组件与Vue之间的重要内置关系，首先要知道他们分别是什么。我这里就是简单带过一下，不展开讲解。

     VueComponent组件：

          1. 组件本质是一个名为VueComponent的构造函数，是Vue. extend生成的。

          2.写组件标签的时候， Vue解析时会帮我们创建VueComponent的实例对象，即Vue帮我们执行的: new VueComponent (options)。

      Vue：一套用于构建用户界面的渐进式JavaScript框架。

前提

       VueComponent组件是由Vue. extend生成的，即在我们定义组件的时候。我们都明白构造函数是需要new关键字来进行实例化的，初步使用Vue.extend只是构建，并不在这里进行实例化而是在使用组件标签的时候进行实例化。比如说，下列代码在root容器中解析到标签的时候进行实例化，而不是在 const student的时候进行实例化。需要明白就是studen是VueComponent的实例对象！

此时我们在浏览器控制台查看一下，student和vm。结果如下，vm的构造函数是Vue是毋庸置疑的，但是我们其实没有去new一个VueComponent，但是这里显示student的构造函数就是VueComponent，也就证实了：组件本质是一个名为VueComponent的构造函数，是Vue. extend生成的。 

 

讲解：VueComponent . prototype._ _proto_ _ === Vue . prototype    

 我们要知道一句话：实例的隐式原型属性（__proto__）永远指向自己缔造者的显示原型（prototype）,也就是说 vm.__proto__===vue.prototype，验证如下：

 验证成立我们就可以知道：

 同理可得：

      按道理来讲，VueComponent的__proto__应该指向Object原型对象，但是！Vue里面并不是这样的，而是让VueComponent的__proto__指向了Vue的原型对象，即如下图所示：

 此时我们就得到了：VueComponent.prototype.__proto__ === Vue . prototype ，我们在控制台验证一下：

 这里要注意，不是关系不成立，而是因为VueComponent只是一个构造函数不可以直接这样输出！所以我们用student这个实例VueComponent的实例对象代替一下，再次验证：

 此时我们发现验证成功了！说明当你在Vue的原型身上定义一个属性的时候，VueComponent肯定也是能拿到的！我们再试一下：

 为什么可以拿到？ 因为会顺着原型链查找，当VueComponent自己没有，就会找VueComponent . prototype，还是没有就会去查找VueComponent . prototype._ _proto_ _ ，还是没有机会找Object原型对象，还没有就说明确实不存在就会报错！整体的一个顺序就是这个样子：

 总结

      原型链还是特别重要的！而Vue也是一个主流的框架，结合起来是有一定的难度，需要自己多去敲敲代码！可以发现新的世界！