最后
前端CSS面试题文档,JavaScript面试题文档,Vue面试题文档,大厂面试题文档
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
1、为了性能考虑,在Vue.extend方法内增加了缓存策略。反复调用Vue.extend其实应该返回同一个结果。
即这段代码所示
if(cachedCtors[SuperId]){
return cachedCtors[SuperId];
}
那它是怎么判断是不是相同的呢?
我们举个例子。
const obj= {
template: ‘
’,data: function() {
return {}
}
}
var Profile = Vue.extend(obj)
var Profile2 = Vue.extend(obj)
console.log(Profile == Profile2) //true
如例子所示,只要obj相同,那么创建的子类就是同一个。
那怎么判断obj即源码中的extendOptions是否是同一个对象呢?
这就是这段代码的作用了
const Super = this; // 指向 Vue这个构造函数
const SuperId = Super.cid; 指向 Vue这个构造函数的id,值为0
const cachedCtors = extendOptions._Ctor || (extendOptions._Ctor = {});
我们给第一次作为参数的extendOptions添加一个属性_Ctor={}。因此下次我们再用同一个extendOptions来创建子类的时候,这个extendOptions身上就会有_Ctor这个属性了。
然后再赋值
cachedCtors[SuperId] = Sub;
注意cachedCtors是引用extendOptions._Ctor的,也就是说他们是指向同一个对象。这时
extendOptions._Ctor = {
0:Sub
}
因此它下次再用同一个extendOptions就会判断 _Ctor是否已经有缓存了没有。
2.对name校验,如果发现name选项不合格,会在开发环境下发出警告。
3.创建子类并将它返回,这一步并没有继承的逻辑,此时子类是不能用的,它还不具备Vue的能力。
(2)子类继承Vue的能力
首先,将父类的原型继承到子类中
Sub.prototype = Object.create(Super.prototype);
Sub.prototype.constructor = Sub;
Sub.cid = cid++;
1、为子类添加了cid,它表示每个类的唯一标识。
将父类的options选项继承到子类中
Sub.options = mergeOptions(
Super.options,
extendOptions
)
Sub[‘super’] = Super;
1、合并了父类选项与子类选项的逻辑,并将父类保存到子类的super属性中。而mergeOptions方法会将两个选项合并为一个新对象。
如果选项中存在props属性,则初始化它
if(Sub.options.props){
initProps(Sub);
}
1、初始化props的作用是将key代理到_props中。例如,vm.name实际上可以访问到的是Sub.prototype._props.name。
function initProps(Comp){
const props = Comp.options.props;
for(const key in props){
proxy(Comp.prototype,‘_props’,key)
}
}
function proxy(target,sourceKey,key){
sharedPropertyDefinition.get = function proxyGetter(){
return this[sourceKey][key];
}
sharedPropertyDefinition.set = function proxySetter(val){
this[sourceKey][key] = val;
}
Object.definedProperty(target,key,sharedPropertyDefinition);
}
如果选项中存在computed,则对它进行初始化
if(Sub.options.computed){
initComputed(Sub);
}
function initComputed (Comp){
const computed = Comp.options.computed;
for(const key in computed){
defineComputed(Comp.prototype,key,computed[key]);
}
}
将父类中存在的属性依次复制到子类中
Sub.extend = Super.extend;
Sub.mixin = Super.mixin
Sub.use = Super.use;
// ASSET_TYPES = [‘component’,‘directive’,‘filter’]
ASSET_TYPES.forEach(function(type){
Sub[type] = Super[type];
})
if(name){
Sub.options.components[name] = Sub;
}
Sub.superOptions = Super.options;
Sub.extendOptions = extendOptions;
Sub.sealedOptions = extend({},Sub.options);
1、复制到子类中的方法包括extend、mixin、use、component、directive和filter
2、在子类上新增了superOptions、extendOptions和sealedOptions属性
总结:
创建了一个Sub函数并继承了父级。如果直接使用Vue.extend,则Sub继承于Vue构造函数。
三、完整代码
Vue.cid = 0
let cid = 1;
Vue.extend = function(extendOptions){
extendOptions = extendOptions || {};
const Super = this;
const SuperId = Super.cid;
const cachedCtors = extendOptions._Ctor || (extendOptions._Ctor = {});
if(cachedCtors[SuperId]){
return cachedCtors[SuperId];
}
const name = extendOptions.name || Super.options.name;
if(process.env.NODE_ENV !== ‘production’){
if(!/1[\w-]*$/.test(name)){
warn(
‘invalid component name:"’+name+‘".Component names’+
‘can only contain alphanumeric characters and the hyphen,’+
‘and must start with a letter.’
)
其实前端开发的知识点就那么多,面试问来问去还是那么点东西。所以面试没有其他的诀窍,只看你对这些知识点准备的充分程度。so,出去面试时先看看自己复习到了哪个阶段就好。
这里再分享一个复习的路线:(以下体系的复习资料是我从各路大佬收集整理好的)
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
《前端开发四大模块核心知识笔记》
最后,说个题外话,我在一线互联网企业工作十余年里,指导过不少同行后辈。帮助很多人得到了学习和成长。
我意识到有很多经验和知识值得分享给大家,也可以通过我们的能力和经验解答大家在IT学习中的很多困惑,所以在工作繁忙的情况下还是坚持各种整理和分享。
这里再分享一个复习的路线:(以下体系的复习资料是我从各路大佬收集整理好的)
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
《前端开发四大模块核心知识笔记》
最后,说个题外话,我在一线互联网企业工作十余年里,指导过不少同行后辈。帮助很多人得到了学习和成长。
我意识到有很多经验和知识值得分享给大家,也可以通过我们的能力和经验解答大家在IT学习中的很多困惑,所以在工作繁忙的情况下还是坚持各种整理和分享。
a-zA-Z ↩︎