【vue】vue2 和 vue3 的区别,响应式/性能提升/渲染函数/插槽

vue2/vue3  的对比

  1. 响应式原理
    1. vue2 使用 defineProperty
    2. vue3 使用 proxy
  2. api
    1. vue2 是选项式 options API
      1. 基于对象的方式,将组件的选项 data,methods 等作为组件实例属性
      2. 代码逻辑比较复杂,难以维护
      3. data 必须是函数
      4. 使用 mixin 复用相同逻辑
        1. 命名冲突
        2. 数据来源不清楚
    2. vue3 引入了组合式 composition api
      1. 更灵活,强大的组件状态和逻辑管理方式,高内聚,第耦合
      2. 代码组织和重用更加方便
      3. 基于函数的方式
      4. 使用 ref,reactive 等函数来创建响应式数据
      5. 使用函数而不是对象,提高 tree-shaking优化,减小打包体积
      6. 更容易实现逻辑复用
      7. 不适用 this,减少了 this 指向不明的问题
  3. 编译时优化
    1. vue3 在编译时会对模板进行静态分析,并且会将模板编译成优化过的渲染函数。这些渲染函数是静态的,不依赖于运行时的状态,因此可以提高渲染性能。
  4. 虚拟 dom 优化
    1. Vue 3 对虚拟 DOM 进行了一些优化,包括对静态节点的标记和缓存,以及更高效的 Patch 算法,从而提高了渲染性能。
    2. dff 算法策略
      1. 深度优先,同层比较:
        1. 比较只会在同层级进行, 不会跨层级比较
        2. 比较的过程中,循环从两边向中间收拢
  5. 插槽变化
    1. vue3 中,作用域插槽被 slot 语法替换
  6. 渲染函数变化
    1. vue2 使用 createElement
    2. vue3 使用 h 函数来代替
  7. fragment 支持
    1. vue3 的渲染函数支持返回片段,可以在渲染函数中直接返回多个跟节点
  8. 动态组件
    1. vue2 使用 component
    2. vue3 的动态组件使用 :is 指令来指定动态组件类型
  9. 模版
    1. vue3 模版支持多个根结点
  10. Teleport 支持:
    1. Vue 3 中引入了 Teleport(传送门)特性,允许组件在 DOM 树中的任何位置渲染自己的内容,与 Vue 2 中的 slot 指令有所不同。
  11. typescript 
    1. vue3 支持 ts
  12. 全局 API重构
    1. vue2 使用 Vue.xx()
    2. vue3 使用 app.xx()
  13. tree-shaking
    1. vue2 默认不支持tree-shaking ,但是可以使用 webpack等工具实现
      1. 基于 cjs 语法
      2. 基于单例的,捆绑程序无法检测到该对象的哪些属性在代码中被使用到
    2. Vue3 源码引入 tree-shaking,将全局 API 进行分块,不使用某些功能,不会包含在基础包中
      1. 基于 esm,借助 esm 静态编译思想,再编译时就能确定模块的依赖关系
      2. 编译阶段利用ES6 Module判断哪些模块已经加载
      3. 判断那些模块和变量未被使用或者引用,进而删除对应代码
      4. 这个 tree-shaking 原理和webpack的tree-shaking原理一样
    3. Vue 3 支持更好的 Tree-shaking,可以更有效地剔除未使用的代码,减少最终打包文件的大小。
    4. 模块的静态分析
    5. 按需引入
    6. 编译时优化
    7. 剔除未使用的导出
    8. vue3 更小的打包体积
    9. vue3 程序执行时间更快

vue3性能提升的体现

  1. 编译阶段渲染函数的优化
    1. diff 算法优化
    2. 静态提升
      1. 不参与更新的元素,会做静态提升
      2. 只会被创建一次,在渲染时直接复用
      3. 免去了重复的创建节点
    3. 事件监听缓存
      1. 当一个事件监听器被创建时,它会被缓存起来,并在下次重新渲染时重复使用,除非监听器的依赖发生了变化,才会重新创建。这样就避免了不必要的函数创建和销毁,提高了性能。
    4. SSR 优化
      1. 当静态内容大到一定量级时候,会用createStaticVNode方法在客户端去生成一个static node,这些静态node,会被直接innerHtml,就不需要创建对象,然后根据对象渲染
  2. 源码体积优化
    1. vue3 整体体积变小,移除了不常用的 API
      1. 移除 filter 过滤器,使用计算属性和方法可以实现
      2. 移除 v-on.native 修饰符,值用使用v-on直接来监听原生事件
      3. $on, $off, $once 方法: 在 Vue.js 3 中,不再推荐直接访问实例上的 $on, $off, $once 方法来进行事件的监听和解绑,而是使用 Composition API 提供的 onMounted, onUnmounted, onBeforeUnmount 等生命周期钩子函数来进行事件的绑定和解绑。
        1. vue2 中的$on 本质上是基于发布-订阅模式实现的
        2. vue3 不支持之后我们可以自己实现订阅发布或者使用第三方库
          1. @vue/event-emitter
          2. mitt
    2. 使用 tree-shaking
      1. 原理是 esm 的静态编译
  3. 响应式系统的优化
    1. vue3 使用 proxy
      1. 可以动态监听对象属性的添加
      2. 可以监听数组的索引和数组length属性
      3. 可以监听删除属性
  4. 语法/api的优化
    1. 组合式API

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/707768.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Ansible自动化运维(四)jinja2 模板、Roles角色详解

👨‍🎓博主简介 🏅云计算领域优质创作者   🏅华为云开发者社区专家博主   🏅阿里云开发者社区专家博主 💊交流社区:运维交流社区 欢迎大家的加入! 🐋 希望大家多多支…

PHP7.3 GD库报错imagecreatefromstring(): No JPEG support in this PHP build

最近在做docker容器的时候遇到了问题,安装的GD库没有JPEG支持,因为项目用到了绘图技术,这个支持必不可少。要解决这个问题也很简单: 安装jpeg支持,重新编译gd库,生成gd.so文件,重新加载gd库扩展…

Springboot+vue的考务报名平台(有报告)。Javaee项目,springboot vue前后端分离项目。

演示视频: Springbootvue的考务报名平台(有报告)。Javaee项目,springboot vue前后端分离项目。 项目介绍: 本文设计了一个基于Springbootvue的前后端分离的考务报名平台,采用M(model&#xff0…

vue2后台管理系统demo,包含增删查改、模糊搜索、分页

因一直敲小程序,vue不熟练,自己练手项目,就包含增删查改以及模糊搜索分页 一、页面简单但功能齐全 二、数据是mock模拟 三、启动步骤 1、 json-server --watch data.json 启动mock数据 2、npm i 下载依赖 3、npm run serve 四、github地址…

ETH网络中的账户

ETH网络中的账户 Externally owned accounts (EOA) - 外部账户 由用户控制,我们导入助记词创建的账户就属于此类账户。 Contract accounts (smart contracts) - 合约账户 合约账户由以太坊虚拟机执行的代码控制。它也被称为智能合约。合约帐户有相关的代码和数据存…

Redis的高性能之道

前言:做码农这么多年,我也读过很多开源软件或者框架的源码,在我看来,Redis是我看过写得最优美、最像一件艺术品的软件,正如Redis之父自己说的那样,他宁愿以一个糟糕的艺术家身份而不是一名好程序员被别人记…

python opencv比较图片相似度

目录 一:均值哈希算法 二:三直方图算法 三:单通道直方图 一:均值哈希算法 均值哈希算法是一种快速比较图像相似度的方法。它首先将图像转化为灰度图像,然后计算图像的均值,接着将每个像素的

探索AI视频模型的无限可能:OpenAI的Sora引领创新浪潮

文章目录 📑前言一、技术解析二、应用场景三、未来展望四、伦理与创意五、用户体验与互动🌤️总结 📑前言 随着人工智能技术的蓬勃发展,AI视频模型正逐渐成为科技领域的新宠。在这个变革的浪潮中,OpenAI推出的首个AI视…

算法沉淀——动态规划之回文串问题(上)(leetcode真题剖析)

算法沉淀——动态规划之回文串问题 01.回文子串02.最长回文子串03.分割回文串 IV04.分割回文串 II05.最长回文子序列06.让字符串成为回文串的最少插入次数 01.回文子串 题目链接:https://leetcode.cn/problems/palindromic-substrings/ 给你一个字符串 s &#xf…

雾锁王国服务器官方配置要求说明

雾锁王国/Enshrouded服务器CPU内存配置如何选择?阿里云服务器网aliyunfuwuqi.com建议选择8核32G配置,支持4人玩家畅玩,自带10M公网带宽,1个月90元,3个月271元,幻兽帕鲁服务器申请页面 https://t.aliyun.com…

C# TCP/IP协议

在C#中编写TCP/IP通信 //开启监听各个网络的连接是否成功 //开启服务端,监听,并且进入监听线程 try { IPAddress ip IPAddress.Parse(HostAddress); IPEndPoint ipe new IPEndPoint(ip, HostPort); m_services new Socket(Add…

深入JVM:解析OOM的三大场景,原因及实战解决方案

在Java应用程序开发中,OutOfMemoryError(OOM)是一个令人头痛的问题。当JVM中的内存无法满足应用程序的需求时,就会抛出这个错误。本文将深入探讨OOM的三大场景:堆内存溢出、方法区内存溢出和栈内存溢出,并分…

ChatGPT能替代什么人?

上一讲关于ChatGPT的热炒,其实对于我们来说算是敲了敲警钟。 其实在今天,关于ChatGPT,最多人关注的一个问题就是:ChatGPT能取代人吗,或者说能抢人的饭碗么吗? 有人说不能,也有人说能&#xff…

代码随想录算法训练营day30 || 332.重新安排行程(未完成),51. N皇后,37. 解数独(未完成)

这就是传说中的N皇后&#xff1f; 回溯算法安排&#xff01;| LeetCode&#xff1a;51.N皇后_哔哩哔哩_bilibili // 时间复杂度O(n^2) // 空间复杂度O(n^2)class Solution {List<List<String>> res new ArrayList<>();public List<List<String>>…

【机器人最短路径规划问题(栅格地图)】基于蚁群算法求解

基于蚁群算法求解机器人最短路径规划问题的仿真结果 仿真结果 收敛曲线变化趋势 蚁群算法求解最优解的机器人运动路径 各代蚂蚁求解机器人最短路径的运动轨迹

Java+SpringBoot+Vue:瑜伽馆管理的黄金组合

✍✍计算机毕业编程指导师 ⭐⭐个人介绍&#xff1a;自己非常喜欢研究技术问题&#xff01;专业做Java、Python、微信小程序、安卓、大数据、爬虫、Golang、大屏等实战项目。 ⛽⛽实战项目&#xff1a;有源码或者技术上的问题欢迎在评论区一起讨论交流&#xff01; ⚡⚡ Java、…

LeetCode 刷题 [C++] 第128题.最长连续序列

题目描述 给定一个未排序的整数数组 nums &#xff0c;找出数字连续的最长序列&#xff08;不要求序列元素在原数组中连续&#xff09;的长度。 请你设计并实现时间复杂度为 O(n) 的算法解决此问题。 题目分析 对于数组中存在的连续序列&#xff0c;为了统计每个连续序列的…

CSS复合选择器(二)

CSS复合选择器&#xff08;二&#xff09; 伪类选择器一、动态伪类&#xff1a;二、结构伪类三、否定伪类&#xff1a;四、UI伪类&#xff1a;五、目标伪类&#xff08;了解&#xff09;六、语言伪类&#xff08;了解&#xff09; 伪类选择器 作用&#xff1a;选中特殊状态的元…

java工程师面试突击中华石杉,开发人员必学

如何高效的学习MyBatis源码呢&#xff1f; 市面上真正适合学习的MyBatis资料太少&#xff0c;有的书或资料虽然讲得比较深入&#xff0c;但是语言晦涩难懂&#xff0c;大多数人看完这些书基本都是从入门到放弃。学透MyBatis源码难道就真的就没有一种适合大多数同学的方法吗&am…

Linux系统安装使用nginx

1.编译安装Nginx服务 (1)关闭防火墙&#xff0c;将安装nginx所需要软件包传到/opt目录下 systemctl stop firewalld systemctl disable firewalld setenforce 0 将压缩包传入到/opt目录下 cd /opt wget http://nginx.org/download/nginx-1.18.0.tar.gz (2). 安装依赖…