• 欢迎光临~

Vue实例与组件实例的区别和关系

开发技术 开发技术 2022-08-05 次浏览

关系

  在我们创建组件时,都会调用Vue.extend()函数来创建一个VueComponent子类,当在模板中使用该组件标签时,就会创建VueComponent子类的一个实例对象。不同地方使用了同一种组件标签,是创建了多个独立的实例对象。使用Vue脚手架搭建项目时,里面的.vue文件就是单组件文件,实质是Webpack使用了vue-loader加载转译了Vue组件,构成了一个单组件文件。

Vue实例与组件实例的区别和关系

 

 

  VueComponent.prototype.__proto__ ===Vue.prototype

 

两者异同

组件是可复用的Vue实例;

组件实例没有el选项,而通过new创建的Vue实例可以通过el挂载到DOM元素上;

Vue实例的data可以是对象或函数,而组件实例要求data只能是函数;

 

组件中要求data只能是函数的原因

  因为组件是可复用的,如果data是一个对象,那么各个组件实例就会公用一个data,产生数据污染。而采用函数的形式,对于每个组件实例,data中return的都是一个全新的对象,使得各个组件实例之间的data是独立的。

 

程序员灯塔
转载请注明原文链接:Vue实例与组件实例的区别和关系
喜欢 (0)