2025年前端面试准备vue篇

 

1.VUE的声明周期有哪些及每个生命周期做了什么

　　beforeCreate: 是new Vue() 之后触发的第一个钩子，data,methods,computed 以及watch 上的数据和方法都不能被访问

　　created: 在实例创建完成后发生，可以做一些初始化数据的获取，在当前阶段无法与Dom 进行交互，如果非要可以通过vm.$nextTick 来访问。

　　beforeMounted: 发生在挂载之前，template模版导入渲染函数编译，虚拟Dom已经创建完成，即将开始渲染

　　mounted:在挂载完成后发生，在当前阶段，真实的Dom 挂载完毕，数据完成双向绑定，可以访问到Dom 节点，使用$ref属性对Dom 进行操作。

　　beforeUpdate: 发生在更新之前，也就是响应数据发生更新，虚拟Dom 重新渲染之前被触发，可以在当前阶段进行更改数据，不会造成重新渲染。

　　updated: 发生在更新完成之后，组件Dom 已完成更新，避免在此期间更改数据，可能会导致数据的万县循环更新。

　　beforeDestroy : 发生在实例销毁之前，在当前阶段实例完全可以被使用，在这个阶段可以完成善后工作，比如清除定时器。

　　destroyed: 发生在销毁之后，这个阶段只剩下Dom空壳，组件已经被拆解，数据绑定陪卸除，监听被移除，子实例被销毁。

 

2.vue 响应式原理是什么？ Vue3 响应式有什么不同

　　vue 在初始化的时候会使用Object.defineProperty 重新定义data中的所有属性，当页面调用对应的属性的时候，会进行依赖收集

　　　　如果属性发生变化会通知相关的依赖进行更新操作(发布订阅)。

　　Vue3.x 改用Proxy 替代Object.definedProperty,Proxy 可以直接监听对象和数组的变化。

 

3.vue3和vue2的别去

　　源码组织方式变化：使用TS 重新。

　　支持Composition API 基于函数的API 更加灵活组织组件逻辑。

　　响应式系统提升:Vue3 采用的是proxy,可动态新增删除属性，及数据变化

　　编译优化：vue2通过标记静态跟节点优化diff,vue3标记和提升所有静态根节点，diff 的时候只需对比动态节点内容。

　　打包体积的优化：移除了一些不常用的api,例如：filter

　　生命周期的优化：使用setup代替了之前的beforeCreate和created

　　vue3的template 标签支持多个根标签。

　　vuex 状态 管理：创建实例的方式不同，vue2为new Store,vue3为createStore

　　Route 获取页面实例与路由信息：vue2 通过this 获取router 获取 实例，vue3 通过使用getCurrentInstance/userRoute和userRouter获取当前组件实例

　　Props 的变化；vue2 通过this 获取props 里面的内容，vue3直接通过props

 

4.对MVVM 的理解

　　就是把MVC 中的Controller 演变成了ViewModel ,Model 层代表数据模型，View代表UI组件，viewModel 是view和model 层的桥梁

　　数据会绑定到viewModel 并自动渲染到页面中，视图的变化时会通知viewModel 层更新数据。

 

5.v-model 双向绑定的原理是什么

　　v-model 本质是一个语法糖，可以看成是value+input 方法的语法糖，可以通过model 属性的prop 和envent 属性进行自定义，原生的

　　标签会根据生成不同的事件和属性。

 

6.vue2.x和vue3.x 渲染的diff 算法

　　diff 算法有以下过程

　　　　同级比较，在比较子节点

　　　　先判断一方有子节点一方没有子节点的情况(如果新的children没有子节点，将就的子节点移除)比较都有子几点的情况

　　递归比较子节点

　　　　vue2 的核心Diff 算法采用了双端比较算法。

　　　　vue3 借鉴了 ivi 算法和inferno 算法。

 

7.vue 组件通讯方式有哪些及原理

　　父子组件通信，

　　　　父->子 props 子->父 $on,$emit 获取父子组件的实例$parent,$children

　　　　Ref 获取实例的方式调用组件的属性或者方法。

　　　　Provide,inject 依赖注入的形式，兄弟组件的方式 Bus 跨级组件通信 Vuex

 

8.hash 路由和history 路由

　　location.hash 的值实际上就是 # 后面的

　　history 实际上是采用了HTML5中提供的api 来实现的 主要有history.pushState() 和history.replaceState()

 

9.keep-alive 的常用属性有哪些

　　keep-alive 可以实现组件缓存 ，当组件切换时不会对当前组件进行卸载

　　常用的两个属性 include/exclude 允许组件有条件的进行缓存

　　两个声明周期 activated/deactivated 用来得知当前组件是否处于活跃状态

　　keep-alive 还运用了LRU 算法

 

10.nextTick 的作用是什么

　　在下次DOM 更新循环结束之后执行延迟回调，nextTick 主要是使用了宏观任务和微观任务。

　　定义了一个异步方法，多次调用nextTick 会将方法存入队列中，通过这个异步方法情况当前队列。

 

11. vue complier 的实现原理是什么

　　complier 的主要作用是解析模版，生成渲染模版的render,而render 的主要作用是为了生成VNode

　　complier 主要分为3 大块

　　　　parse: 接授template 原始模版，按着模版的节点和数据生成对应的ast

　　　　optimize: 遍历ast的每一个节点，标记静态节点，这样就知道哪部分不会变化，于是在页面需要更新时，通过diff 减少去对比DOM ，提升性能。

　　　　generate:把前两步生成完善的ast,组成render 字符串，然后将render 字符串通过new Function 的方式转换成渲染函数。

 

12.watch 与 computed 的区别

　　都是观察数据变化的

　　　　计算属性将会混入到 vue 的实例中，所需要监听自定义变量；watch 监听data,props 里面的数据的变化

　　　　computed 有缓存，他依赖的值变了才会重新计算 watch 没有。

　　　　watch 支持异步，computed 不支持；

　　　　watch 是一对多（监听某一个值变化，执行对应操作），computed 是多对一（监听属性依赖与其他属性）

　　　　watch 监听函数接收两个参数，第一个是最新值，第二个是输入之前的值。

　　　　computed 属性是函数的时，都有get和set 方法，默认走get方法 get 必须有返回值。

 

13.vue 修饰符有哪些

事件修饰符	.stop:防止冒泡，.prevent: 防止默认事件，.capture:使用事件捕获模式，.self 只在当前元素本身触发，.once：只出一次，.passlve: 默认行为将会立即触发
按键修饰符	.left,.right,.moddle,.enter,.tab,.delete,.esc,.space,.up,.down,.left,.right,.ctrl,.alt,.shift,.meta
表单修饰符	.lazy,.number,trim

 

14.vue项目中的性能优化

编码阶段	尽量减少data 中的数据 ，data中的数据会增加 getter 和setter ,v-if 和v-for 不能连用 spa 页面尽量采用 keep-alive 缓存组件 ，key 保证唯一，使用懒加载路由异步组件，第三方模块按需导入，长列表滚动到可视区动态加载，图片懒加载。
打包阶段	压缩代码，Tree Shaking/Scope Holsting 使用cdn 加载第三方模块， 多线程打包 happypack splitChunks 抽离公共文件，sourceMap 优化
用户体验	骨架屏 PWA

 

15.vue 中的spa 应用如何优化首屏加载速度

请求优化	将第三方的库放到CDN 上，能够大幅度减少生产环境中的项目体积，CDN 能够实时根据网络流量和各个节点的连接，负载均衡及到用户的距离。
缓存	将长时间不会改变的的第三方库或者静态资源设置为强缓存，将max-age 设置为一个非常长的时间，好的缓存策略有助于减轻服务器的压力。
gzip	开启gzip 压缩，通常开始前gzip 压缩能够有效的缩小传输资源的大小
http2	如果首屏加载的静态资源非常的多，浏览器对同域名的tcp 连接数量是有限的 chrome为6个
懒加载	当url 匹配到相应的路径的时候，通过import 动态加载页面组件，这样首屏的代码量会大幅度减少
预渲染	可以添加loading,或者骨架屏幕尽可能的减少白屏对用户的影响体验
合理使用第三方库	对于一些第三方ui 框架，类库，尽量使用按需加载，减少打包体积
提升代码使用率	利用代码分割，将脚本中无需立即调用的代码在代码构建是转变为异步加载的过程
封装	构建良好的项目架构，按照项目需求惊醒全局组件，插件，过滤器，指令，utils 等做一些公共封装
图片懒加载	使用图片懒加载可以优化同一时间减少http 请求开销
压缩图片	可以使用image-webpack-loader