2024前端面试系列——Vue面试题_描述下 vue 从初始化页面--修改数据--刷新页面 ui 的过程

2. beforeMount和mounted
3. beforeUpdate和updated
4. beforeDestory和destoryed
5. activated和deactivated

Vue 组件间通信有哪些方式?

Vue 组件间通信六种方式

1. props/$emit
2. $emit/$on
3. vuex
4. $attrs/$listeners
5. provide/inject
6. $parent/$children 与 ref

watch、methods 和 computed 的区别?

• watch 为了监听某个响应数据的变化。computed 是自动监听依赖值的变化，从而动态返回内容，主要目的是简化模板内的复杂运算。所以区别来源于用法，只是需要动态值，那就用 computed ；需要知道值的改变后执行业务逻辑，才用 watch。
• methods是一个方法，它可以接受参数，而computed 不能，computed 是可以缓存的，methods 不会。computed 可以依赖其他 computed，甚至是其他组件的 data。

vue 中怎么重置 data?

使用Object.assign()，vm.$data可以获取当前状态下的data，vm.$options.data(this)可以获取到组件初始化状态下的data。

复制Object.assign(this.$data, this.$options.data(this))  // 注意加this，不然取不到data() { a: this.methodA } 中的this.methodA。

原因参考：Vue中的this.$options.data()和this.$data和this.$data")

组件中写 name 选项有什么作用？

1. 项目使用 keep-alive 时，可搭配组件 name 进行缓存过滤
2. DOM 做递归组件时需要调用自身 name
3. vue-devtools 调试工具里显示的组见名称是由vue中组件name决定的

vue-router 有哪些钩子函数?

官方文档：vue-router钩子函数

• 全局前置守卫 router.beforeEach
• 全局解析守卫 router.beforeResolve
• 全局后置钩子 router.afterEach
• 路由独享的守卫 beforeEnter
• 组件内的守卫 beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave

前端路由简介以及vue-router实现原理

route 和 router 的区别是什么？

route是“路由信息对象”，包括path,params,hash,query,fullPath,matched,name等路由信息参数。
router是“路由实例对象”，包括了路由的跳转方法(push、replace)，钩子函数等。

说一下 Vue 和 React 的认识，做一个简单的对比

1.监听数据变化的实现原理不同

• Vue 通过 getter/setter 以及一些函数的劫持，能精确快速的计算出 Virtual DOM 的差异。这是由于它在渲染过程中，会跟踪每一个组件的依赖关系，不需要重新渲染整个组件树。
• React 默认是通过比较引用的方式进行的，如果不优化，每当应用的状态被改变时，全部子组件都会重新渲染，可能导致大量不必要的 VDOM 的重新渲染。

Vue 不需要特别的优化就能达到很好的性能，而对于 React 而言，需要通过 PureComponent/shouldComponentUpdate 这个生命周期方法来进行控制。如果你的应用中，交互复杂，需要处理大量的 UI 变化，那么使用 Virtual DOM 是一个好主意。如果你更新元素并不频繁，那么 Virtual DOM 并不一定适用，性能很可能还不如直接操控 DOM。

为什么 React 不精确监听数据变化呢？这是因为 Vue 和 React 设计理念上的区别，Vue 使用的是可变数据，而 React 更强调数据的不可变。

2.数据流的不同
​

• Vue 中默认支持双向绑定，组件与 DOM 之间可以通过 v-model 双向绑定。但是，父子组件之间，props 在 2.x 版本是单向数据流
• React 一直提倡的是单向数据流，他称之为 onChange/setState()模式。

不过由于我们一般都会用 Vuex 以及 Redux 等单向数据流的状态管理框架，因此很多时候我们感受不到这一点的区别了。

3.模板渲染方式的不同

在表层上，模板的语法不同

• React 是通过 JSX 渲染模板
• 而 Vue 是通过一种拓展的 HTML 语法进行渲染

在深层上，模板的原理不同，这才是他们的本质区别：

• React 是在组件 JS 代码中，通过原生 JS 实现模板中的常见语法，比如插值，条件，循环等，都是通过 JS 语法实现的
• Vue 是在和组件 JS 代码分离的单独的模板中，通过指令来实现的，比如条件语句就需要 v-if 来实现

对这一点，我个人比较喜欢 React 的做法，因为他更加纯粹更加原生，而 Vue 的做法显得有些独特，会把 HTML 弄得很乱。举个例子，说明 React 的好处：react 中 render 函数是支持闭包特性的，所以我们 import 的组件在 render 中可以直接调用。但是在 Vue 中，由于模板中使用的数据都必须挂在 this 上进行一次中转，所以我们 import 一个组件完了之后，还需要在 components 中再声明下，这样显然是很奇怪但又不得不这样的做法。

Vue 的 nextTick 的原理是什么？

1. 为什么需要 nextTick
      Vue 是异步修改 DOM 的并且不鼓励开发者直接接触 DOM，但有时候业务需要必须对数据更改–刷新后的 DOM 做相应的处理，这时候就可以使用 Vue.nextTick(callback)这个 api 了。

2. 理解原理前的准备
      首先需要知道事件循环中宏任务和微任务这两个概念(这其实也是面试常考点)。请阅大佬文章–彻底搞懂浏览器 Event-loop
常见的宏任务有 script, setTimeout, setInterval, setImmediate, I/O, UI rendering
常见的微任务有 process.nextTick(Nodejs),Promise.then(), MutationObserver;

3. 理解 nextTick
      而 nextTick 的原理正是 vue 通过异步队列控制 DOM 更新和 nextTick 回调函数先后执行的方式。如果大家看过这部分的源码，会发现其中做了很多 isNative()的判断，因为这里还存在兼容性优雅降级的问题。可见 Vue 开发团队的深思熟虑，对性能的良苦用心。
如果你比较了解了前面的事件循环原理，推荐你看看这篇文章 请阅大佬文章–全面解析 Vue.nextTick 实现原理

Vuex 有哪几种属性?

有五种，分别是 State、Getter、Mutation、Action、Module

vue 首屏加载优化

1. 把不常改变的库放到 index.html 中，通过 cdn 引入

​

然后找到 build/webpack.base.conf.js 文件，在 module.exports = { } 中添加以下代码

externals: {
  'vue': 'Vue',
  'vue-router': 'VueRouter',
  'element-ui': 'ELEMENT',
},

这样 webpack 就不会把 vue.js, vue-router, element-ui 库打包了。声明一下，我把 main.js 中对 element 的引入删掉了，不然我发现打包后的 app.css 还是会把 element 的 css 打包进去，删掉后就没了。
然后你打包就会发现 vendor 文件小了很多~

2. vue 路由的懒加载

import或者require懒加载。你打包就会发现，多了很多 1.xxxxx.js；2.xxxxx.js 等等，而 vendor.xxx.js 没了，剩下 app.js 和 manifest.js，而且 app.js 还很小，我这里是 100k 多一点。

3. 不生成 map 文件

找到 config/index.js，修改为 productionSourceMap: false

4. vue 组件尽量不要全局引入

5. 使用更轻量级的工具库

6. 开启gzip压缩

这个优化是两方面的，前端将文件打包成.gz文件，然后通过nginx的配置，让浏览器直接解析.gz文件。

7. 首页单独做服务端渲染

如果首页真的有瓶颈，可以考虑用 node 单独做服务端渲染，而下面的子页面仍用 spa 单页的方式交互。
这里不推荐直接用 nuxt.js 服务端渲染方案，因为这样一来增加了学习成本，二来服务端的维护成本也会上升，有时在本机测试没问题，在服务端跑就有问题，为了省心，还是最大限度的使用静态页面较好。

参考链接：
vue首屏加载优化
vue项目首屏加载优化实战

Vue 3.0 有没有过了解？

关于Vue 3.0有幸看过尤大的关于3.0版本的vue生命周期详解。大致说了三个点，第一个是关于提出的新API setup()函数，第二个说了对于Typescript的支持，最后说了关于替换Object.defineProperty为 Proxy 的支持。
      详细说了下关于Proxy代替带来的性能上的提升，因为传统的原型链拦截的方法，无法检测对象及数组的一些更新操作，但使用Proxy又带来了浏览器兼容问题。

vue-cli 替我们做了哪些工作？

首先需要知道 vue-cli 是什么？它是基于 Vue.js 进行快速开发的完整系统，也可以理解成是很多 npm 包的集合。其次，vue-cli 完成的功能有哪些？

.vue 文件 --> .js 文件
ES6 语法 --> ES5 语法
Sass,Less,Stylus --> CSS
对 jpg,png,font 等静态资源的处理
热更新
定义环境变量，区分 dev 和 production 模式
…

js基础

1)对js的理解？
2)请说出以下代码输出的值？
3)把以下代码，改写成依次输出0-9
4)如何区分数组对象，普通对象，函数对象
5)面向对象、面向过程
6)面向对象的三大基本特性
7)XML和JSON的区别？
8)Web Worker 和webSocket？
9)Javascript垃圾回收方法？
10)new操作符具体干了什么呢？
11)js延迟加载的方式有哪些？
12)WEB应用从服务器主动推送Data到客户端有那些方式？

数组对象，普通对象，函数对象
5)面向对象、面向过程
6)面向对象的三大基本特性
7)XML和JSON的区别？
8)Web Worker 和webSocket？
9)Javascript垃圾回收方法？
10)new操作符具体干了什么呢？
11)js延迟加载的方式有哪些？
12)WEB应用从服务器主动推送Data到客户端有那些方式？

[外链图片转存中…(img-7XNI29FG-1714237217114)]

[外链图片转存中…(img-P0OxPi3E-1714237217115)]

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】