全局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