vue3和vue2区别

响应式区别

在 Vue 2 中,使用了 Object.defineProperty 来实现数据的响应式。它通过逐个定义对象属性的方式来进行数据的劫持和监听。这种方式存在一些限制,例如无法监听新增的属性,需要使用 Vue 提供的 $set 方法来实现响应式。此外,由于需要逐个定义属性,对于大型对象或数组的性能不够理想。

而在 Vue 3 中,使用了 Proxy 来实现响应式系统。Proxy 是 ES6 提供的一种代理机制,可以拦截对象的操作。Vue 3 使用 Proxy 来创建一个中间代理,该代理会拦截对数据的访问和修改,并触发相应的响应。相较于 Vue 2 的 Object.defineProperty,Proxy 提供了更强大的功能和性能优势。

使用 Proxy 实现的响应式系统具有以下优势:

  1. 可以监听新增和删除的属性:Proxy 可以监听对象的整个访问和修改过程,包括属性的新增和删除。这意味着无需特殊处理,即可实现对新增属性的监听。
  2. 性能更好:Proxy 的实现方式比 Object.defineProperty 更高效。它可以一次性拦截整个对象或数组,而不需要逐个定义属性,因此在处理大型对象或数组时具有更好的性能。
  3. 扩展性更好:Proxy 提供了丰富的拦截器方法,可以拦截对象的各种操作,例如读取属性、修改属性、删除属性等。这使得开发者可以根据需求自定义拦截器的行为,实现更高级的功能。

总结来说,Vue 3 使用 Proxy 来实现响应式系统,相较于 Vue 2 的 Object.defineProperty,具有更好的性能和扩展性,并且可以监听新增和删除的属性。这些改进使得 Vue 3 的响应式系统更加强大和灵活。

例子:

假设我们有一个 Vue.js 2 的响应式对象 data,它包含了两个属性 name 和 age

const data = {name: 'John',age: 25
}

在 Vue.js 2 中,如果我们将 data 对象传递给 Vue 实例进行响应式处理,Vue.js 会使用 Object.defineProperty 来劫持这两个属性的变化。

new Vue({data: data
})

现在,如果我们在运行时向 data 对象中添加一个新的属性 gender,Vue.js 2 将无法自动追踪和响应这个新增属性的变化。

data.gender = 'Male'

这是因为在初始化阶段,Vue.js 2 已经使用 Object.defineProperty 对 data 对象的 name 和 age 属性进行了劫持和监听,但它无法感知到后续的属性变化。

所以,当我们在运行时向 data 对象添加新的属性 gender 时,Vue.js 2 是无法自动将其变为响应式的,也无法触发相应的更新操作。

这就是为什么 Vue.js 2 无法监听新增属性的原因。它的响应式系统是在初始化阶段对属性进行劫持和监听的,而无法动态地追踪和响应后续的属性变化。这也是 Vue.js 3 引入 Proxy 对象的一个重要改进,它可以监听新增和删除的属性,提供了更强大和灵活的响应式能力。

组件实例

Vue 3 引入了组合式 API(setup),与 Vue 2 的选项式 API(各种生命周期data啥的) 相比,有以下几个主要区别:

1. 组合式 API 的灵活性:组合式 API 允许开发者根据逻辑相关性来组织代码,而不是按照选项的方式将代码分散在不同的选项中。这样可以更好地组织和重用代码,使得代码更加可读和可维护。

2. 组合式 API 的逻辑复用:组合式 API 提供了一种更好的逻辑复用方式,通过自定义组合函数,可以将逻辑相关的代码封装为一个可复用的组合函数,并在多个组件中进行复用。这使得代码的复用性更高,减少了重复编写相似逻辑的工作。

3. 组合式 API 的类型推导:Vue 3 的组合式 API 借助 TypeScript 的类型推导能力,提供了更好的类型支持。开发者可以在组合函数中明确指定参数和返回值的类型,提供更好的代码提示和类型检查。

4. 组合式 API 的逻辑封装:组合式 API 允许将逻辑封装在组合函数中,使得组件的代码更加简洁和聚焦。开发者可以将复杂的逻辑拆分成多个组合函数,每个组合函数负责不同的功能,从而提高代码的可读性和可维护性。

总的来说,组合式 API 提供了更灵活、可复用和可维护的方式来组织和编写代码。它使得开发者能够更好地组织逻辑、复用代码,并且提供了更好的类型支持。这些改进使得 Vue 3 的组合式 API 更适合开发大型复杂应用,并且提供了更好的开发体验。

生命周期


vue2:

beforeCreate:在实例初始化之后、数据观测 (data observer) 和事件配置之前被调用。

created:在实例创建完成后被调用,这时候实例已经完成了数据观测、属性和方法的运算,但是尚未挂载到 DOM 上。

beforeMount:在挂载开始之前被调用,相关的 render 函数首次被调用。

mounted:在挂载完成后被调用,此时组件已经被放入 DOM 中。

beforeUpdate:在组件更新之前被调用,发生在重新渲染之前。

updated:在组件更新之后被调用,发生在重新渲染之后。

beforeDestroy:在实例销毁之前调用。在这一步,实例仍然完全可用。

destroyed:在实例销毁之后调用。此时,所有的指令都已解绑,所有的事件监听器都已移除。

vue3:

因为引入了组合式API,将组件逻辑转移到了setup函数中,setup函数就替代了beforeCreate和created勾子函数

onBeforeMount:在挂载之前执行的钩子函数。

onMounted:在组件挂载到 DOM 后执行的钩子函数。

onBeforeUpdate:在组件更新之前执行的钩子函数。

onUpdated:在组件更新后执行的钩子函数。

onBeforeUnmount:在组件卸载之前执行的钩子函数。

onUnmounted:在组件卸载后执行的钩子函数。
 

总结

  1. 响应式系统的性能优化:Vue 3 使用 Proxy 替代了 Vue 2 中的 Object.defineProperty,这使得响应式系统在性能上有所提升。Proxy 的实现方式更高效,可以一次性拦截整个对象或数组,而不需要逐个定义属性,从而提高了大型对象或数组的性能。

  2. 虚拟 DOM 的优化:Vue 3 在虚拟 DOM 的实现上进行了一些优化。它引入了静态树提升 (Static Tree Hoisting) 技术,可以在编译阶段检测到静态节点并将其提升为常量,减少了运行时的虚拟 DOM 操作,提高了渲染性能。

  3. 编译器的优化:Vue 3 的编译器进行了一些优化,生成的代码更加紧凑和高效。编译器在编译时会对模板进行静态分析,并生成更优化的渲染函数,减少了运行时的开销。

  4. Tree-shaking 支持:Vue 3 的模块系统使用了 ES Module 的语法,使得现代的打包工具可以更好地进行 Tree-shaking,只打包使用到的组件和功能,减少了打包体积。

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

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

相关文章

使用composer生成的DMG和PKG格式软件包有何区别

在使用Composer从包源构建软件包时候,有两种不同类型的包:PKG和DMG。你知道两者之间的区别吗? 以及如何选取吗? 每种格式都有各自的优势具体取决于软件包的预期用途以及用于部署软件包的工具。下面我们来了解一下PKG和DMG格式的区别和用途。…

STM32面试体验和题目

目录 一、说一下你之前的工作主要干了什么? 二、stm32有关的知识点 1.stm32的外设有哪一些 2.你的毕业论文的项目里面是怎么设计的 三,C语言的考察 1.写一个结构体(结构体的内容自由发挥) 2.写一个指针型的变量 3.结构体是…

C语言经典算法之快速排序算法

目录 前言 1. 快速排序简介 2. 快速排序的基本原理 2.1 选择基准元素 2.2 分割操作 2.3 递归排序 3. C语言中的快速排序实现 4. 总结 前言 快速排序算法可以分为两部分来看: 第一部分:将枢轴元素移动到最终位置 第二部分:分别处理枢轴…

Python密码本连接wifi

有时候我们会忘记自己的Wi-Fi密码,或者需要连接某个Wi-Fi网络以满足合法需求。本文将介绍如何使用Python编程语言编写一个简单的连接Wi-Fi的程序。 一、密码本准备 在进行wifi猜测时,其实就是列出各种可能的密码,用来尝试去访问目标wifi&…

Vue + JS + tauri 开发一个简单的PC端桌面应用程序

Vue JS tauri 开发一个简单的PC端桌面应用程序 文章目录 Vue JS tauri 开发一个简单的PC端桌面应用程序1. 环境准备1.1 安装 Microsoft Visual Studio C 生成工具[^2]1.2 安装 Rust[^3] 2. 使用 vite 打包工具创建一个 vue 应用2.1 使用Vite创建前端Vue项目2.2 更改Vite打包…

计算机毕业设计 基于Java的美食信息推荐系统的设计与实现 Java实战项目 附源码+文档+视频讲解

博主介绍:✌从事软件开发10年之余,专注于Java技术领域、Python人工智能及数据挖掘、小程序项目开发和Android项目开发等。CSDN、掘金、华为云、InfoQ、阿里云等平台优质作者✌ 🍅文末获取源码联系🍅 👇🏻 精…

vi/vim 编辑器 --基本命令

1 vi/vim编辑器介绍 vi 是visual interface 的简称,是Linux中最经典的文本编辑器 vim是vi的加强版。兼容了vi的所有指令,不仅能编辑文本,而且具有shell程序编辑的功能,可以通过不同颜色的字体辨别语法的正确性,极大…

轻松识别Midjourney等AI生成图片,开源GenImage

AIGC时代,人人都可以使用Midjourney、Stable Diffusion等AI产品生成高质量图片,其逼真程度肉眼难以区分真假。这种虚假照片有时会对社会产生不良影响,例如,生成公众人物不雅图片用于散播谣言;合成虚假图片用于金融欺诈…

支持华为GaussDB数据库的免费开源ERP:人力资源管理解决方案概述

开源智造所推出的Odoo SuperPeople数字化解决方案将HR和薪资数据与财务、项目规划、预算和采购流程连接起来,消除了多套系统给企业带来的信息孤岛问题。 ——复星集团 人力资源中心 高经理 一种更具吸引力、更有洞察力的人员管理方式 什么是开源智造Odoo的人力资源…

【Vue】后端返回文件流,前端预览文件

let date;request({url: this.$route.query.url,method: get,responseType: blob,}).then(resp > {date respthis.path window.URL.createObjectURL(new Blob([resp], {type: "application/pdf"}))}).catch((e) > {//旧版本浏览器下的blob创建对象window.Blo…

centos系统设置runlevel为5

在 CentOS 系统中,可以使用以下步骤将运行级别(runlevel)设置为 5: 1. 打开终端或 SSH 连接到 CentOS 服务器。 2. 以 root 用户身份登录。 3. 运行以下命令来编辑 /etc/inittab 文件: shell sudo vi /etc/inittab…

中产医学产康AI智慧云发布会暨中产学院2024年度盛典圆满成功

【向光而行】中国医学产康AI智慧云服务平台发布会暨中产学院2024年度盛典 前言 开新局,迈新步,谋新篇,创新绩。中产医学产康AI智慧云服务平台发布会 暨中产学院2024年度盛典于2024年1月10日在郑州.涵唐酒店成功举办。本次年会以“【向光而行…

跟着cherno手搓游戏引擎【7】Input轮询

在引擎程序中任何时间,任何位置都能知道按键是否按下、鼠标的位置等等信息。 与事件系统的区别:事件系统是在按下时调用并传递按键状态;轮询是每时每刻都能获取按键状态 创建基类: YOTO/Input.h:名如其意 #pragma …

php反序列化之pop链构造(基于重庆橙子科技靶场)

常见魔术方法的触发 __construct() //创建类对象时调用 __destruct() //对象被销毁时触发 __call() //在对象中调用不可访问的方法时触发 __callStatic() //在静态方式中调用不可访问的方法时触发 __get() //调用类中不存在变量时触发(找有连续箭头的…

wins安装paddle框架

一、安装 https://www.paddlepaddle.org.cn/install/quick?docurl/documentation/docs/zh/install/pip/windows-pip.html 装包(python 的版本是否满足要求: 3.8/3.9/3.10/3.11/3.12, pip 版本为 20.2.2 或更高版本 ) CPU 版:…

Springboot项目:解决@Async注解获取不到上下文信息问题

问题描述 springboot项目中,需要使用到异步调用某个方法,此时 第一个想到的就是 Async 注解,但是 发现 方法执行报错了,具体报错如下: java.lang.NullPointerExceptionat com.ruoyi.common.utils.ServletUtils.getRe…

用VSCode玩STM32的烧录工具 CooCox Cortex Flash Programmer

一、下载软件 经热心兄弟推荐的版本,不知道有没有版权,如有版权问题,请通知删除。 CSDN - 0积分下载:https://download.csdn.net/download/qq_49053936/88744187 二、生成bin文件 插件不同,方法有所不同,各…

《C++大学教程》3.11修改GradeBook类

按如下要求修改GradeBook类: a)包括第二个 string 数据成员,它表示授课教师的名字。 b)提供一个可以改变教师姓名的设置函数,以及一个可以得到该名字的获取函数。 c)修改构造函数,它指定了两个形参,一个针对课程名称,另…

编写RedisUtil来操作Redis

目录 ​编辑 Redis中文网 第一步:建springboot项目 第二步:导依赖 第三步:启动类 第四步:yml 第五步:Redis配置类 第六步:测试类 第七步:编写工具类 RedisUtil 第八步:编写…

Python 面向对象之继承

目录 概述 继承的作用 缺点 单继承实现 设置person类 创建子类学生类 实例化student类 创建worker子类 实例化worker类 子类独有属性 父类私有属性 子类构造函数修改 实例化子类 多继承实现 创建基类 创建父亲类 创建母亲类 创建子类 引入基类 创建子类并继…