2021前端面试常见基础问题

最新推荐文章于 2022-11-07 16:10:00 发布

神的少女光芒万丈

最新推荐文章于 2022-11-07 16:10:00 发布

阅读量286

点赞数

分类专栏：笔记文章标签： vue 面试

原文链接：https://www.cnblogs.com/dream111/p/13499020.html

版权

笔记专栏收录该内容

27 篇文章 0 订阅

订阅专栏

本文深入探讨了前端开发中的核心概念和技术，包括基本数据类型与引用类型的区别、ES6新特性、Promise使用方法、闭包原理、Vue组件通信机制、v-if与v-show指令的区别、Vue生命周期理解等内容。

摘要由CSDN通过智能技术生成

1、基本数据类型有哪些，和引用数据类型有什么区别？

区别:

基本类型在栈内存,引用类型在堆内存分配地址.
不同的内存分配机制也带来了不同的访问机制
复制变量时的不同
参数传递的不同（把实参复制给形参的过程）

2、说一说ES6常用的属性有哪些？

块级作用域
提供了定义类的语法糖
增了一种基本数据类型(Symbol)
新增了变量的结构赋值
函数参数允许设置默认值，引入rest参数，新增箭头函数
数组新增一些API和一些方法
对象和数组新增了扩展运算符
ES6新增了模块化
ES6新增了set和map数据结构
ES6原生提供Proxy构造函数，用来生成Proxy实例
ES6新增了生成器（Generator）和遍历器（Iterator）

ps:语法糖语法糖（Syntactic sugar），也译为糖衣语法，是由英国计算机科学家彼得·约翰·兰达（Peter J. Landin）发明的一个术语，指计算机语言中添加的某种语法，这种语法对语言的功能并没有影响，但是更方便程序员使用。通常来说使用语法糖能够增加程序的可读性，从而减少程序代码出错的机会

3、Promise的作用是什么？尝试将Fetch进行封装。

主要用于异步计算
可以将异步操作队列化，按照期望的顺序执行，返回符合预期的结果
可以在对象之间传递和操作promise，帮助我们处理队列

全局 fetch 函数是 web 请求和处理响应的简单方式，不使用 XMLHttpRequest访问, fetch 函数支持所有的 HTTP
方式：

 fetch('请求地址') .then(function(response) {
 	 return response.json();
 }) .then(function(myJson) {
  console.log(myJson); 
  });

4、说一说你对闭包的理解

闭包就是能够读取其他函数内部变量的函数.

例:

for (var i = 0; i < 5; ++i) {
  setTimeout(function() {
    console.log(i + " ");
  }, 100);
} 五遍5

for (var i = 0; i < 5; ++i) {
  (function(i) {
    setTimeout(function() {
      console.log(i + " ");
    }, 100);
  })(i);
}  0 1 2 3 4 5

5、Vue组件通信用哪些方法？

1.父传子 props
2.$子传父 $emit
3.Vuex Bus总站
4.通过dom节点 $r e f s 访问$ parent / $children

6、v-if和v-show指令的共同点和不同点？

1.手段：v-if是通过控制dom节点的存在与否来控制元素的显隐；v-show是通过设置DOM元素的display样式，block为显示，none为隐藏；
2.编译过程：v-if切换有一个局部编译/卸载的过程，切换过程中合适地销毁和重建内部的事件监听和子组件；v-show只是简单的基于css切换；
3.编译条件：v-if是惰性的，如果初始条件为假，则什么也不做；只有在条件第一次变为真时才开始局部编译（编译被缓存？编译被缓存后，然后再切换的时候进行局部卸载);
v-show是在任何条件下（首次条件是否为真）都被编译，然后被缓存，而且DOM元素保留；
4.性能消耗：v-if有更高的切换消耗；v-show有更高的初始渲染消耗

7、如何让CSS只在当前组件中起作用？

给style标签中加入scoped属性

8、Vue里面如何获取dom元素？

1)方法一：直接给相应的元素加id,然后再document.getElementById(“id”);获取
2)方法二：使用ref,给相应的元素加ref=“name” 然后再this.$refs.name获取到该元素

9、为什么使用key？

因为vue组件高度复用，增加Key可以标识组件的唯一性，为了更好地区别各个组件， key的作用主要是为了高效的更新虚拟DOM保持数据的唯一

10、v-model是如何实现的，通过那两个指令结合实现的？

1)通过bind绑定事件
2)通过绑定绑定input事件来更新对应对象的值。

11. 请说出Vue-CLI项目中src目录每个文件夹和文件的用法？

assets 文件夹是放静态资源
components 是放组件
router 是定义路由相关的配置
view 视图
app.vue 是一个应用主组件
main.js 是入口文件
store 放入vuex

应用场景有：单页应用中，组件之间的数据状态；例如：购物车功能、登录状态等等

12 举例computed和watch的使用场景

转载于：https://www.cnblogs.com/dream111/p/13499020.html

13 Vue组件中data为什么必须是一个函数()

数据以函数返回值的形式定义，这样每次复用组件的时候，都会返回一份新的data，相当于每个组件实例都有自己私有的数据空间，它们只负责各自维护的数据，不会造成混乱。而单纯的写成对象形式，就是所有的组件实例共用了一个data，这样改一个全都改了。

14 Vue中双向数据绑定是如何实现的？

  	V-model

15.数据类型强制转化和隐式转化的分别怎么使用

数值:

Number(参数) 把任何的类型转换为数值类型 parseInt(参数1，参数2) 将字符串转换为整数 parseFloat()
将字符串转换为浮点数字符串:

1.String(参数),可以将任何的类型转换为字符串
2.toString(),调用的格式对象.toString(), 作用是将对象以字符串的方式来表示布尔类型:

Boolean() 可以将任何类型的值转换为布尔值函数:

isNaN( ) 该函数会对参数进行隐式的Number()转换，如果转换不成功则返回true; alert() 输出的内容隐式的转换为字符串

隐式转换:

在js中，当运算符在运算时，如果两边数据不统一，CPU就无法计算，这时我们编译器会自动将运算符两边
数据做一个数据类型转换，转成一样的数据类型再计算这种无需程序员手动转换，而由编译器自动转换的方式就称为隐式转换

16 第一次页面加载会触发哪几个钩子函数？

beforeCreate, created, beforeMount, mounted 。

17 Vue-Router是什么？它有哪些组件？

vue-router路由，通俗来讲主要是来实现页面的跳转，通过设置不同的path，向服务器发送的不同的请求，获取不同的资源。

主要组件：router-view、router-link

18 .Vue-Router有哪几种导航钩子？

1)beforeRouteEnter
2)beforeRouteUpdate
3)beforEach
4)afterEach

19.$ $r o u t e 和$ router的区别

$ $r o u t e r 是 V u e R o u t e r 的实例，在 s c r i p t 标签中想要导航到不同的 U R L, 使用$ router.push方法。返回上一个历史history用$router.to(-1)

$route为当前router跳转对象。里面可以获取当前路由的name,path,query,parmas等。

20 谈谈你对面向对象的理解

把项目中所有的功能提前准备好, 需要哪个调用哪个即可

21.vue 有几个生命周期以及各个生命周期的调用时机

beforeCreate : 创建Vue实例前的时候执行，
created : 创建Vue实例完成后执行，

 >   beforeMount : Vue实例开始渲染前执行，

  >    mounted : Vue实例渲染完成后执行，

beforeUpdate : Vue实例修改前执行，

updated : Vue实例修改完成后执行，
beforeDestroy : Vue开始消亡前执行，
destroyed : Vue实例消亡后执行，
activated ：组件激活时调用。该钩子在服务器端渲染期间不被调用。
deactivated ：组件停用时调用。该钩子在服务器端渲染期间不被调用。 errorCaptured : 当捕获一个来自子孙组件的错误时被调用。此钩子会收到三个参数：错误对象、发生错误的组件实例以及一个包含错误来源信息的字符串。此钩子可以返回false 以阻止该错误继续