Vue 3 和 Vue 2区别

Vue 3 是 Vue 2 的全新升级版本,引入了诸多新的特性,并在性能、开发体验、响应式系统等多个方面进行了改进。以下是 Vue 2 和 Vue 3 的详细对比:

1. 生命周期钩子差异

Vue 3 保留了大部分 Vue 2 的生命周期钩子,但部分名称有所调整,以适应新的 API 结构。

Vue 2Vue 3
beforeCreate取消,改为 setup
created取消,改为 setup
beforeMountonBeforeMount
mountedonMounted
beforeUpdateonBeforeUpdate
updatedonUpdated
beforeDestroyonBeforeUnmount
destroyedonUnmounted

对比总结: Vue 3 中的生命周期钩子与组合式 API 更紧密集成,使用更加灵活。

2 响应式

Vue 2 依赖于 Object.defineProperty 的响应式系统在处理大量数据时有一定的性能瓶颈。

  • Vue 2 处理静态和动态模板之间没有显著优化。

Vue 2 响应式系统

  • 使用 Object.defineProperty 实现响应式。
  • 无法检测属性的添加、删除,必须使用 Vue.set()Vue.delete()
  • 数组的响应式处理存在局限,不能检测数组的直接索引赋值(如 this.items[0] = newItem),需使用数组变更方法(如 pushpop 等)。
// Vue 2 响应式无法检测到对象属性的添加
this.$set(this.someObject, 'newProperty', 'value');

Vue 3 响应式系统

  • 使用 Proxy 代替 Object.defineProperty
  • 能够自动追踪对象的添加和删除操作,也能监听数组索引的直接赋值。
  • 支持对嵌套对象的深度监听,不需要手动处理复杂的嵌套结构。
  • Vue 3 通过 Proxy 提高了响应式系统的性能,并解决了 Vue 2 的响应式系统中无法检测属性添加和数组索引赋值的问题。
const state = reactive({ count: 0 });
state.newProperty = 'value'; // 自动响应

3. Composition API(组合式 API)

Vue 2 Options API

Vue 2 中的逻辑组织方式是通过 Options API,组件的逻辑会分散在 datamethodscomputedwatch 等部分。

export default {data() {return { count: 0 };},methods: {increment() {this.count++;}}
}

Vue 3 Composition API

Vue 3 引入了 Composition API,通过 setup 函数集中管理组件的逻辑。它提供了更好的逻辑复用能力、增强了代码的可读性,特别是在复杂业务逻辑下表现得更加出色。

  • 优势:组合式 API 更适合大型项目,组件的功能可以按逻辑进行封装,避免逻辑的分散。
  • 逻辑复用:可以将通用功能封装为 composable,在多个组件间共享。
import { ref } from 'vue';export default {setup() {const count = ref(0);const increment = () => count.value++;return { count, increment };}
}

4. 性能优化

1.0 Virtual DOM 优化

  • Vue 2 的 Virtual DOM 虽然能够实现高效的 DOM diff,但在一些复杂场景下,仍然有改进空间,尤其是大型项目中。
  • Vue 3 通过 编译时的优化,更智能地分析模板并生成更轻量的渲染函数。这些优化包括静态提升、事件缓存等,减少了不必要的 DOM 更新。

对比总结: Vue 3 的 Virtual DOM 实现更智能,减少了更新成本,特别是在使用静态内容时效率更高。

5. Typescript 支持

Vue 2 对 TypeScript 的支持

Vue 2 对 TypeScript 的支持有限。虽然可以通过类组件的方式使用 TypeScript,但这在编写复杂项目时可能显得笨拙。

import Vue from 'vue';
import Component from 'vue-class-component';@Component
export default class MyComponent extends Vue {message: string = 'Hello Vue!';
}

Vue 3 对 TypeScript 的支持

Vue 3 从设计之初就考虑了对 TypeScript 的支持。组合式 API 与 TypeScript 的结合更加自然,使用 TypeScript 的类型推导可以获得更好的开发体验。

import { ref } from 'vue';export default {setup() {const count = ref<number>(0);return { count };}
}
  • Vue 3 支持更好的类型推导、类型检查,增强了 TypeScript 和 Vue 组件的集成。

6. Vue 3 新特性

5.1 Fragments

Vue 3 支持 Fragment,允许组件返回多个根节点,而不需要包裹在一个父元素中。

<template><div>Header</div><div>Content</div>
</template>

在 Vue 2 中,组件必须有一个根元素。如果需要多个元素,必须用 <div> 包裹,这会引入多余的 DOM 结构。而 Vue 3 通过 Fragment 解决了这个问题。

6.2 Teleport

Vue 3 提供了 Teleport,允许你将组件的渲染输出移动到 DOM 树的其他位置,而不受父组件的影响。常用于模态框、提示框等全局展示的内容。

<template><teleport to="body"><div class="modal">Modal Content</div></teleport>
</template>

6.3 Suspense

Vue 3 支持 Suspense,用于处理异步组件的渲染逻辑。在异步数据加载时,可以显示一个占位符,等异步数据加载完成后再显示真正的内容。

<Suspense><template #default><AsyncComponent /></template><template #fallback><div>Loading...</div></template>
</Suspense>

7. Vue 2 到 Vue 3 的迁移

迁移策略

  • Vue 3 保持了大部分 Vue 2 的向后兼容性,Vue 官方提供了 Vue 3 升级指南 以及迁移工具,帮助开发者平稳过渡。
  • 对于大型 Vue 2 项目,可以通过 兼容构建,允许在逐步迁移的过程中同时使用 Vue 2 和 Vue 3 的语法。

不兼容的更改

  • Vue 3 删除了一些不推荐的 Vue 2 API,如 $on$offkeyCode 修饰符等。

  • v-model 现在支持在多个绑定时使用不同的 propevent,而不再是固定的 valueinput

  • 在 Vue 3 中,filters 已经被移除,建议使用 computedmethods 来替代。

  • Vue 2 使用很多全局 API,例如 Vue.mixinVue.useVue.component 等。

  • Vue 3 取消了部分全局 API,将它们重构为应用实例级别的方法,以支持更好的模块化设计和多个 Vue 应用实例共存。

// Vue 2
Vue.mixin({...});
Vue.use(plugin);// Vue 3
const app = createApp(App);
app.mixin({...});
app.use(plugin);

对比总结: Vue 3 改变了全局 API 的用法,更加模块化,增强了灵活性,且支持多实例运行。

事件 API

  • Vue 2 允许组件内部通过 $on$off$emit 监听和触发事件。
  • Vue 3 移除了 $on$off$once,更推荐使用组合式 API 来处理事件逻辑,同时可以直接在 setup 中管理事件。
// Vue 2
this.$on('customEvent', handler);// Vue 3
// 推荐使用组合式 API 和 `emit`

7.2 v-model

Vue 3 的 v-model 变得更加灵活,可以自定义 propevent

<!-- Vue 2 v-model: 固定为 `value` 和 `input` -->
<Child v-model="data" /><!-- Vue 3 v-model: 可以自定义绑定字段和事件 -->
<Child v-model:title="data" />

总结

特性Vue 2Vue 3
响应式系统Object.definePropertyProxy
API 风格Options API组合式 API(更灵活,适合复用)
性能优化基础优化静态提升、缓存事件处理、异步渲染
Typescript 支持支持,但不友好原生支持,类型推导更佳
新特性Fragment、Teleport、Suspense 不支持支持 Fragment、Teleport、Suspense
迁移与兼容Vue 2 旧项目不完全支持 Vue 3 特性Vue 3 提供兼容构建和迁移工具
自定义渲染器基本支持完全支持,适合跨平台渲染

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

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

相关文章

力扣 3.无重复字符的最长子串——Java

题目要求&#xff1a; 给定一个字符串 s &#xff0c;请你找出其中不含有重复字符的 最长 子串的长度。 示例 1: 输入: s "abcabcbb" 输出: 3 解释: 因为无重复字符的最长子串是 "abc"&#xff0c;所以其长度为 3。示例 2: 输入: s "bbbbb&quo…

洛谷P3478 [POI2008] STA-Station(换根dp)

题目链接 https://www.luogu.com.cn/problem/P3478 思路 对于 n 1 e 6 n1e6 n1e6&#xff0c;我们考虑换根dp。 定义 f [ u ] f[u] f[u]表示以 u u u为根的子树中&#xff0c;所有节点的深度之和。定义 d p [ u ] dp[u] dp[u]表示整棵树以 u u u为根时&#xff0c;所有节点…

Clip模型详解

CLIP(Contrastive Language-Image Pre-training)是由OpenAI在2021年推出的一种基于对比学习的多模态预训练模型,它通过大规模的图像和文本数据进行训练,使得模型能够理解图像内容和相关文本之间的语义关系。这种模型能够同时理解文本和图像,可以看作是一个连接语言和视觉两…

制药企业MES与TMS的数据库改造如何兼顾安全与效率双提升

*本图由AI生成 在全球制造业加速数字化转型的浪潮中&#xff0c;一家来自中国的、年营业额超过200亿元的制药企业以其前瞻性的视角和果断的行动&#xff0c;成为该行业里进行国产化改造的先锋。通过实施数据库改造试点项目&#xff0c;该企业实现了其关键业务系统MES&#xff0…

python的多线程和多进程

首先需要明确的是&#xff0c;多进程和其他语言的一样&#xff0c;能够利用多核cpu&#xff0c;但是python由于GIL的存在&#xff0c;多线程在执行的时候&#xff0c;实际上&#xff0c;每一时刻只有一个线程在执行。相当于是单线程。然而多线程在某些情况下&#xff0c;还是能…

使用 python 下载 bilibili 视频

本文想要达成的目标为&#xff1a;运行 python 代码之后&#xff0c;在终端输入视频链接&#xff0c;可自动下载高清 1080P 视频并保存到相应文件夹。 具体可分为两大步&#xff1a;首先&#xff0c;使用浏览器开发者工具 F12 获取请求链接相关信息&#xff08;根据 api 接口下…

Leetcode 1514. 概率最大的路径

1.题目基本信息 1.1.题目描述 给你一个由 n 个节点&#xff08;下标从 0 开始&#xff09;组成的无向加权图&#xff0c;该图由一个描述边的列表组成&#xff0c;其中 edges[i] [a, b] 表示连接节点 a 和 b 的一条无向边&#xff0c;且该边遍历成功的概率为 succProb[i] 。 …

Python知识点:基于Python工具,如何使用Scikit-Image进行图像处理与分析

开篇&#xff0c;先说一个好消息&#xff0c;截止到2025年1月1日前&#xff0c;翻到文末找到我&#xff0c;赠送定制版的开题报告和任务书&#xff0c;先到先得&#xff01;过期不候&#xff01; 基于Python的Scikit-Image图像处理与分析指南 在Python的科学计算生态系统中&am…

3万字66道Java基础面试题总结(2024版本)

本文合计三万字&#xff0c;整合了66道当前Java面试中比较热门的面试题&#xff0c;希望对大家有所帮助。 文章目录 一、Java概念1. JDK和JRE和JVM的区别2. Java语言有哪些特点3. 什么是字节码&#xff1f;采用字节码的最大好处是什么&#xff1f;4. Oracle JDK 和 OpenJDK 的对…

【3dgs】Gaussian-SLAM发展关键历程梳理

【3dgs】Gaussian-SLAM 0. 写在前面1. 3D Splatting与SLAM流程2. Splatting SLAM&#xff1a;单目/RGB-D(2024年新作&#xff09;2.1 相机跟踪精度2.2 新视图渲染性能2.3 消融实验 3. Gaussian-SLAM&#xff08;Photo-SLAM&#xff09; Photo-SLAM技术原理详解 ORBSLAM3dGS&am…

OKG Research:如何衡量链上数据的开放价值?

在新加坡Token2049期间&#xff0c;欧科云链研究院受邀参加Bloomberg主办的企业另类资产投资峰会2024&#xff0c;与多位专家围绕未来数据形态与前景进行了深入交流。 活动后&#xff0c;欧科云链研究院负责人Lola Wang与资深研究员Jason Jiang在大公网发表署名文章《如何衡量…

faust,一个神奇的 Python 库!

大家好&#xff0c;今天为大家分享一个神奇的 Python 库 - faust。 Github地址&#xff1a;https://github.com/robinhood/faust 在分布式系统和实时数据处理的世界里&#xff0c;消息流处理&#xff08;Stream Processing&#xff09;变得越来越重要。Faust 是一个 Python 库…

【工具变量】上市公司企业广告支出数据(2007-2023年)

一、测算方式&#xff1a;具体而言&#xff0c;参照 Lu 等&#xff08;2022&#xff09;的研究&#xff0c;本文通过上市公司财务报表附注获取每家上市公司每年销售费用明细项目&#xff0c;筛选出广告费、广告宣传费、广告推广费、广告策划费、广告展览费等与广告支出相关的项…

Python入门笔记(二)

文章目录 第六章 列表list6.1 创建列表&#xff1a;[]、list()、列表生成式6.2 索引访问元素、元素返回索引index()6.3 列表增加元素:append()、extend()、insert()6.4 列表删除元素&#xff1a;remove()、del()、pop()、clear()6.5 列表修改元素6.6 排序&#xff1a;.sort()、…

防火墙的三种工作模式:路由模式、透明模式(网桥)、混合模式

防火墙作为网络安全的核心设备之一&#xff0c;扮演着至关重要的角色。它不仅能够有效防御外部网络的攻击&#xff0c;还能保护内部网络的安全。在如今复杂多样的网络环境下&#xff0c;防火墙的部署和工作模式直接影响着网络安全策略的实施效果。防火墙通常可以工作在三种模式…

自定义函数查看OS的file cache

简介 在OS中使用cache机制&#xff0c;主要为了提高磁盘的读取效率&#xff0c;避免高频的IO交换。将频繁访问的数据存放在file cache中&#xff0c;下一次在获取的时候就可以直接读取&#xff0c;缓存高命中率对于数据高速检索十分有利。 smem smem 是一个可以显示 Linux 系…

Spring Boot比Spring多哪些注解

Spring Boot相对于Spring框架而言&#xff0c;引入了一些特有的注解来简化配置、自动装配组件和实现声明式服务。以下是一些Spring Boot相对于Spring框架特有的主要注解&#xff1a; SpringBootApplication&#xff1a; 作用&#xff1a;标注一个主程序类&#xff0c;表明这是一…

前端怎么实现电子签名

电子签名&#xff08;e-signature&#xff09;作为一种数字化的签署方式&#xff0c;广泛应用于合同、协议等文件的确认中。随着科技的发展&#xff0c;前端技术也为电子签名的实现提供了便利。本文将探讨在前端如何实现电子签名&#xff0c;包括技术选型、实现步骤及注意事项。…

【即见未来,为何不拜】聊聊分布式系统中的故障监测机制——Phi Accrual failure detector

前言 昨天在看tcp拥塞控制中的BBR(Bottleneck Bandwidth and Round-trip propagation time)算法时&#xff0c;发现了这一特点&#xff1a; 在BBR以前的拥塞控制算法中(如Reno、Cubic、Vegas)&#xff0c;都依赖于丢包事件的发生&#xff0c;在高并发时则会看到网络波动的现象…

uni-app使用v-show编译成微信小程序的问题

问题 在uni-app使用v-show语法编译成微信小程序会有一个问题 当我们设置成v-show"false" 在Hbuilder X里面确实没有显示 然后运行到 微信开发程序里面 发现显示了出来&#xff0c;说明设置的 v-show"false"没有起作用 解决办法 首先去uniapp官网查看v…