分析Vue与VueComponent的关系
1:前提知识储备
显示原型(prototype)与隐式原型(proto):
- 函数的prototype属性:在定义函数时自动添加的,默认值时一个空Object对象
- 对象的__proto__属性:创建对象时自动添加的,默认值为构造函数的prototype属性
原型链(本质:隐式原型链)
作用:查找对象的属性(方法)
访问一个对象属性时:
- 先在自身属性中查找,找到返回
- 如果没有,再沿着 __proto__这条链向上查找,找到返回
- 如果最终没有找到,返回undefined
Object原型对象是原型链的尽头(proto=null)
2:原型链图解
核心重点: Vue强制更改了VueComponent的原型对象指向Object的原型对象的隐式链,将其改到指向Vue的原型对象上。
3:一个重要的内置关系
VueComponent.prototype.__proto__ === Vue.prototype
VueComponent的原型对象的原型对象就是Vue的原型对象,所以组件实例对象(vc)即可访问到 Vue原型上的属性、方法。
举例:
组件里面代码:
watchvue.vue
mounted(){
//呼应main.js里面Vue.prototype.x = {a:1,b:2} vc里面找不到x就去vm里面找也就是vm的main.js
console.log("student----:",this.x)
}
App.vue的main.js
Vue.prototype.x = {a:1,b:2}
输出:student----: {a: 1, b: 2}