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

news2024/9/23 23:30:45

前言:

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.coloradmin.cn/o/1483731.html

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

相关文章

【基础训练 || Test-1】

总言 主要内容:一些习题。       文章目录 总言一、选择1、for循环、操作符(逗号表达式)2、格式化输出(转换说明符)3、for循环、操作符(逗号表达式、赋值和判等)4、if语句、操作符&#xff…

如何根据PalWorldSettings.ini重新生成定制的WorldOption.sav文件?

这个过程涉及到将PalWorldSettings.ini 文件中的设置与WorldOption.sav 文件进行匹配和替换。具体的操作步骤可能包括检查PalWorldSettings.ini 文件中的设置是否与WorldOption.sav 文件中的设置相匹配,然后根据这些设置重新生成或修改WorldOption.sav 文件&#xf…

腾讯云学生云服务器_学生云主机_学生云数据库_云+校园特惠套餐

2024年腾讯云学生服务器优惠活动「云校园」,学生服务器优惠价格:轻量应用服务器2核2G学生价30元3个月、58元6个月、112元一年,轻量应用服务器4核8G配置191.1元3个月、352.8元6个月、646.8元一年,CVM云服务器2核4G配置842.4元一年&…

论文里点击如图?-?如何跳转到图片的题注

写论文,如何点击如图?-?然后光标自己能跳转到指定图片的题注之前呢? 首先,你要确定自己已经列好了标题,如几点几,几点几,比如我写到第三个章节的标题为 3.2 XXXXXXXXX 那么接下来后面的操作会出现图3-&…

Python中学习调试requests模块时出现的大坑(1)

为防止迷路: 学习机械相关,请关注公众号:南大盛联 学习软件,硬件,请关注公众号号:一训微课 cmd模式下 不知道上面这行的话,需要补课。 pip install requests 这个不知道的话,也要补课 pip是python的安装工具。 install是安装的意思 requests是我们需要安装的模…

腾讯云优惠券领取入口_先领取再下单_2024腾讯云优惠攻略

腾讯云优惠代金券领取入口共三个渠道,腾讯云新用户和老用户均可领取8888元代金券,可用于云服务器等产品购买、续费和升级使用,阿腾云atengyun.com整理腾讯云优惠券(代金券)领取入口、代金券查询、优惠券兑换码使用方法…

【C++庖丁解牛】类与对象

📙 作者简介 :RO-BERRY 📗 学习方向:致力于C、C、数据结构、TCP/IP、数据库等等一系列知识 📒 日后方向 : 偏向于CPP开发以及大数据方向,欢迎各位关注,谢谢各位的支持 目录 1.面向过程和面向对象…

AJAX 学习笔记(Day1)

「写在前面」 本文为黑马程序员 AJAX 教程的学习笔记。本着自己学习、分享他人的态度,分享学习笔记,希望能对大家有所帮助。 目录 0 课程介绍 1 AJAX 入门 1.1 AJAX 概念和 axios 使用 1.2 认识 URL 1.3 URL 查询参数 1.4 常用请求方法和数据提交 1.5 HT…

arduino uno R3驱动直流减速电机(蓝牙控制)

此篇博客用于记录使用arduino驱动直流减速电机的过程,仅实现简单的功能:PID调速、蓝牙控制 1、直流减速电机简介2、DRV8833电机驱动模块简介3、HC-05蓝牙模块简介电机转动测试4、PID控制5、蓝牙控制电机 1、直流减速电机简介 我在淘宝购买的电机&#x…

VMware安装Centos7详细过程

1.硬件软件准备 软件:VMware16 硬件:因为是在宿主机上运行虚拟化软件安装centos,所以对宿主机的配置有一定的要求。最起码I5CPU双核、硬盘500G、内存4G以上。 镜像:centos7,镜像下载地址centos安装包下载_开源镜像站-阿里云 2…

华为数通方向HCIP-DataCom H12-821题库(多选题:21-40)

第21题 管理员在配置 VRRP 时,下面哪些不是必须配置的? A.抢占模式 B.抢占延时 C.虚拟IP 地址 D.虚拟路由器的优先级 【参考答案】ABD 【答案解析】 VRRP的作用之一是提供一个虚拟的IP地址,用作默认网关,用来实现冗余和故障转移。因此,配置虚拟IP地址是必须的。华为设备vr…

力扣1892 页面推荐Ⅱ

力扣1892,页面推荐Ⅱ,为一个社交媒体网站实施一个页面推荐系统。如果页面被user_id的 至少一个朋友喜欢 ,而 不被user_id喜欢 ,你的系统将 推荐 一个页面到user_id。 目录 题目描述 解题思路 完整代码 优化 题目描述 表&…

hcip交换

交换机功能 无限的传输距离——识别,重写电信号(帧)保证信息完整彻底解决了冲突二层单播——MAC地址表提高端口密度 单播地址:MAC地址第一个字节第8位为0 组播地址:MAC地址第一个字节第8位为1 广播地址:全1…

什么是BGP网络 (边界网关协议)

BGP(边界网关协议)是一种用于在互联网中交换路由信息的协议。作为网关或路由器之间的协议,BGP主要用于帮助确定数据包在网络中的路径。它通过在不同自治系统(AS)之间交换路径信息,实现了全球互联网网络的连…

pyorbbecsdk奥比中光python版本SDK在Windows下环境配置笔记

1、概述 Orbbec SDK Python Wrapper基于Orbbec SDK进行设计封装,主要实现数据流接收,设备指令控制。 2、系统要求 2.1、操作系统 Windows:Windows 10 (x64)(本文 针对windows)Linux: 18.04/20.04/22.04 (x64)Arm32:…

P10166 [DTCPC 2024] 环

解题思路 满足的序列即为环若图上有环,则代价为0若无环,则在图上已有的边在添加一条回边可形成环对所有的点由小到大排序由于环的大小可以为2初值设为,先不管最小点之间是否有边,反正不会更劣通过拓扑排序找环,在找环…

Vue3+vite打包后页面空白问题

vite.config.js vite.config.js 增加 base: ./ import { fileURLToPath, URL } from node:url import { defineConfig } from vite import vue from vitejs/plugin-vue// https://vitejs.dev/config/ export default defineConfig({base: ./,resolve: {alias: {: fileURLToPath…

Mysql学习之各种锁

锁 事务的隔离性由锁来实现 MySQL并发事务访问相同记录 并发事务访问相同记录的情况大致可以分为3种: 读-读的情况 读-读情况,即并发事务相继读取相同的记录。读取操作本身不会对记录由有任何的影响,并不会引起什么问题,所以允许…

git代码上库流程(一篇就够了)

文章目录 一、前言二、创建新分支三、修改代码四、合并分支 一、前言 多人协同开发一个项目,为了方便管理代码,每个人代码提交不冲突。git代码仓库管理是不可或缺的。对于新手来说,既不懂git原理又不懂底层逻辑,还经常错误提交代码…

10s用递归实现反转链表(JAVA)

目录 1. 原理 1.1 问题 1.2 解决 1.3 终点 2.代码操作及讲解 2.1 演示代码 2.2 讲解 1. 原理 反转 A->B->C 1.1 问题 当反转A->B的链接时,当B改成指向A(B->A), 就找不到C了; 1.2 解决 所以需要一个变量临时…