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
 
 
posted @   柠檬先生  阅读(117)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 清华大学推出第四讲使用 DeepSeek + DeepResearch 让科研像聊天一样简单!
· 推荐几款开源且免费的 .NET MAUI 组件库
· 实操Deepseek接入个人知识库
· 易语言 —— 开山篇
· 【全网最全教程】使用最强DeepSeekR1+联网的火山引擎,没有生成长度限制,DeepSeek本体
点击右上角即可分享
微信分享提示