首页 > 其他分享> 文章详细

2021.10.9web前端面经

2021-10-10 00:03:04 阅读：152 来源： 互联网

标签：function Vue 2021.10 面经 Person job 9web 组件 name

一、初见面

1.自我介绍

简单的介绍一下自己的学校，专业方向。说了下之前的实习情况，以及自己的学校专业课。

2.笔试

没有手撕代码，题目都是解答题。

1.聊聊输入链接按下回车后浏览器都在做什么。

回答方向往前端渲染，答偏了。

复盘解答：

1.先进行DNS域名解析，查看本地hosts文件，查看有没有当前域名对应的ip地址，若有直接发起请求，没有的话会在本地域名服务器去查找，如果本地域名服务器没查找到，会从根域名服务器查找，根域名会告诉你从哪个与服务器查找，最后查找到对应的ip地址后把对应规则保存到本地的hosts文件中。

2.http三次握手四次分手。

3. 服务器处理，可能返回304也可能返回200。

4.客户端自上而下执行代码，然后才是熟悉的CSS加载，DOM树，JS加载。

2.javascript创建对象的几种方法

1.工厂模式：工厂模式是用函数来封装创建对象的细节，在函数里面创建对象并返回对象，就有些像工厂里的流水线一样

function createPerson(name,age,job){
    let o = new Object();
    o.name = name;
    o.age = age;
    o.job = job;
    o.sayname = function(){
        alert(this.name);
    };
    return o;
}
let person1 = createPerson('aa','21','前端');
let person2 = createPerson('bb','22','后端');

工厂模式不能识别对象类型

2.构造函数模式

构造函数模式，即通过给构造函数传递不同的参数，然后调用构造函数来创建不同对象。

function Person(name,age,job){
    this.name = name;
    this.age = age;
    this.job = job;
    this.sayname = function(){
        alert(this.name);
    };
}
var person1 = new Person("aa",21,"前端");
var person2 = new Person("bb",22,"后端");

3.原型模式

使用原型对象的好处就是，可以让所有对象实例共享它所包含的属性和方法。

function Person(){}
Person.prototype.name="a";
Person.prototype.age="29";
Person.prototype.job="cc";
Person.prototype.sayname = function(){
        alert(this.name);
};
var person1 = new Person();
var person2 = new Person();

这样把属性给原型附上可以在几个值相等时得出person1==person2//true

4.组合使用构造函数模式和原型模式

组合使用中，构造函数模式用于定义实例自己的属性，原型模式用于定于方法和共享的属性。

function Person(name,age,job){
    this.name = name;
    this.age = age;
    this.job = job;
}
Person.prototype = {
    constructor: Person,
    sayname: function(){
        alert(this.name);
    }
}
var person1 = new Person("a",29,"cc");
var person2 = new Person("b",26,"cc");

3.jquery怎么把数组转成JSON再转回数组？

//需导入jquery

$.fn.stringify = function() {
  return JSON.stringify(this);
}

$(array).stringify();

$.fn.parseArray = function(array) {
　　return JSON.parse(array)
}

$(array).parseArray();

4.angular和jquery能一起用吗？

没学过angular 所以没答

复盘解答：

可以一起用，angular是一个前端框架，jquery是一个前端工具，并没有本质上的冲突，但是共用时代码不便于维护。

5.Vue的生命周期

复盘解答：beforeCreate()创建前,created()创建,beforeMount()挂载前,mounted()挂载,beforeUpdate()更新前.Updated()更新,beforeDestroy()销毁前,Destroyed()销毁后errorCaptured（）报错；（这是Vue2的）

Vue3: veforeCreate()和created()换成了setup(),

onBeforeMount()挂载前,onMounted()挂载,onBeforeUpdate()修改前,onUpdated()修改,onBeforeUnmount()卸载前,onUnmounted()卸载,onErrorCaptured()报错；（这是Vue3的）

6.vue中router的钩子函数

竟然不知道寄！

复盘解答：

1全局钩子

1. vue router.beforeEach（全局前置守卫）

一个全局的before钩子函数，在每一次路由改变时都执行一遍。可以做页面跳转的处理，如需判断登录的页面拦截。

2、vue router.afterEach（全局后置守卫）

全局的after函数，跳转后执行。可以做页面丢失后的处理操作。

2单个路由里的钩子

1.beforeEnter,beforeLeave

用于写某个指定路由跳转时执行的逻辑。

3组件路由

1.beforeRouteEnter，beforeRouteUpdate，beforeRouteLeave

作用类似,用于组件间切换时调用。

还有些记不清了……

3.问答部分

1.知道Vue单页面和多页面开发的优缺点吗？

回答的很肤浅，没想单html配合多组件和多html的方面上。

复盘解答：

单页面应用（spa）

只有一个html页面，跳转通过组件完成。

优点：跳转流畅，组件化，开发便捷易维护。

缺点：首次加载资源大，优化不好。

多页面应用（mpa）

整个项目有多个html，所有跳转方式都是页面之间相互跳转

优点：首页载入快，只加载本页的内容，优化好。

缺点：页面跳转又是一次加载，频繁跳转的话体验会差很多。

2.聊一聊Vue的生命周期

描述了一下生命周期函数都在哪些时候触发。

3.用过哪些Vue的组件框架。

只用过elment-ui 寄！

复盘解答：

Element：饿了吗开发的后台组件库

iview：友好的 API ，自由灵活地使用空间，细致、漂亮的 UI。

vuetify：一个为 Vue JS 2.0 打造的 Material 风格的组件库

cube-ui：滴滴团队开发的一套基于 Vue.js 实现的精致移动端组件库

buefy：基于 Bulma 的 Vue.js 轻量级 UI 组件库

vue-beauty：基于 ant design 的漂亮的 vue 组件库

vue-storefront：将 PWA 集成到电子商务的框架，支持离线访问

at-ui：一款基于 Vue.js 2.0 的前端 UI 组件库，主要用于快速开发 PC 网站产品

Vue-Blu:基于 Vue.js(2.x) 和 Bulma 的 UI 组件库

(什么学习路径，哈人)

总结

相当失败的一次面试，希望能以此获得更多知识和动力去学习吧。

标签：function,Vue,2021.10,面经,Person,job,9web,组件,name
来源： https://blog.csdn.net/lololiliko/article/details/120679701

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

2021.10.9web前端面经

一、初见面

1.自我介绍

2.笔试

3.问答部分

总结