Vue3_2024_1天【Vue3创建和响应式,对比Vue2】

前言:

Vue3对比Vue2版本,它在性能、功能、易用性和可维护性方面都有显著的提升和改进。
性能优化:模板编译器的优化、对Proxy的支持以及使用了更加高效的Virtual DOM算法等。这使得Vue3的打包大小减少了41%,初次渲染提速55%,更新渲染提速133%,内存减少54%,比Vue2更快将近两倍。
源码升级:Vue3使用Proxy代替defineProperty实现响应式,重写了虚拟DOM的实现和采用了Tree-Shaking技术,从而帮助减小了包的大小。
更好的TypeScript支持:Vue3提供了更好的TypeScript支持,包括类型定义文件,以帮助开发者在编码过程中更好地进行类型检查。
新的API和特性:Vue3引入了Composition API(组合式API),这是一种新的API风格,使开发者更容易组织和重用组件逻辑。此外,Vue3还提供了新的内置组件,如Fragment、Teleport和Suspense,以及新的生命周期钩子、data选项应始终被声明为一个函数、移除keyCode支持作为v-on的修饰符等。

一. Vue3创建项目主要有两种方式如下,(VUe2一般使用脚手架创建项目)

1.1 使用Vue CLI创建项目:(不推荐)

  1. 首先,确保你的@vue/cli版本在4.5.0以上。你可以通过运行vue --version来检查版本。如果版本过低,可以通过运行npm install -g @vue/cli来更新Vue CLI。
  2. 使用vue create 项目名称命令来创建一个新的Vue 3项目。例如,vue create my-vue3-app。
  3. 在创建项目的过程中,你将看到一个选项列表,其中包括一些预设的配置选项,如Babel、Router、Vuex、CSS预处理器和Lint/Formatter等。根据你的需求选择这些选项。
  4. 创建项目后,进入项目目录并运行npm run serve来启动你的Vue 3应用。

1.2 使用Vite创建项目:(推荐)

  1. 首先,安装Vite。你可以通过运行npm install -g create-vite-app来全局安装Vite。
  2. 使用create-vite-app 项目名称命令来创建一个新的Vue 3项目。例如,create-vite-app my-vue3-app。
  3. 进入项目目录并运行npm install来安装项目依赖。
  4. 最后,运行npm run dev来启动你的Vue 3应用。
    在这里插入图片描述

需要注意的是,Vite不基于webpack,因此它的构建速度更快(先启动在加载解析或处理,反之webpack需要加载所有文件处理解析完毕后才启动,所以启动速度要慢),体积更小。但是,Vite目前仅支持Vue 3.x,不支持Vue 2.x,并且目前还不是很稳定,正在完善中。因此,在选择使用哪种方式创建Vue 3项目时,你需要根据你的需求和实际情况来做出决定。

二、Vue2配置式api(选项式api)与 Vue3组合式api

vue2配置api(选项api)
默认data里面定义的属性自带响应式效果(数据代理和数据劫持),vue2的特点:属性、方法、监听器都各司其职,分工比较明确;这样如果代码量大导致需要滚动代码看很累,不好维护;

vue3组合式api 【setup语法糖-ref和reactive】
* setup可作为一个函数方法,与vue2中的method、watch等同级定义,一起使用(注意:这属于在vue2中使用vue3,不建议混合写法,但是必须知道,万一后期公司有前人代码混合写,我们便于维护修改;)这种使用的不便之处,作为方法里面定义的属性或方法,需要最后return出去,外面才能使用,那么一旦单页面业务逻辑稍微复杂,变量和方法要一个一个的返回很不方便,容易遗漏或不必要方法也放上去了;
*直接将setup放到一个新的script标签上,这称作Vue3setup的语法糖(语法糖-顾名思义就是将代码可以简便),在script标签里面,仍旧使用和第一种里面一样的方式定义属性或方法,而最后不需要我们手动将其返回出去,这个动作语法糖帮我们做了,

   在vue2中,我们说过data里面的数据,由数据代理和数据劫持实现响应式,而vue3中实现响应式,需要我们使用ref或reaction包裹需要的赋值,例如:let a=ref( 'zhong' );  let b=reaction({name:'zzw',age:'18'});     说明:ref可以用于基本数据类型和对象数据类型(若用于对象类型,此时它的底层还是reaction帮忙做的) 、reaction只能用于对象数据类型(并且深层次的对象也能监听对象的响应-|对象里嵌套多套对象|)

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

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

相关文章

k8s 集群调度,标签,亲和性和反亲和性,污点和容忍,pod启动状态 排错详解

目录 pod启动创建过程 kubelet持续监听的原因 调度概念 调度约束 调度过程 优点 原理 优先级选项 示例 指定调度节点 标签基本操作 获取标签帮助 添加标签(Add Labels): 更新标签(Update Labels) 删除标…

练习 1 Web EasySQL极客大挑战

CTF Week 1 EasySQL极客大挑战 BUUCTF 典中典复习 Web SQL 先尝试输入,找一找交互页面 check.php 尝试万能语句 a’ or true SQL注入:#和–的作用 get传参只能是url编码,注意修改编码,输入的字符串要改成url格式。 POST请求和…

从基础到高级:Go 语言中 Base32 编码的全面指南

从基础到高级:Go 语言中 Base32 编码的全面指南 引言基础知识base32 编码简介为什么选择 base32 encoding/base32 包概览包的结构和主要类型基本概念 实战教程开始使用 encoding/base32设置开发环境基本的 base32 编码示例解码示例 深入编码细节使用不同的编码表 错…

【Spring云原生】Spring官宣,干掉原生JVM,推出 Spring Native!整体提升性能!Native镜像技术在Spring中的应用

🎉🎉欢迎光临🎉🎉 🏅我是苏泽,一位对技术充满热情的探索者和分享者。🚀🚀 🌟特别推荐给大家我的最新专栏《Spring 狂野之旅:从入门到入魔》 🚀 本…

大模型之SORA技术学习

文章目录 sora的技术原理文字生成视频过程sora的技术优势量大质优的视频预训练库算力多,采样步骤多,更精细。GPT解释力更强,提示词(Prompt)表现更好 使用场景参考 Sora改变AI认知方式,开启走向【世界模拟器】的史诗级的…

Redis在中国火爆,为何MongoDB更受欢迎国外?

一、概念 Redis Redis(Remote Dictionary Server)是一个使用ANSI C编写的开源、支持网络、基于内存、分布式、可选持久性的键值对存储数据库。Redis是由Salvatore Sanfilippo于2009年启动开发的,首个版本于同年5月发布。 MongoDB MongoDB…

亿道信息发布两款升级款全加固笔记本电脑

2022年5月19日,加固手持终端。加固平板电脑、加固笔记本电脑专业设计商和制造商,以及加固型移动计算机软硬件整体定制解决方案提供商亿道信息,宣布对其两款广受欢迎的加固笔记本电脑产品EM-X14U和EM-X15U进行重大升级。新发布的两款升级款全加…

One Line of Code to Say Goodbye to Confusing Python Error Messages

该图片由15548337在Pixabay上发布 告别令人困惑的 Python 错误消息 灵活的错误消息增强库 — PrettyError 编程是一项活动,我们可能会用 20% 的时间将想法写成代码,然后用 80% 的时间清除错误并修复错误。错误消息绝对是我们每天都会看到的。但是&…

浅谈XSS简单漏洞xss-labs-master(初级)

一、环境以及xss漏洞简介 网上很多gethub自己下就行 XSS简介: 当用户访问被XSS注入的网页,XSS代码就会被提取出来。用户浏览器就会解析这段XSS代码,也就是说用户被攻击了。 用户最简单的动作就是使用浏览器上网,并且浏览器中有J…

案例介绍:汽车售后服务网络构建与信息抽取技术应用(开源)

一、引言 在当今竞争激烈的汽车行业中,售后服务的质量已成为品牌成功的关键因素之一。作为一位经验丰富的项目经理,我曾参与构建一个全面的汽车售后服务网络,旨在为客户提供无缝的维修、保养和配件更换服务。这个项目的核心目标是通过高效的…

自动化测试介绍、selenium用法(自动化测试框架+爬虫可用)

文章目录 一、自动化测试1、什么是自动化测试?2、手工测试 vs 自动化测试3、自动化测试常见误区4、自动化测试的优劣5、自动化测试分层6、什么项目适合自动化测试 二、Selenuim1、小例子2、用法3、页面操作获取输入内容模拟点击清空文本元素拖拽frame切换窗口切换/标…

统信UOS及麒麟KYLINOS操作系统上如何切换键盘布局

原文链接:如何切换键盘布局 | 统信UOS | 麒麟KYLINOS Hello,大家好啊,最近有朋友在群里提到他的键盘输入“Y”会显示“Z”,输入“Z”会显示“Y”。这个问题听起来可能有些奇怪,但其实并不罕见。出现这种情况的原因&…

SpringMVC总结

SpringMVC SpringMVC是隶属于Spring框架的一部分,主要是用来进行Web开发,是对Servlet进行了封装。 对于SpringMVC我们主要学习如下内容: SpringMVC简介 请求与响应 REST风格 SSM整合(注解版) 拦截器 SpringMVC是处理Web层/表现层的框架&#xff…

langchain学习笔记(九)

RunnableBranch: Dynamically route logic based on input | 🦜️🔗 Langchain 基于输入的动态路由逻辑,通过上一步的输出选择下一步操作,允许创建非确定性链。路由保证路由间的结构和连贯。 有以下两种方法执行路由 1、通过Ru…

AI算法项目优化流程

算法优化的调试流程可以根据具体情况有所不同,但通常包括以下关键步骤,希望对大家有所帮助。通过以下流程,可以有效地识别和解决算法优化过程中的问题,提升算法性能和稳定性。北京木奇移动技术有限公司,专业的软件外包…

制作耳机壳的UV树脂和塑料材质相比优势有哪些?

制作耳机壳的UV树脂相比塑料材质有以下优势: 高强度与耐磨性:UV树脂具有高强度和耐磨性,能够更好地保护耳机内部零件,延长耳机使用寿命。相比之下,塑料材质可能较易磨损或刮伤。耐高温:UV树脂具有较好的耐…

排序——归并排序

归并排序和快排一样, 都是一种利用二叉树分治思想实现的排序。同时归并排序也和快排一样有递归归并排序和非递归归并排序两种。 本节主要复习归并排序, 并且两种实现方式都会复习到。 递归归并 要实现递归归并排序的代码。 我们首先需要理解递归归并排序…

PyTorch-神经网络

神经网络,这也是深度学习的基石,所谓的深度学习,也可以理解为很深层的神经网络。说起这里,有一个小段子,神经网络曾经被打入了冷宫,因为SVM派的崛起,SVM不了解的同学可以去google一下&#xff0…

stm32触发硬件错误位置定位

1.背景 1. 项目中,调试过程或者测试中都会出现程序跑飞问题,这个时候问题特别难查找。 2. 触发硬件错误往往是因为内存错误。这种问题特别难查找,尤其是产品到了测试阶段,而这个异常复现又比较难的情况下,简直头疼。…

(css)element-ui表格行图片点击放大且可调整preview-src-list大图预览样式

(css)element-ui表格行图片点击放大且可调整preview-src-list大图预览样式 效果&#xff1a; 常规写法&#xff1a; <el-table-column prop"display" label"展示效果" align"center"><template slot-scope"scope"><e…