Hello Vue3

news2024/9/17 8:29:24

一、为什么要学vue3

vue官网:https://cn.vuejs.org/api/
在这里插入图片描述
这是vue官网的简介,说vue2在23年年底就停止维护了,将来会拥抱vue3,这是事务发展的一个必然趋势。

二、vue3相比于vue2做了哪些方面的改进和优化

以下是Vue3相比于Vue2的一些改进和优化

改进/优化Vue2Vue3
响应式系统基于Object.defineProperty使用Proxy API实现,更高效、更可靠
组件渲染基于vnode树结构基于Fragments和静态提升
组件实例通过this访问使用composition API
数据状态管理VueX和Vue.observable新增了Reactive API和Composition API进行更好的状态管理
编译器基于第三方插件改为使用基于标准规范编写的编译器
性能优化需要手动使用指令内置了静态树提升、渲染缓存等优化方式
TypeScript支持需要通过第三方库进行支持内置了对TypeScript的优化支持
内部优化使得小型应用的体积较大对内部结构进行了优化,使得更小更高效的运行
运行时性能相对较低更高效的运行时性能

请注意,这只是一部分Vue3相对于Vue2的改进和优化。Vue3带来了更多令人兴奋的功能和性能改进,使得Vue的开发更加高效和强大。

三、使用vue-cli创建一个vue3的项目

官方文档:https://cli.vuejs.org/zh/guide/creating-a-project.html#vue-create

1. 查看@vue/cli版本,确保@vue/cli版本在4.5.0以上

vue --version

在这里插入图片描述

2. 安装或者升级你的@vue/cli

npm install -g @vue/cli

3.创建

vue create vue_test

在这里插入图片描述

4.启动

cd vue_test
npm run serve

在这里插入图片描述

5.项目结构

  • main.js
    在这里插入图片描述
  • App.vue
    在这里插入图片描述
    其他的和vue2没有什么区别

四、使用vite创建vue3项目

vite就是一个构建工具,不了解的小伙伴可以看看我的另一个专栏vite从入门到原理,里面介绍了vite的基本使用和高级优化

vite官网:https://cn.vitejs.dev/guide/

使用vite创建vue3项目我在这里有详细教程,这里就不再赘述拉,感兴趣的小伙伴可以看看哦https://blog.csdn.net/jieyucx/article/details/131376896

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

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

相关文章

DAY37:贪心算法(四)跳跃游戏+跳跃游戏Ⅱ

文章目录 55.跳跃游戏思路完整版总结 45.跳跃游戏Ⅱ思路完整版为什么next覆盖到了终点可以直接break,不用加上最后一步逻辑梳理 总结 55.跳跃游戏 给定一个非负整数数组 nums ,你最初位于数组的 第一个下标 。 数组中的每个元素代表你在该位置可以跳跃…

weui 密码二次检查校验

检验规则里rules[]增加: equalTo:需要匹配一致的字段名 我这第一个密码是:USR_PWD,第二个密码是:USR_PWD2,让第二个等于第一个就可以了: equalTo:USR_PWD 效果:

MIT 6.S081 教材第七章内容 -- 调度 --下

MIT 6.S081 教材第七章内容 -- 调度 -- 下 引言调度多路复用代码:上下文切换代码:调度代码:mycpu和myprocsleep与wakeup代码:sleep和wakeup代码:Pipes代码:wait, exit和kill真实世界练习 引言 MIT 6.S081 …

0基础学习VR全景平台篇 第54篇: 高级功能-皮肤

功能位置示意 一、本功能将用在哪里? 皮肤功能,摆脱传统VR全景展示样式,自行选择场景与全景分组的界面模板,从而与不同的应用行业风格相互适应,达到最贴切的展示效果。 是在各种风格的VR全景作品中,最快实…

C++ DAY5

1.全局变量,int monster 10000;定义英雄类hero,受保护的属性string name,int hp,int attck;公有的无参构造,有参构造,虚成员函数 void Atk(){monster-0;},法师类继承自英雄类,私有属…

前端web入门-移动web-day09

(创作不易,感谢有你,你的支持,就是我前行的最大动力,如果看完对你有帮助,请留下您的足迹) 目录 空间转换 空间转换 – 平移 视距 perspective 空间 – 旋转 立体呈现 – transform-style 空间转换…

Docker学习笔记16

在生产环境中使用Docker,往往需要对数据进行持久化,或者需要在多个容器之间进行数据共享。 容器管理数据有两种方式: 1)数据卷:容器内数据直接映射到本地主机环境; 2)数据卷容器:…

服务器远程管理工具Xshell安装及使用,传输文件工具安装及使用

两个软件 Xshell 双击输入用户名和密码 也可以通过密钥的方式 怎么生成密钥还没做过 Xftp 一边主机一边服务器,相互拖动就行了

【C#】并行编程实战:实现数据并行(3)

本章继续学习实现数据并行,本文主要介绍取消循环。 本教程对应学习工程:魔术师Dix / HandsOnParallelProgramming GitCode 4、取消循环 在顺序循环中,可以使用 break 来跳出循环,而在并行循环的情况下,由于他…

Unity协程

unity提供了一种类似“多段代码并行执行”的功能,即协程。 我们在定义一个协程的时候,需要遵循类似这样的语法 IEnumerator(枚举器接口) namespace System.Collections {public interface IEnumerator{object Current { get; }/…

卷积神经网络--猫狗系列【VGG16】

数据集:【文末】 ​ 数据集预处理 定义读取数据辅助类(继承torch.utils.data.Dataset) import osimport PILimport torchimport torchvisionimport matplotlib.pyplot as pltimport torch.utils.dataimport PIL.Image # 数据集路径train_p…

哈希桶的增删查改简单实现

个人简单笔记。 目录 闭散列 开散列 插入 删除 查找 改变 什么是哈希桶呢?这是一个解决哈希数据结构的一种解决方法,在STL中的unorder_map与unorder_set的底层结构就是使用它来实现的。 闭散列 首先我们知道,哈希映射表是依据数组下…

CSS画特殊边框

例如如图所示边框 .card-middle {width: 672px;height: 486px;border: 1px solid #5fadec;border-radius: 5px;position: relative; }.card-middle::before {content: ;position: absolute;top: -4px;left: -4px;width: 680px;height: 448px;border: 25px solid transparent;b…

【Python】PIL.Image转QPixmap后运行异常的个人解决方法

问题场景: PIL.Image图片,直接调用PIL.Image.toqpixmap()转成QPixmap后,不会立即报错,   但后续使用该QPixmap时(包括但不仅限于使用QLabel.setPximap()、QPixmap.save())将立即出现异常 不知道是我关键词不对,还是只…

【数据结构与算法】文学语言助手(C\C++)

实践要求 1. 问题描述 文学研究人员需要统计某篇英文小说中某些形容词的出现次数和位置。试写一个实现这一目标的文字统计系统,称为"文学研究助手"。 2. 基本要求 英文小说存于文本文件中。待统计的词汇集合要一次输入完毕,即统计工作必需在…

linux常用命令介绍 06 篇——Linux查看目录层级结构以及创建不同情况的层级目录

linux常用命令介绍 06 篇——Linux查看目录层级结构以及创建不同情况的层级目录 1. 前言1.1 Linux常用命令其他篇1.2 关于tree简介 2. 安装并使用 tree2.1 安装tree2.1.1 方式1:yum安装2.1.2 方式2:下载安装包安装2.1.2.1 下载安装包2.1.2.2 解压安装2.1…

transformer入坑指南

*免责声明: 1\此方法仅提供参考 2\搬了其他博主的操作方法,以贴上路径. 3* 场景一: Attention is all you need 场景二: VIT 场景三: Swin v1 场景四: Swin v2 场景五: SETR 场景六: TransUNet 场景七: SegFormer 场景八: PVT 场景九: Segmeter … 场景一:Attention…

Spring Boot 中的 Spring Cloud Ribbon:什么是它,原理及如何使用

Spring Boot 中的 Spring Cloud Ribbon:什么是它,原理及如何使用 在分布式系统中,服务之间的通信是非常重要的。在大型的分布式系统中,有许多服务需要相互通信,而这些服务可能会部署在多个服务器上。为了实现服务之间…

超详细Redis入门教程——Redis分布式系统

前言 本文小新为大家带来 Redis分布式系统 相关知识,具体内容包括数据分区算法(包括:顺序分区,哈希分区),系统搭建与运行(包括:系统搭建,系统启动与关闭)&…

把 OpenGrok search 上的Android 开源代码扒下来

1、下载工具 wget (window10版本)以及配置环境变量 工具我会上传到本篇博客的“代码包”区域,可以自行下载! 当然如果可以访问如下链接的话,也可以在这个地址自行下载一个比较新的版本即可!GNU Wget 1.21.…