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

阅读目录

1. 关系
   • 两者异同
2. 组件中要求data只能是函数的原因

 

---

回到顶部

关系

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

 

 

　　VueComponent.prototype.__proto__ ===Vue.prototype

 

两者异同

组件是可复用的Vue实例；

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

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

 

回到顶部

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

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