前言
通过组件的学习,我们发现组件里面的属性和方法与vue实例对象及其的相似,这是什么原因呢?笔者将通过本文阐述一下自己的理解。
组件的本质
组件本质其实是名为 VueComponent 的构造函数。
构造组件时,Vue会自动的帮我们调用Vue.extend()
这个函数,生成一个名为VueComponent 的构造函数。
Vue在解析页面时,遇到组件标签,就会帮我们调用这个构造函数创建组件的示例对象,即Vue帮我们执行:new VueComponent(options)
。
Vue与VueComponent
Vue还做了另外一件事:
将VueComponent的原型对象的隐式原型链指向了Vue的原型对象。
VueComponentprototype.proto === Vue.prototype
这样就可以让组件实例对象可以访问到 Vue原型对象上的属性、方法。
总结
Vue修改了组件原型对象的隐式原型链,将其指向Vue的原型对象。使得组件实例对象可以使用Vue原型对象中的方法和属性。
Vue 实例对象 ≠ VueComponent示例对象(组件)
两者区别:
- 组件件中没有el配置项;
- 组件中data配置项必须为函数式。