大前端实用性面试题

1.vue路由在哪儿挂载

• 在views文件夹下新建Hello.vue文件
• 在src/router/index.js文件中挂载Hello.vue

• <router-view></router-view> 放在哪个位置，路由就在哪个位置加载

​​​​​​2.vue生命周期

• beforeCreate 创建前
• created 创建完毕 （异步ajax，定时器，事件注册）
• beforeMount 挂载前
• mounted 挂载完毕 （$refs 操作dom）
• beforeUpdate 更新前
• updated 更新完毕
• beforeUnmount 卸载前 （移除事件监听，移除定时器）
• unmounted 卸载完毕

3.js数据类型

• 基本数据类型
• 引用数据类型

基本数据类型包括:

undefined - ->(未定义)

null- -> (空的)

number - -> (数字)

boolean- -> (布尔值)

string- -> (字符串)

Symbol - -> (符号)

引用数据类型:

Object- -> (对象)

array -->（数组）

function - -->（函数）等；

4.什么是 dom

dom是一种文档对象模型，同时也是用于html编程的接口，通过dom来操作页面中的元素；当html页面被实现加载的时候，浏览器会创建一个dom，给文档提供了一种新的逻辑结构，并且可以改变内容和结构。

5.虚拟dom

• 虚拟DOM就是普通的js对象。是一个用来描述真实dom结构的js对象，因为它不是真实的dom，所以才叫做虚拟dom。

6.路由守卫

路由守卫又称导航守卫，指是路由跳转前、中、后过程中的一些钩子函数。

官方解释是vue-router提供的导航守卫，要通过跳转或取消的方式来守卫导航。

路由守卫分为三种，全局路由、组件内路由，路由独享。

全局路由钩子函数有：beforeEach、beforeResolve、afterEach（参数中没有next）

组件内路由的钩子函数有：beforeRouterEnter、beforeRouteUpdate、beforeRouteLeave

路由独享的钩子函数有：beforeEnter

7.钩子函数

钩子函数：钩子函数是在一个事件触发的时候，在系统级捕获到了他，然后做一些操作。一段用以处理系统消息的程序。“钩子”就是在某个阶段给你一个做某些处理的机会。

钩子函数：

1、是个函数，在系统消息触发时被系统调用

2、不是用户自己触发的

钩子函数的名称是确定的，当系统消息触发，自动会调用。
常见的钩子函数：

react的生命周期函数、vue的生命周期函数，vue的自定义指令等

8.react生命周期

挂载阶段

• constructor: 构造函数，最先被执行,我们通常在构造函数里初始化state对象或者给自定义方法绑定this
• getDerivedStateFromProps
• render: render函数是纯函数，只返回需要渲染的东西，不应该包含其它的业务逻辑,可以返回原生的DOM、React组件、Fragment、Portals、字符串和数字、Boolean和null等内容
• componentDidMount: 组件装载之后调用，此时可以获取到DOM节点并操作

更新阶段

• getDerivedStateFromProps: 此方法在更新个挂载阶段都可能会调用
• shouldComponentUpdate
• render: 更新阶段也会触发此生命周期
• getSnapshotBeforeUpdate
• componentDidUpdate

卸载阶段

• componentWillUnmount: 当组件被卸载或者销毁了就会调用，我们可以在这个函数里去清除一些定时器，取消网络请求，清理无效的DOM元素等垃圾清理工作。

9.es5和es6的区别

ECMAScripts5,即ES5，ES6是继ES5之后的一次改进，相对于ES5更加简洁，提高了开发效率ES6新增的一些特性：

1）let声明变量和const声明常量，两个都有块级作用域ES5中是没有块级作用域的，并且var有变量提升，在let中，使用的变量一定要进行声明
2）箭头函数ES6中的函数定义不再使用关键字function()，而是利用了()=>来进行定义
3）模板字符串模板字符串是增强版的字符串，用反引号（`）标识，可以当作普通字符串使用，也可以用来定义多行字符串
4）解构赋值ES6 允许按照一定模式，从数组和对象中提取值，对变量进行赋值
5）... 展开运算符可以将数组或对象里面的值展开；还可以将多个值收集为一个变量

10.数组与字符串互转

数组-->字符串 ：  arrObj.join("链接符")

字符串-->数组 ： str.split("分隔符")

11.vue2与vue3区别

vue2和vue3的区别_@柠稔的博客-CSDN博客_vue2与vue3区别

12.v-show与v-if区别

v-if:通过css--display:none 隐藏元素

v-show:删除节点

13.数组方法及使用

JavaScript 数组参考手册

14.字符串方法及使用

JavaScript String 参考手册

15.vue防抖和节流

vue的防抖和节流_qq_1531166148的博客-CSDN博客_vue中防抖和节流的使用场景