浅谈vue3 和 vue2的区别

  • vue3中不再导出一个Vue的构造函数,而是具名导出很多数据
  • 不给用户提供Vue构造函数来创建vue实例,使用一个具名导出的createApp,然后传入一个根组件来创建,然后返回一个类似于vue实例的对象,调用mount方法来实现挂载
  • 组件中兼容vue2的写法,只不过函数中的this指向不再是vue的组件实例,而是一个proxy代理对象。
  • vue3中同时增加了composition api的编程思想。
  • vue3中的组件可以不再单根
  • vite构建工具(同时也是一个脚手架)伴随着vue3的出现,与webpack相比,组件越多,vite的打包效率越快
    • 使用vite,引用文件时,除了.js文件不需要加后缀名,其他文件都需要添加上后缀名,否则vite无法识别
  • vue3 在编译时效率上的提升 :
    • 静态提升:vue3会识别组件中的一些没有绑定动态内容的静态节点,然后将这些节点编译过后,使用变量保存起来,之后再去重新生成虚拟dom时,不再创建,而是直接拿到之前保存的已经生成好的虚拟dom来使用;属性是静态时,也会将属性用变量保存起来,之后重新生成虚拟dom时会重用该变量

    • 预字符串化:当编译器遇到大量连续的静态内容,会直接将其编译为一个普通字符串节点

      const _hoisted_2 = _createStaticVNode("<div class="logo">

      logo

<ul
class="nav">
  • <a href="">menu
  • <a href="">menu
  • <a
    href="">menu
  • <a href="">menu
  • <a href="">menu
  • ")
  • 缓存事件处理函数:vue3中的render函数中传入了缓存对象_catch,这里面缓存了事件处理函数,这样在每次重新渲染时就不会重新生成一个一模一样的函数,减少内存开销

  • block tree:在vue3中,对比虚拟dom之前,会根节点中记录有哪些节点时动态节点,在对比时会直接对比记录的动态的节点,不会再去对比组件中的静态节点(如果虚拟dom树不稳定,则会进行其他处理)

  • patchFlag :在vue2中比对节点时,不知道那些发生了变化,只会一个个的对比,而在vue3中,记录了节点中哪些是动态的,真正需要比对的,所以在对比时,直接对比真正有可能发生变化的部分。
    未完待续...
    最后编辑于:2024-11-11 21:12:08
    © 著作权归作者所有,转载或内容合作请联系作者

  • 喜欢的朋友记得点赞、收藏、关注哦!!!

    相关推荐
    猿究院_夏燊38 分钟前
    Spring Bean 生命周期
    java·后端·spring
    Wang's Blog1 小时前
    Java 项目实战: 交友项目:登录链路回顾与今日任务地图
    java·开发语言·状态模式·交友
    信誓旦旦的程序猿2 小时前
    【Python量化实战宝典 #08】可转债与债券接口手册:转股价·溢价率·纯债价值(Python 可跑)
    java·python·股票数据api·股票数据api接口·股票api数据接口·股票量化数据api·股票量化数据接口
    砚底藏山河2 小时前
    python量化:行情数据回溯
    java·开发语言·python·金融·maven
    Jlzn88882 小时前
    华东电芯分选通道数怎么配才不堵线
    java·人工智能·架构·自动化·制造
    香吧香2 小时前
    GRPC连接机制---长连接分析
    java·网络与传输协议
    我是人✓2 小时前
    SpringBoot项目的五种创建方式
    java·spring boot·后端
    Wang's Blog3 小时前
    Java 项目实战: 交友项目 - 阿里云 OSS 入门案例:从创建 Bucket 到上传拿到可访问 URL
    java·阿里云·交友
    裕晟资质规划4 小时前
    三类涉密资质延续时限差异分析:军工60日与集成印制3个月的边界
    java·服务器·前端·网络·安全
    念念清晰4 小时前
    000-OpenJDK17 源码构建:MacOS环境(M芯片)
    java·后端