前端面试题总结：模拟面试

最新推荐文章于 2024-05-09 18:30:19 发布

zhy郑小鱼

最新推荐文章于 2024-05-09 18:30:19 发布

阅读量1.2k

点赞数 5

分类专栏：前端开发文章标签：前端面试 vue.js

本文链接：https://blog.csdn.net/m0_52358470/article/details/123325613

版权

前端开发专栏收录该内容

36 篇文章 3 订阅

订阅专栏

1，问：请先自我介绍？

答：略

二，技术知识题

1，问：看你简历有项目经历，那在你之前的项目中，用到的技术栈有哪些？

答：主要使用过vue和微信小程序，其中对vue2使用的更多

2，问：你为什么使用vue呢？

答：vue相较于其他框架，更容易上手。在进行表单处理时，Vue的双向数据绑定非常方便。vue对第三方插件包容性很强，可以扩展vue的功能。

3，问：说一下v-if和v-show的区别？

答：v-if是对DOM操作是添加还是删除，如果条件为真，才会加载显示元素内容；v-show是对css的display属性进行操作，是渲染时的显示和隐藏。

4，问：vue组件之间的通信？

答：

父到子：在父组件中用v-bind赋值，在子组件中用props接收数据

子到父：在父组件中注册事件，在子组件中触发事件，并把数据当做参数传递过去，父组件处理事件并获取数据

相邻组件：先声明一个空的vue实例bus，在A中给bus注册事件，并监听事件处理程序，在B中触发bus上的事件，并把值当成参数传递，组件A通过事件处理程序获取数据

5，问：你怎么理解vue的数据双向绑定？

答：vue使用MVVM的模式，实现数据双向绑定，在改变视图的时候会更新数据，改变数据的时候会更新视图。

6，问：你举例实现一下数据双向绑定？

答：

<div id="app">

<input v-model="msg"><br/>

{{msg}}

</div>
........

var vue=new Vue({

el:"#app",//需要被vue模版化管理的dom结构是哪个

data(){
    return{
        msg:''
     }
  },

}

7,问：MVVM和MVC区别？

答：m:model. v:view. vm:viewmodel
数据模型双向绑定原理。通过viewmodel控制。view负责接受反馈用户操作，model数据模型. 并且model和view是相互的。一方改变另一方也跟着改变。当用户操作vue. viewmodel感知到变化，然后通知model发生改变。反之model发生改变，viewmodel感知到变化，也会通知view发生改变。
m:model. v：view. c:control
用户操作—view(接收用户的输入操作)—control（用户逻辑处理）—model（数据model)—view(反馈给客户)

8，问：vue的生命周期？

答：：一个vue实例从实例化到销毁所经历的各个状态，这个周期就叫做生命周期。

挂载之前会初始化：初始化生命周期，事件，props，methods，data，computed，watch等。此时最重要的部分是Object.defineProperty设置setter和getter函数来实现响应式和数据依赖。

三个流程：挂载流程（4个钩子函数）

beforeCreate（）：在实例化之后，此时不能获取data中数据，也不能使用methods中的方法 created（）：此时可以调用methods中的方法，也可以获取data中的数据，一般用在发送请求获取数据的时候。

beforeMounted():在挂载开始前调用

mounted（）：此时vue实例已经被挂载到页面中，可以操控页面中的dom元素

更新流程（2个钩子函数）

beforeUpdate( ):数据更新时被调用，可以在这个时候进一步更改状态

updated（）：此时组件dom已经更新，可以执行依赖于dom的操作销毁流程（2个钩子函数）beforeDestroy():在实例销毁之前调用，此时实例还可以使用，会释放一些资源，比如：清除定时器

Destroyed（）：vue实例销毁之后调用，此时会解绑实例，清除监听器，销毁所有子实例。

9，问：有没有使用过什么自动化测试框架？

答：暂时对这个没有了解

10，问：有没有用过其他js框架？

答：我在实习的时候，有用过Taro+react联合开发可多端运行的小程序，其中对react有一点了解，希望在未来的工作中，有机会可以深入学习。

三、js基础知识题

1，问：js数据类型？

答：分为基本数据类型：number，string，undefined，null，boolean，symbol，bigint

和引用数据类型：object

2，问：js中的==和===的区别？

答：==是比较数值是否相等，

===是先比较数值是否相等，再比较类型是否相等

3，问：js深拷贝和浅拷贝的区别？

答：js浅拷贝是只拷贝值，不拷贝存储地址，当原值数值改变时，复制的值也会改变。

深拷贝是拷贝值和地址，当原值改变时，不会影响新值。

追问：深拷贝怎么实现？

答：JSON.parse(JSON.stringify(obj))

4，问：对原型，构造函数，实例怎么理解的？（问的原型链）

答：构造函数实例化会得到实例对象，每一个构造函数都有一个原型对象，构造函数通过prototype属性访问原型上的方法和属性，而原型的constructor可以指向它的构造函数，实例对象也可以通过__proto__访问原型上的属性和方法。如图：

5，问：怎么理解闭包？

答：函数嵌套，比如函数a中定义了一个函数b，函数b可以访问函数a中的变量和参数，这就是闭包，好处：保护函数b中的变量不被污染，坏处：函数b引用函数a中的变量不会被销毁，容易造成内存消耗，泄漏等问题，解决办法：变量引用后可以手动设为null。

6，问：你对js中的this怎么看？

答：this一般是指向当前对象，比如，在一般函数方法中使用 this 指代全局对象；作为对象方法调用，this 指代上级对象；作为构造函数调用，this 指代new 出的对象；也可以使用call，apply和bind改变this指向。

7，问：有遇到跨域问题吗？怎么解决的？

答：我在vue项目中使用过跨域，因为是前后端分离的项目，在解决方面，是使用webpack自带的跨域机制，配置的api。对于跨域的解决办法，我也有了解过，可以使用jsonp包裹数据传输，或者在服务器端配置CORS（CORS 是跨域资源分享（Cross-Origin Resource Sharing）的缩写。它是 W3C 标准，属于跨源 AJAX 请求的根本解决方法）。

8，问：请详述一些http请求过程？

答：1，在地址栏输入url，DNS域名解析系统会解析出ip地址，2，然后浏览器和服务器建立Tcp连接，3，浏览器发送HTTP请求，4，服务器响应请求，浏览器获取html代码，5，浏览器解析HTML代码，获取HTML中的资源，比如图片，样式等资源6，关闭TCP连接，浏览器渲染页面，把内容展示给用户。

9，问：你知道的web前端的优化策略？

答：1，减少http请求,2，图片懒加载，在未到达图片可视区时，不给src赋值，3，把一些css，js放在外部文件里，使用时引入。4，压缩图片大小，可以使用base64.