【Vue组件详解（三）】

Vue组件详解 JS原型Vue内置关系单文件组件总结

---

本篇文章接上篇【Vue组件详解（二）】，对Vue组件中的原型对象以及单文件组件开展理解。

---

JS原型

JS原型是构造函数和原型对象的统称，在Vue中之所以要涉及到JS原型，是为了阐述清组件和vm的之间的内置关系。我们通过JS原型相关知识，引出VueComponent和Vue实例对象的内置关系。

VueComponent.prototype.__proto__ == Vue.prototype

现在我们再次来梳理一下有关原型的概念

构造函数中有一个prototype属性（显式原型属性），这个属性指向的是此构造函数的原型对象。通过此构造函数创建出来的实例对象上是并没有prototype这个属性的，但是，构造函数的实例对象上有一个__proto__属性（隐式原型属性），这个属性指向的也是此构造函数的原型对象。

在上图中，不管通过构造函数上的显式原型属性，还是实例上的隐式原型属性，都能访问到同一个原型对象，也就是说其实不管是构造函数还是此构造函数的实例，他们指向的原型对象都是同一个。

证明实例隐式原型属性访问到的原型对象和构造函数显式原型属性访问到的原型对象是同一个。

那么也就是说，构造函数能对原型对象进行的 *** 作，构造函数的实例也能完成。比如说，通过显式原型属性往原型对象追加一个属性，那么同样通过隐式原型属性也能获取到追加的这个属性。

// 通过显式原型属性往原型对象上追加属性
Test.prototype.x = 99;
// 通过隐式原型属性读取原型对象上追加的属性
console.log(test.__proto__.x);

控制台：

---

Vue内置关系

现在我们来验证文章开头所说的VueComponent.prototype.__proto__ == Vue.prototype是否成立，之所以要JS原型这方面的知识，是因为在Vue中，只要搞懂组件和Vue实例之间存在的内置关系，同样的，就可让组件实例对象可以访问到Vue原型上的方法和属性。

结果显示为true，证明这个关系是成立的，接下来，我将通过原理图展示清楚他们之间的关系。

通过原型链关系我们已经找出了Vue原型对象的原型对象，因为Vue原型对象本质上就是一个对象，是对象，那它就有__proto__属性，所以就还可以往下找，一直找到了Object，此时，虽然Object是对象，但其身上__proto属性值为null，也就是说，已经到了尽头。这么做的目的并不在于要揪出最底层的原型对象，而是理解实例的隐式原型属性，永远指向缔造者的原型对象这一知识点。

在这里VueComponent的原型对象的原型对象指向的是Vue的原型对象，是不是就刚好符合了文章开头说的那个内置关系VueComponent.prototype.__proto__ == Vue.prototype。所以说去说来这个关系，其作用就是，组件实例对象，也可以访问Vue原型对象上的方法和属性，这样一来，岂不是组件实例对象和Vm很类似了，也就是说，组件实例对象，已经能完成Vue实例对象Vm百分之九十的事情，由此一来，组件化的结构框架又会更加完善，运用起来当然也会得心应手。

单文件组件

单文件组件，顾名思义，就是一个文件就是一个组件呗，之前说过的非单文件组件都是在html文件中实现的。现在所说的单文件组件是一个独立的文件，其后缀名为.vue，并且，在.vue文件中，要包含了实现一个组件的html，css，js。

.Vue文件的大致结构：

<template>
  
template>

<script>
  //组件的交互，也就是js代码
script>

<style>
  /*组件的样式，也就是css代码*/
<style>

单文件对比非单文件组件的好处就是，结构，交互，样式，各成一块，编写起来较为方便，且Vue真正的项目开发都是在Vue脚手架上进行的，在脚手架环境中，组件都是以单文件形式编写的，所以，对比其非单文件组件而言，单文件组件才是真的香。

单文件使用完整流程

---

总结

有关于Vue组件的基本知识点到本篇文章已经告一段落了。也算是对Vue组件知识的整理了，虽然有些点我并没在文章中涉及，但是上述这些情况以及方法，也算是组件中比较重要的点了，通过非单文件组件过渡到单文件组件，并且对组件的概念进行了一些阐述，希望对小伙伴们学习Vue能有一定的帮助。

觉得不错的话，记得点赞收藏呀~~~

多给孩子点关注吧！！！