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 修饰符有哪些