Vue 2 与 Vue 3 的全面比较

Vue 2 与 Vue 3 的全面比较

1. 性能提升

Vue 3 的性能得到了显著提升。虚拟 DOM 已经重写,使补丁过程更快。

对比:

Vue 3 使用了基于 Proxy 的新观察者机制,取代了 Vue 2 的基于 Object.defineProperty 的观察者。

  • Object.defineProperty:
const data = {};
Object.defineProperty(data, 'property1', {value: 42,writable: false
});
  • Proxy:
const data = {a: 1};
const proxy = new Proxy(data, {get(target, prop) {return target[prop];},set(target, prop, value) {target[prop] = value;console.log('property set');return true;}
});

为何 Proxy 的性能更好?

  1. 响应性机制Object.defineProperty 需要递归地遍历一个对象的所有属性并为其定义 getter 和 setter,这在大型对象上可能非常缓慢。相反,Proxy 可以拦截整个对象,而无需逐个处理属性。
  2. 数组问题:Vue 2 在处理数组时遇到了一些问题。为了检测到数组的变化,Vue 2 必须覆盖数组的原型方法(如 push、pop 等),这是一个复杂且可能产生错误的过程。使用 Proxy,Vue 3 可以更简单、更直接地拦截数组的变化。
  3. 精细的变更检测:使用 Proxy,Vue 3 可以更精确地检测对象的变化。例如,当您添加或删除属性时,Proxy 可以立即捕获这些变化,而 Object.defineProperty 则无法捕获这类变化。
  4. 未来的优化:由于 Proxy 是 ECMAScript 的一个标准特性,未来的 JavaScript 引擎可能会为其提供更多的优化,从而进一步提高性能。

2. 组合式 API

Vue 3 引入了组合式 API,这是一套全新的、可选的、基于函数的 API。

代码示例:

Vue 2:

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

Vue 3:

<script>
import { ref } from 'vue';export default {setup() {const count = ref(0);function increment() {count.value++;}return {count,increment};}
}
</script>

3. 按需 Tree Shaking

Vue 3 的大部分核心功能都是基于 Tree shaking 的,这意味着只有你使用的部分才会被打包进最终的代码。

结果:

得到一个更小的打包大小。

4. 更多的内置组件

Vue 3 提供了更多的内置组件,如 <Suspense><Teleport>

使用:

  • <Suspense>:
<Suspense><template #default><AsyncComponent /></template><template #fallback><div>Loading...</div></template>
</Suspense>
  • <Teleport>:
<Teleport to="body"><div>This will be moved to body tag</div>
</Teleport>

5. 更好的 TypeScript 支持

Vue 3 的源代码完全是用 TypeScript 编写的,这意味着它提供了更好的 TS 支持。

6. 新的自定义事件 API

Vue 3 提供了一个更好、更简洁的 API 来处理组件的自定义事件。

代码示例:

Vue 2:

this.$emit('event-name', payload);

Vue 3:

const emit = ctx.emit;
emit('event-name', payload);

7. 多个根节点

在 Vue 3 中,单文件组件可以有多个根节点。

代码示例:

Vue 2:

<template><div><span>Item 1</span><span>Item 2</span></div>
</template>

Vue 3:

<template><span>Item 1</span><span>Item 2</span>
</template>

8. 更好的默认插槽 API

Vue 3 中的默认插槽的 API 也得到了改进。

使用:

更简洁,更直观。

9. 移除了过滤器

Vue 3 完全移除了过滤器,推荐使用计算属性或方法代替。

代码示例:

Vue 2:

<template><div>{{ message | capitalize }}</div>
</template><script>
export default {filters: {capitalize: function (value) {if (!value) return '';value = value.toString();return value.charAt(0).toUpperCase() + value.slice(1);}}
}
</script>

Vue 3:

<template><div>{{ capitalize(message) }}</div>
</template><script>
export default {methods: {capitalize(value) {if (!value) return '';value = value.toString();return value.charAt(0).toUpperCase() + value.slice(1);}}
}
</script>

10. Portal、Fragments、Suspense 等新特性

Vue 3 还引入了一些其他的新特性和改进。

例如:

  • Fragments: 允许模板有多个根节点。
  • Suspense: 为异步组件提供了内置支持。

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

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

相关文章

Python-OpenCV中的图像处理-直方图

Python-OpenCV中的图像处理-直方图 直方图统计直方图绘制直方图Matplotlib绘制灰度直方图Matplotlib绘制RGB直方图 使用掩膜统计直方图直方图均衡化Numpy图像直方图均衡化OpenCV中的直方图均衡化CLAHE 有限对比适应性直方图均衡化 2D直方图OpenCV中的2D直方图Numpy中2D直方图 直…

VSCode使用CMake断点调试

在 VS Code 中使用 CMake 进行断点运行调试&#xff0c;需要进行以下步骤&#xff1a; 确保已在系统中安装了 CMake 和调试器&#xff08;如 GDB&#xff09;。 在项目根目录下创建一个名为 .vscode 的文件夹。 在项目根目录下创建一个名为 build 的文件夹&#xff0c;并在终…

flink读取kafka数据存储iceberg

1、说明 使用flink实时的读取kafka的数据&#xff0c;并且实时的存储到iceberg中。好处是可以一边存数据&#xff0c;一边查询数据。当然使用clickhouse也可以实现数据的既存既取。而hive数据既存既读则会有问题。iceberg中数据读写数据都是从快照中开始的&#xff0c;读和写对…

Tensorrt导出engine文件加密(WindowsC++版)

扯皮的话:为了优化模型的inference,TensorRT会根据网络的定义执行优化包括特定平台的优化并生成inference engine。此过程被称为构建阶段,尤其是在嵌入式平台上会消耗大量的时间,因此,一个典型的应用程序只会被构建一次engine,然后将其序列化为plane file以供后续使用。需…

使用 ESP32 Arduino 和机器学习实现WIFI室内定位

在这个 Arduino 机器学习项目中,我们将使用附近的 WiFi 接入点来定位我们所在的位置。为了使该项目正常运行,您需要一块配备 WiFi 的板,例如 ESP8266、ESP32 或 MKR WiFI 1010。 什么是室内定位? 我们都习惯了 GPS 定位,我们的设备将使用卫星来跟踪我们在地球上的位置。GP…

数学建模—分类模型

本讲将介绍分类模型。对于而分类模型&#xff0c;我们将介绍逻辑回归&#xff08;logistic regression&#xff09;和Fisher线性判别分析两种分类算法&#xff1b;对于多分类模型&#xff0c;我们将简单介绍Spss中的多分类线性判别分析和多分类逻辑回归的操作步骤下。 本题按水…

PostgreSQL jsonb

PostgreSQL jsonb jsonb 函数以及操作符 在PostgreSQL中&#xff0c;有许多用于处理JSONB数据类型的内置函数和操作符。下面列出了一些常用的JSONB函数和操作符&#xff1a; jsonb_pretty(jsonb) 该函数将JSONB数据格式化为易读的多行字符串。jsonb_typeof(jsonb) 该函数返回…

什么是DDL、MDL?

DDL和MDL是与数据库相关的术语&#xff0c;它们有一些不同的含义。 DDL&#xff08;Data Definition Language&#xff0c;数据定义语言&#xff09;&#xff1a; DDL用于定义和管理数据库中的对象&#xff0c;如表、索引、视图等。它包含用于创建、修改、删除和管理数据库对象…

Paddle OCR V4 测试Demo

效果 项目 VS2022.net4.8OCRV4 代码 using OpenCvSharp; using Sdcb.PaddleInference; using Sdcb.PaddleOCR; using Sdcb.PaddleOCR.Models; using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; using System.Drawing; usin…

Springboot开发常用注解

文章目录 1.RestController2.Data3.RequestMapping4.Builder 1.RestController RestController注解其实就是将 return 中的内容以 JSON字符串的形式返回客户端 controller的详解 2.Data Data详解 3.RequestMapping RequestMapping 4.Builder Builder

【Wamp】安装 | 局域网内设备访问

安装教程&#xff1a; https://wampserver.site/article/1.html 下载 https://www.wampserver.com/en/ 安装路径上不能有中文 安装好之后图标呈绿色 放入网页文件 将网页文件放置于wamp文件夹的www子文件夹 例如&#xff1a;\Wamp\program\www 修改http端口 WAMP服务器…

编写简单的.gitlab-ci.yml打包部署项目

服务器说明&#xff1a; 192.168.192.120&#xff1a;项目服务器 192.168.192.121&#xff1a;GitLab 为了可以使用gitlab的cicd功能&#xff0c;我们需要先安装GitLab Runner 安装GitLab Runner参考&#xff1a; GitLab实现CICD自动化部署_gitlab cidi_程序员xiaoQ的博客-CS…

【MFC】05.MFC六大机制:程序启动机制-笔记

MFC程序开发所谓是非常简单&#xff0c;但是对于我们逆向人员来说&#xff0c;如果想要逆向MFC程序&#xff0c;那么我们就必须了解它背后的机制&#xff0c;这样我们才能够清晰地逆向出MFC程序&#xff0c;今天这篇文章就来带领大家了解MFC的第一大机制&#xff1a;程序启动机…

AI:02-基于深度学习的动物图像检索算法的研究

文章目录 一、算法原理二、代码实现三、实验结果四、总结深度学习在计算机视觉领域中的应用越来越广泛,其中动物图像检索算法是一个重要的应用场景。本文将介绍一种基于深度学习的动物图像检索算法,并提供相应的代码实现。 一、算法原理 本算法采用卷积神经网络(Convolutio…

Sqlite3简介

SQLite3 简介 SQLite3 是一种轻量级的嵌入式数据库引擎&#xff0c;被广泛应用于各种应用程序中&#xff0c;包括移动设备、桌面应用程序和嵌入式系统。它以其简单、高效和零配置的特点而受到开发者的喜爱。 以下是 SQLite3 的一些重要特点&#xff1a; 嵌入式数据库引擎&…

前端项目打包报错JavaScript heap out of memory(js堆内存不足)

项目打包出现类似以下报错 <--- JS stacktrace --->FATAL ERROR: Reached heap limit Allocation failed - JavaScript heap out of memory1: 00007FF646E9B1EF v8::internal::CodeObjectRegistry::~CodeObjectRegistry1235992: 00007FF646E28BA6 v8::internal::Microta…

数据安全加固:深入解析滴滴ES安全认证技术方案

前文分别介绍了滴滴自研的ES强一致性多活是如何实现的、以及如何提升ES的性能潜力。由于ES具有强大的搜索和分析功能&#xff0c;同时也因其开源和易于使用而成为黑客攻击的目标。近些年&#xff0c;业界ES数据泄露事件频发, 以下是一些比较严重的数据泄露案件&#xff1a; 202…

Golang函数以及函数和方法的区别

在接触到go之前&#xff0c;我认为函数和方法只是同一个东西的两个名字而已&#xff08;在我熟悉的c/c&#xff0c;python&#xff0c;java中没有明显的区别&#xff09;&#xff0c;但是在golang中者完全是两个不同的东西。官方的解释是&#xff0c;方法是包含了接收者的函数。…

基于Dlib库+SVM+Tensorflow+PyQT5智能面相分析-机器学习算法应用(含全部工程源码)+训练及测试数据集

目录 前言总体设计系统整体结构图系统流程图模型流程 运行环境Python 环境TensorFlow环境界面编程环境 模块实现1. 数据预处理2. 模型构建1&#xff09;定义模型结构2&#xff09;交叉验证模型优化 3. 模型训练及保存4. 模型测试1&#xff09;摄像头调用2&#xff09;模型导入及…

题解 | #A.Alive Fossils# 2023牛客暑期多校8

A.Alive Fossils 签到 题目大意 给定 n n n 个字符串集&#xff0c;求它们的交集&#xff0c;按字典序输出 解题思路 逐一处理字符串集&#xff0c;开个 map 记录此前的交集&#xff0c;从当前集合中选走元素即可 时间复杂度 O ( n ) O(n) O(n) 参考代码 参考代码为已A…