vue2 和 vue3的区别

ops/2024/11/13 1:46:17/

1.生命周期不一样

vue2

vue3

  • beforeCreate
  • created
  • beforeMount
  • mounted
  • beforeUpdate
  • updated
  • beforeDestroy
  • Destroy
  • onBeforeMount()
  • onMounted()
  • onBeforeUpdate()
  • onUpdated()
  • onBeforeUnmount()
  • onUnmounted()

2.Composition组合式api

  • Vue2是选项API(Options API),一个逻辑会散乱在文件不同位置(data、props、computed、watch、生命周期钩子等),导致代码的可读性变差。当需要修改某个逻辑时,需要上下来回跳转文件位置。
  • Vue3组合式API(Composition API)则很好地解决了这个问题,可将同一逻辑的内容写到一起,增强了代码的可读性、内聚性,其还提供了较为完美的逻辑复用性方案。所有逻辑在setup函数中,使用 ref、watch 等函数组织代码。

3.vue2和vue3双向数据绑定原理发生了改变

vue2 的双向数据绑定是利用ES5 的一个 API Object.definePropert()对数据进行劫持 结合 发布订阅模式的方式来实现的。

vue3 中使用了 es6 的 ProxyAPI 对数据代理。

4.根节点

  • Vue3 支持碎片(Fragments),就是说在组件可以拥有多个根节点。
  • vue2 只能存在一个根节点,需要用一个div来包裹

5.建立数据 data / setup函数

  • Vue2 这里把数据放入data属性中
  • Vue3 setup函数声明,返回模板需要数据与函数。

6.性能和速度

Vue 3‌:重新编写了虚拟DOM的实现,优化了编译模板,组件初始化和更新性能提高了1.3到2倍,服务器端渲染(SSR)速度提高了2到3倍。此外,Vue 3支持树摇(Tree Shaking),可以只打包需要的模块,减小包大小‌。


http://www.ppmy.cn/ops/132685.html

相关文章

Java与HTML中的标题、文本和图像

一、HTML中的标题 HTML标题标签的基础 在HTML中&#xff0c;标题使用<h1>到<h6>标签来定义&#xff0c;<h1>表示最高级别的标题&#xff0c;<h6>表示最低级别的标题。例如&#xff1a; html复制代码 <h1>这是一级标题</h1><h2>这是…

Ai绘画软件 Stable Diffusion 最新安装包(附安装包)

Stable Diffusion&#xff0c;作为近年来备受瞩目的AI图像生成工具&#xff0c;以其强大的文本到图像生成能力&#xff0c;正在逐步改变创意产业与商业应用的格局。随着Stable Diffusion 4.9的发布&#xff0c;这款工具在技术性能上取得了显著提升&#xff0c;以满足从专业研究…

轻型民用无人驾驶航空器安全操控------理论考试多旋翼部分笔记

官网&#xff1a;民用无人驾驶航空器综合管理平台 (caac.gov.cn) 说明&#xff1a;一是法规部分&#xff1b;二是多旋翼部分 本笔记全部来源于轻型民用无人驾驶航空器安全操控视频讲解平台 目录 官网&#xff1a;民用无人驾驶航空器综合管理平台 (caac.gov.cn) 一、轻型民用无人…

Android 启动时应用的安装解析过程《二》

上一篇内容说到InitAppsHelper这个类的initSystemApps函数&#xff0c;只说了一下几个重要参数的来源还没展开&#xff0c;这里继续&#xff0c;有兴趣的可以看链接: Android 启动时应用的安装解析过程《一》 一、系统应用的扫描安装 /*** Install apps from system dirs.*/Gu…

Oracle 第26章:Oracle Data Guard

Oracle Data Guard 是 Oracle 数据库的一个重要特性&#xff0c;它提供了一种方法来维护一个或多个备用数据库&#xff0c;这些备用数据库可以是物理的、逻辑的或者是快照的。Data Guard 主要用于数据保护和灾难恢复&#xff0c;确保在主数据库发生故障时&#xff0c;能够快速地…

Java 处理 json 格式数据解析为 csv 格式

Java处理json格式数据解析为csv格式 如果不使用 JSON 工具库&#xff0c;你可以手动解析 JSON 格式字符串并将其转换为 CSV 格式字符串。 以下是一个简单示例&#xff0c;展示如何实现这一功能。 示例代码 下面的示例代码手动处理 JSON 字符串&#xff0c;将其转换为 CSV 格式字…

数据分析-39-时间序列分解之经验小波分解EWT

文章目录 1 时间序列模态分解1.1 模态分解的概念1.2 模态分解的作用1.3 常用的模态分解方法1.4 模态分解的常用库2 经验小波分解EWT2.1 EWT的流程2.2 加载数据集2.2.1 数据重采样2.2.2 原始数据可视化2.3 代码实现EWT3 参考附录1 时间序列模态分解 1.1 模态分解的概念 时间序…

es 数据清理delete_by_query

POST /索引名/_delete_by_query?conflictsproceed&scroll_size2000&wait_for_completionfalse&slices36 {"size": 2000, "query": {"bool": { "must": [{"terms": {"rule_id": [800007]}}]}} }slice…