Vue组件化编程③

Vue组件化编程③

文章目录

​​VueComponent构造函数​​​​内置关系​​

VueComponent构造函数

我们已经知道了如何去创建一个组件，例如以下代码：

但是我们不知道这个const后面的school到底是什么？或者说它是什么类型的数据？我们可以把它打印出来看看：

由此我们可知组件的本质是一个函数，而且还是一个构造函数(因为函数名的每个单词开头是大写的)！它不是由程序员定义的，是Vue.extend生成的

既然是构造函数，不应该使用new去使用它吗？

事实上，我们只需要写或这样的组件标签，Vue解析时会帮我们创建school组件的实例对象，即Vue帮我们执行的：new VueComponent(options)。

现在我们继续添加一个组件hello：

要注意如果你在控制台输出school、hello，会发现是两个一模一样的构造函数：

但是事实上的每次调用Vue.extend，返回的都是一个全新的VueComponent！！！！

我们可以试验一下，我在school的身上添加一个属性​​a​​并令其值为99：

school.a = 99 console.dir(school); console.dir(hello);

结果：

如此可以证明两个构造函数是完全不同的。

接下来我们继续讨论一个问题：this指向 (1).组件配置中： data函数、methods中的函数、watch中的函数、computed中的函数 它们的this均是【VueComponent实例对象】。

(2).new Vue(options)配置中： data函数、methods中的函数、watch中的函数、computed中的函数 它们的this均是【Vue实例对象】。

//创建school组件 const school = Vue.extend({ name:'NEFU', template:`

`, data(){ return { schoolName:'NEFU', schoolAddress:'哈尔滨', } }, methods: { haha(){ console.log(this) } }, })

结果：

内置关系

这里我们有一个重要的内置关系：​​​VueComponent.prototype.__proto__ === Vue.prototype​​

我们可以来分析一波：

①实例对象上只会出现隐式原型对象(_proto_)。构造函数上才会出现显式原型对象(prototype) ②不管是显示原型对象还是隐式原型对象最终指向的都是原型对象

显然Vue的原型对象它也是对象，既然是对象那么就有隐式原型对象，因为它是通过new Object出来的，所以它的隐式原型对象就是Object的原型对象，所以：

然后我们把组件给加入进来：

按理说下一步，VueComponent的原型对象的隐式原型对象应该指向Object的原型对象：

但是并不是这样，事实上VueComponent的原型对象的隐式原型对象指向了Vue的原型对象：

我们可以来验证一下：

我们在Vue的原型对象上放一个属性a，并令它为99，然后通过VueComponent去拿到他：

这样做的目的我们可以这样理解：Vue想让Vue的原型对象作为一个最终保险人，如果Vue的原型对象都没有办法，再交给Object的原型对象。

再来更具体的理解：让组件实例对象（vc）可以访问到 Vue原型上的属性、方法。

验证：