当前位置:网站首页 > Vue.js开发 > 正文

vue2和vue3区别面试题静态提升(vue3和vue2最大的区别)




监测机制的变化、Fragments(碎片)的更新、API模式的变更、数据的存放、生命周期钩子、父子传参等。。

监测机制的变化

  • Vue3中使用了ES6中Proxy API 对数据进行代理,监测整个对象,而不再是某个属性。
  • 消除Vue2中基于Object.defineProperty的实现所存在的诸多限制。
  • Vue3可以监测到对象属性的添加和删除也可以监听到数组的变化。
  • Vue3中支持Map、Set、WeakMap和WeakSet

Fragments(碎片)

  • Vue2在组件中只能有一个根节点。
  • Vue3在组件中可以拥有多个根节点。

API模式的变化

  • Vue2使用选项式API(Options API)。Vue3使用组合式API(Composition API)

数据的存放

  • Vue2中数据存放在data属性中
  • Vue3使用setup()方法,setup()方法在组件初始化构造的时候触发。
    • 从vue引入ref或reactive
    • 简单数据类型使用ref()方法进行处理,复杂数据类型使用reactive()方法进行处理。
    • 使用setup()方法来返回响应式数据,在template可以获取这些响应式数据。

生命周期钩子

  • setup():开始创建组件之前,在beforeCreate和created之前执行。
  • onBeforeMount():组件挂载到节点之前执行。
  • onMounted():组件挂载完成之后执行。
  • onBeforeUpdate():组件更新之前执行。
  • onUpdated():组件更新之后执行。
  • onBeforeUnmount():组件卸载之前执行。
  • onUnmounted():组件卸载之后执行
    • 若组件被keep-alive包裹,则多出两个钩子函数
      • onActivated():被激活时执行。
      • onDeactivated():A组件切换到B组件。A组件消失时执行。

父子传参

  • 子组件通过defineProps()进行接收,并且接收这个函数的返回值进行相应操作

diff算法

  • Vue2:进行虚拟节点对比,并返回一个patch对象来存储两个节点的不同,最后用patch记录的消息去局部更新Dom。它会比较每一个Vnode但对一些不参与更新的元素,进行比较会消耗性能。
  • Vue3:diff算法在初始化时会给每个虚拟节点一个patchFlags(优化的一个标识)。只会比较patchFlags发生变化的Vnode,从而进行视图更新,对比没有变化的做静态标记,渲染时直接复用。

v-if和v-for优先级

  • Vue2中:v-for优先执行
  • Vue3中:v-if优先执行
  • 注:最好不要把v-if和v-for同时用在一个元素上,这样会带来性能的浪费

最后

四轮技术面+一轮hr面结束,学习到了不少,面试也是一个学习检测自己的过程,面试前大概复习了 一周的时间,把以前的代码看了一下,字节跳动比较注重算法,面试前刷了下leetcode和剑指offer, 也刷了些在牛客网上的面经。大概就说这些了,写代码去了~

祝大家都能收获大厂offer~

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

篇幅有限,仅展示部分内容

到此这篇vue2和vue3区别面试题静态提升(vue3和vue2最大的区别)的文章就介绍到这了,更多相关内容请继续浏览下面的相关推荐文章,希望大家都能在编程的领域有一番成就!

版权声明


相关文章:

  • vue2官网中文文档下载到本地(vue2官方文档pdf)2025-01-25 15:54:04
  • 前端跨域解决方案vue(前端跨域解决方案有哪些)2025-01-25 15:54:04
  • vue钩子函数(Vue钩子函数)2025-01-25 15:54:04
  • vue2和vue3区别大吗(vue3与vue2.5区别大吗)2025-01-25 15:54:04
  • win3.2安装(windows3.2安装)2025-01-25 15:54:04
  • pcie 5.0 显卡(pcie4.0x16显卡)2025-01-25 15:54:04
  • Vue插槽用法(vue插槽使用)2025-01-25 15:54:04
  • dos 6.22安装(如何安装dos2unix)2025-01-25 15:54:04
  • 字符串转intpython(字符串转json)2025-01-25 15:54:04
  • ettercap dns欺骗不成功(ettercap0.8.3.1如何进行dns欺骗)2025-01-25 15:54:04
  • 全屏图片