Vue中的vm和VueComponent的实例对象

发布时间:2024-09-09 18:01

关于vm和vc,vm为Vue的实例对象,vc为VueComponent的是对象。

一、vm

1、Vue的实例对象,以后简称vm。

(1) vm的隐式原型属性指向Vue的原型对象。

(2) VueComponent的原型对象的隐式原型属性指向Vue的原型对象。

好像不太好描述,只可意会不可言传,atguigu张天禹老师牛批!

二、vc

1、组件本质:

组件其实是一个名为VueComponent的构造函数,且不是程序员定义的,是Vue.extend自动生成的。

每写一个组件Vue会通过Vue.extend生成一个全新的VueComponent,写一个school组件,新生成一个VueComponent,当我们再写一个student组件时,又会重新生成一个全新的VueComponent。注意:这里只是针对于非单文件组件。

2、Vue解析时会帮我们创建school组件的实例对象

我们只需要写<school></school>,,
即Vue帮我们执行的:new VueComponent(options)。

3、特别注意

每次调用Vue.extend,返回的都是一个全新的VueComponent!!!!

//定义school组件
const school = Vue.extend({
	name: 'school',
	data(){
		name:'ycu',
		address:'学府路576号',
	}, 
	methods:{}
})

在非单文件组件中,组件可以定义多个

\"在这里插入图片描述\"

4、关于this指向

1.组件配置中:

data函数、methods中的函数、watch中的函数、computed中的函数 它们的this均是VueComponent实例对象(也就是天禹老师课堂上的vc,也可称之为组件实例对象)。

(1):VueComponent的实例对象,我们暂且记为vc。

\"在这里插入图片描述\"
\"在这里插入图片描述\"

(2):Vue的实例对象 vm

\"在这里插入图片描述\"

2.new Vue(options)配置中:

data函数、methods中的函数、watch中的函数、computed中的函数 它们的this均是Vue实例对象。

5、vc 与 vm 的区别:

vm和vc在某种程度上确实有很多相像之处,但又有着本质的区别,vc差不多像是vm的小弟,可以理解为类似生活中的一对双胞胎,一个稍微早出生几分钟的是大哥,也就是vm,另外一个就是小弟vc,虽然会很像,但是还是有区别的。

总体上来说,vm身上有的,vc基本也有。

data函数、methods中的函数、watch中的函数、computed中的函数在vm和vc里边都有,生命周期也都是一样的,以及相同的数据代理模式。

vc有的vm都有,vm可以通过el决定为哪一个容器服务,但是vc是没有 el 的!且 vc 的data要写成函数式,在vm中的data写成对象或者函数都行

6、Vue和VueComponent的内置关系

VueComponent.prototype.proto === Vue.prototype (这里的proto前后都是有__的,编辑器误以为是加粗的标识了)

即构造函数的显示原型属性 === 实例对象的隐式原型属性

先摆上一张天禹老师的d图

\"在这里插入图片描述\"

ItVuer - 免责声明 - 关于我们 - 联系我们

本网站信息来源于互联网,如有侵权请联系:561261067@qq.com

桂ICP备16001015号