前端面试问题

1.vue的生命周期有哪些，都有什么作用

vue的生命周期：beforeCreate created beforeMount Mounted beforeUpdate updated beforeUnmount unmounted activated deactivated  errorCaptured  renderTracked  renderTriggered

各个生命周期的作用：

beforeCreate: 组件创建前，此时拿不到组件的实例，可以在这里做一个非响应特性的初始化数据

created:组件创建完毕，可以拿到组件实例，可以在这里对data中的数据进行初始化

beforeMounted:组件挂载前，可以拿到组件实例，可以在这里对data中的数据进行初始化

mounted:组件挂载完毕，DOM已经做完了第一次渲染，一般在这里调用ajax请求

beforeUpdate:组件更新前，当组件内数据发生变化，在更新DOM之前执行此钩子函数

updeted:组件更新完毕，DOM做完了渲染后执行此钩子函数

beforeUnmount:组件卸载前，可以在此处移除一些时间监听

unmounted:组件卸载完毕

特殊的生命周期：activated deactivated 被 keep-alive 缓存的组件激活/失活时调用

errorCaptured:在捕获一个来自后代组件的错误时被调用。此钩子会收到三个参数：错误对象、发生错误的组件实例以及一个包含错误来源信息的字符串。此钩子可以返回 false 以阻止该错误继续向上传播。

renderTracked:跟踪虚拟 DOM 重新渲染时调用。钩子接收 debugger event 作为参数。此事件告诉你哪个操作跟踪了组件以及该操作的目标对象和键。

renderTriggered:当虚拟 DOM 重新渲染被触发时调用。和 renderTracked 类似，接收 debugger event 作为参数。此事件告诉你是什么操作触发了重新渲染，以及该操作的目标对象和键。

2.computed和watch有什么区别？分别适用于什么场景

computed:计算属性，有数据缓存的特性，即如果计算结果没有改变，则不渲染DOM。一般只配置getter函数，也可以同时配置getter和setter函数。计算属性，是根据多个数据来计算新的数据，当任一个依赖发生改变，会重新计算，setter中必须有返回值。

watch:监听属性，监听一个或者多个响应式数据，一旦数据发生变化，会自动执行监听回调，一般应用于一对多的情况，当某个监听数据变化，进行一系列操作，没有返回值，特别适合异步处理的场景。默认初始时不执行回调，可以配置immediate为true来指定初始时立即执行一次，可以通过配置deep为true来开启深度监视

watchEffect：不用直接指定要监视的数据，回调函数中使用到哪些响应式数据就监视哪些响应式数据，默认初始时就会执行一次。

3.vue组件的render方法和模板都是怎么使用的？

组件模板是在创建组件时template属性对应的DOM结构，render函数是在字符串模板之外的另一个选择，利用 JavaScript 的编程功能，从vue中结构出h函数，来渲染你想创建的DOM结构。

使用单文件组件时，一般吧DOM结构直接写在template标签中

渲染的页面模板的优先级，是render函数 > template属性 > 外部HTML。

4.怎么实现路由权限控制？

两种权限控制的方法：

1.路由元信息meta配合路由首位使用

2.动态加载路由菜单和路由，vue-router 提供了 addRoutes() 方法，可以动态注册路由， 需要注意的是，动态添加路由是在路由表中 push 路由，由于路由是按顺序匹配的，因此需要将诸如404页面这样的路由放在动态添加的最后。

5.vue双向绑定的原理是什么？

vue.js采用的是数据劫持/代理结合发布和-订阅者模式的方式。

vue2的响应式：

对象：通过Object.defineProperty对对象已有属性值的读取和修改进行劫持

数组：通过重写数组的一系列更新元素的方法来实现元素修改的劫持

问题：对象直接添加新的属性或者删除已有的属性，界面不会自动更新

数组直接通过下标替换元素或者更新length，界面不会自动更新

通过Vue.set或者vm.$set来解决

vue3的响应式：

通过Proxy（代理）来拦截对data任意属性的任意操作，包括属性值的读写，属性的添加/删除等

通过Reflect（反射）动态对被代理对象的相应属性进行对应的操作

6.如何深度修改elementui样式

vue项目中，style标签设置了scoped属性，这样组件内的样式不会影响到子组件，如果我们想修改element样式，vue提供了一个深度选择器（伪类选择器）deep，可以用来修改内部样式。

也可以style和style scoped 标签同时使用

7.为什么promise能链式调用

promise主要用来解决异步回调地狱问题

异步操作存在成功和失败的情况，promise可以通过状态监听函数then来监听成功时的状态，通过catch函数来监听失败是的状态。

1. Promise必须提供一个then方法，用来访问中间值、最终返回值以及失败的原因。

2. then的参数：
   最基本的then方法接收两个函数参数 Promise.then(成功执行的函数，失败执行的函数)，对应于状态变化到fulfilled和rejected的函数调用。
   一般情况下我们都只会传递一个参数，表示成功。

3. then的返回值
   没有在回调函数中写return的情况下，返回为promise对象；
   在回调函数之中写了return 新的promise的情况下，返回值为新的promise对象。

默认情况下 promise.then 返回的是一个新的promise对象，但是这个对象和then的调用对象状态改变时机一致;
then的使用注意事项 : 使用then之后可以去返回一个新的promsie对象用以连缀

8.v-show和v-if区别

v-if具有惰性，当初始渲染条件不满足时，就不会进行渲染，只有条件为真时才会渲染，它是对元素进行销毁和重建来实现的

v-show不论初始条件是什么都会进行渲染，他只是css的display属性来控制元素的显示和隐藏

一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。

9.v-for与v-if的优先级哪个大

一般情况下，不推荐这两个同时使用，可以把 v-for 移动到 <template> 标签中来使用

当 v-if 与 v-for 一起使用时，v-if 具有比 v-for 更高的优先级。

10.var let const 定义变量的区别

var 定义变量，存在变量提升（即预解析），具有函数作用域

let 不存在变量提升，同一个作用域内不能重复定义，let是块级作用域

const 除了let包含的特点外，还有const声明一个只读的常量，常量的值不能更改，而且一旦声明就必须赋值，否则报错

块级作用域的重要性（可以防止原有的数据被覆盖、篡改） 

11.vue中路由跳转

声明式导航：使用router-link标签切换路由，to属性为要跳转的路由

编程式导航：使用router对象的push/replace/back/go等方法切换路由

12.请谈一下你对mvvm的理解

MVVM是Model-View-ViewModel的简写。它本质上就是MVC 的改进版。MVVM 就是将其中的View 的状态和行为抽象化，让我们将视图 UI 和业务逻辑分开。当然这些事 ViewModel 已经帮我们做了，它可以取出 Model 的数据同时帮忙处理 View 中由于需要展示内容而涉及的业务逻辑。

13.vuex的理解

Vuex是vue插件,是一个可以集中式存储管理项目的所有组件的状态的仓库，包括  state,mutations,actions,getters,modules几个属性。vue中其他组件可以获取到store中的共享数据。

当页面刷新时，vuex中的数据可能会丢失，这是因为数据时存储在运行内存中，页面刷新数据丢失，可以将一些数据存储在session中保存。也可以在刷新页面时重新调接口请求数据存入。

14.vue中的指令都有哪些

1. v-model      多用于表单数据的双向绑定
2. v-for           循环列表渲染元素
3. v-show       通过css属性控制元素的显示隐藏，有较大的渲染开销
4. v-if             条件渲染，有较大的切换开销
5. v-else        配合v-if使用
6. v-bind        数据绑定，简写为 :
7. v-on           事件绑定，简写为 @
8. v-text         等价于原生js中的innerText
9. v-html        等价于原生js中的innerHTML
10. v-cloak      当vue没有加载完毕，该元素不会被显示在页面中，防止元素闪烁

15.vue中的修饰符都有哪些

事件修饰符：

1. stop 阻止事件冒泡
2. prevent 阻止标签/浏览器默认行为
3. self 只有e.target是当前元素才会触发
4. capture 在事件的捕获阶段触发
5. once 事件只会触发一次
6. passive 告诉浏览器你不想阻止浏览器的默认行为

v-model修饰符

1. trim 去除输入字符的首位空格
2. number 将输入的值转换为number类型
3. lazu 输入框change事件触发时进行数据同步

键盘按键修饰符

element组件native修饰符表示原生事件

16.nextTick

nextTick，在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。

因为vue在渲染DOM时是异步的，我们刚修改完数据，并不会立即更新DOM，此时获取DOM数据是获取不到最新的状态，我们可以在nextTick回调中拿到最新的状态。

17.vue中父子组件的生命周期

创建过程

Parent beforeCreate -> Parent created -> Parent beforeMount -> Child beforeCreate -> Child Created -> Child beforeMount -> Child mounted -> Parent Mounted

更新过程

Parent BeforeUpdate -> Child beforeUpdate -> Child updated -> Parent updated

销毁过程

Parent beforeDestroyed -> Child beforeDistroyed -> Child distroyed -> Parent destroyed

18.分片上传