Vue中vc和vm的区别

如图所示，是vm对象和vc对象的关系图
1,什么是vm对象
vue是一套用于构建用户界面的渐进式框架。它的底层原理是通过new Vue构造函数，生成实例化对象。初始化，给其设置el/mount挂载点等实现页面渲染的。vm对象就是Vue构造函数new出来的实例化对象，也可称之为vm实例

2,什么是vc对象
Vue构造函数的底层工作原理中，有一个“子构造函数”：VueComponent组件构造函数。vc对象就是VueComponent构造函数new出来的实例化对象，也可称之为vc实例。

3.vc对象和vm对象的关系
它们之间是继承关系，vc对象继承vm对象。vc对象的原型就是vm对象。

4.实例对象都是构造函数new出来的，所以我们要知道new的底层工作原理
（1）. 创建一个空的简单 JavaScript 对象（即 {} ）；*
（2）. 为步骤 1 新创建的对象添加属性 __proto__ ，将该属性链接至构造函数的原型对象；*
（3）. 将步骤 1 新创建的对象作为 this 的上下文；*
（4）. 如果该函数没有返回对象，则返回 this。*

6.如图是组件完整的原型链
7.this的指向
知道了new的底层原理，那么this的指向就非常清楚了。如上图 我们项目中的.vue文件内的this，指向的就是VueComponent构造函数的实例化对象（即vc实例），我们可以通过this（即vc对象）的——proto——属性，找到它的VueComponent构造函数的原型对象（prototyope），即vm对象。

又可以通过vm对象的——proto——属性，找到它的Vue构造函数的原型对象（prototyope）。直到找到JavaScript顶级的对象（Object构造函数的原型对象），没有就到了尽头null。

​
如图所示，是vm对象和vc对象的关系图
1,什么是vm对象
vue是一套用于构建用户界面的渐进式框架。它的底层原理是通过new Vue构造函数，生成实例化对象。初始化，给其设置el/mount挂载点等实现页面渲染的。vm对象就是Vue构造函数new出来的实例化对象，也可称之为vm实例

2,什么是vc对象
Vue构造函数的底层工作原理中，有一个“子构造函数”：VueComponent组件构造函数。vc对象就是VueComponent构造函数new出来的实例化对象，也可称之为vc实例。

3.vc对象和vm对象的关系
它们之间是继承关系，vc对象继承vm对象。vc对象的原型就是vm对象。

4.实例对象都是构造函数new出来的，所以我们要知道new的底层工作原理
（1）. 创建一个空的简单 JavaScript 对象（即 {} ）；*
（2）. 为步骤 1 新创建的对象添加属性 __proto__ ，将该属性链接至构造函数的原型对象；*
（3）. 将步骤 1 新创建的对象作为 this 的上下文；*
（4）. 如果该函数没有返回对象，则返回 this。*
​
​
6.如图是组件完整的原型链
7.this的指向
知道了new的底层原理，那么this的指向就非常清楚了。如上图 我们项目中的.vue文件内的this，指向的就是VueComponent构造函数的实例化对象（即vc实例），我们可以通过this（即vc对象）的——proto——属性，找到它的VueComponent构造函数的原型对象（prototyope），即vm对象。
​
​
又可以通过vm对象的——proto——属性，找到它的Vue构造函数的原型对象（prototyope）。直到找到JavaScript顶级的对象（Object构造函数的原型对象），没有就到了尽头null。
​

2.png 如图所示，是vm对象和vc对象的关系图
1,什么是vm对象
vue是一套用于构建用户界面的渐进式框架。它的底层原理是通过new Vue构造函数，生成实例化对象。初始化，给其设置el/mount挂载点等实现页面渲染的。vm对象就是Vue构造函数new出来的实例化对象，也可称之为vm实例

2,什么是vc对象
Vue构造函数的底层工作原理中，有一个“子构造函数”：VueComponent组件构造函数。vc对象就是VueComponent构造函数new出来的实例化对象，也可称之为vc实例。

3.vc对象和vm对象的关系
它们之间是继承关系，vc对象继承vm对象。vc对象的原型就是vm对象。

4.实例对象都是构造函数new出来的，所以我们要知道new的底层工作原理
（1）. 创建一个空的简单 JavaScript 对象（即 {} ）；*
（2）. 为步骤 1 新创建的对象添加属性 proto ，将该属性链接至构造函数的原型对象；*
（3）. 将步骤 1 新创建的对象作为 this 的上下文；*
（4）. 如果该函数没有返回对象，则返回 this。*

1.png 6.如图是组件完整的原型链
7.this的指向
知道了new的底层原理，那么this的指向就非常清楚了。如上图 我们项目中的.vue文件内的this，指向的就是VueComponent构造函数的实例化对象（即vc实例），我们可以通过this（即vc对象）的——proto——属性，找到它的VueComponent构造函数的原型对象（prototyope），即vm对象。

又可以通过vm对象的——proto——属性，找到它的Vue构造函数的原型对象（prototyope）。直到找到JavaScript顶级的对象（Object构造函数的原型对象），没有就到了尽头null。