第十二章、实例方法与全局API的实现原理(4)

全局API的实现原理

全局API和实例方法不同:实例方法是在Vue.prototype上挂载方法;全局API是直接在Vue上挂载方法。

1、Vue.extend(options)

参数:{Object} options

用法:使用基础Vue构造器创建一个“子类”,其参数是一个包含“组件选项”的对象。

实例

<div id="mount-point"></div>
// 创建构造器
var Profile = Vue.extend({
	tempalte:'<p>{{firstName}} {{lastName}} aka {{alias}}</p>',
	data(){
		return {
			firstName:'Walter',
			lastName:'While',
			alias:'Heisenberg'
		}
	}
})
// 创建Profile实例,并挂在到一个元素上
new Profile().$mount('#mount-point')

结果展示:

<p>Walter While aka Heisenberg</p>

实现原理:

let cid = 1
Vue.extend = function(extendOptions) {
	extendOptions = extendOptions || {}
	const Super = this
	const SuperId = Super.cid
	// 增加缓存策略
	const cachedCtors = extendOptions._Ctors || (exten

猜你喜欢

转载自blog.csdn.net/LiyangBai/article/details/104466212