冇事来学系--Vue2.0中VueComponent（组件）

---

theme: qklhk-chocolate

「这是我参与2022首次更文挑战的第7天，活动详情查看：2022首次更文挑战」

组件的本质

1. 组件的本质就是一个 构造函数 f VueComponent (options) { this._init(options); } ，是Vue.extend( )生成的
2. 当我们使用组件时，写了组件的标签，Vue解析时就会创建该组件的实例对象，即Vue帮我们执行了这一句代码 new VueComponent(options) (options就是我们写的data、methods、computed等数据)

3. 每次调用Vue.extend( )时，返回的都是一个全新的VueComponent

创建组件 ----> 生成了一个VueComponent构造函数

使用组件 ----> 创建了VueComponent实例对象

```js // 在vue源码中有下面几段代码 Vue.extend = function(extendOptioins) { /....../

var Sub = function VueComponent(options){
    this._init(options);
}

/*......*/

return Sub

} ```

4. 关于this的指向

• 在组件配置中(创建组件的时候)，data函数、methods中的函数、watch中的函数、computed中的函数等，this都指向VueComponent实例对象，即组件实例对象(在使用组件后，vue就执行了new VueComponent( )，就有了VueComponent实例对象)
• 在new Vue(options)配置中，data函数、methods中的函数、watch中的函数、computed中的函数等，this都指向Vue实例对象vm const vm = new Vue({ })

5. 组件实例对象VueComponent(vc)和vue实例对象vm

组件是可以复用的Vue实例

注意：组件实例对象vc和vue实例对象vm的结构(里面的各种属性和方法)几乎一模一样(创建vm实例对象时配置对象可以指定el，即指定vue控制哪个容器；而创建组件实例vc的时候，配置对象中不可以指定el)

---

一个重要的内置关系

VueComponent.prototype.proto === Vue.prototype

为什么要有这个关系？

因为Vue修改了让组件实例对象(vc)可以访问到Vue原型上的属性、方法

• 每一个构造函数都有一个prototype属性，注意这个属性的值就是一个对象，他的所有属性和方法都被构造函数所拥有
• 构造函数的prototype属性，叫做显示原型属性；构造函数的实例对象中有一个_proto_属性，叫做隐式原型属性。这两个属性都指向一个对象，叫做原型对象

• 每一个对象都有_proto_原型，原型对象prototype 也有proto原型，这个原型指向的是Object.prototype(Object的原型对象)。Object的原型对象Object.prototype也有proto原型，指向的是null
• 实例的隐式原型属性(proto) 永远指向自己缔造者(构造函数)的原型对象

关系图解

跋尾

本篇内容就到这里了~ 我是Zeus👩🏻‍🚀来自一个互联网底层组装员，下一篇再见！ 📖