2024年Web前端最新学习vue源码（2） 手写Vue，2024Web前端春招面试真题

最后

前端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(!/¹[\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学习中的很多困惑，所以在工作繁忙的情况下还是坚持各种整理和分享。

---

1. a-zA-Z ↩︎