Vue3与Vue2的区别以及Vue3的创建

news2024/11/25 2:37:03

Vue3带来了什么?

1.性能的提升
打包减少;初次渲染快;内存减少。

2.源码升级
使用Proxy代替defineProperty实现响应式;
重写虚拟DOM的实现和Tree-Shaking

3.使用了Typescript

4.新的特性
composition API 组合API
setup配置
ref与relative
watch与watchEffect

5.新的内置组件
Fragment
Teleport
Suspense

6.其他
新的生命周期钩子
data选项应该始终被声明为一个函数
移除keycode支持作为v-no的修饰符

Vue3.0过程的创建

1.使用vue-cli创建
首先检查版本号 vue --version 大于4.5版本 否则重新安装
创建 在当前目录下cmd 输入vue create vue3_test
启动 cd vue3_test npm run serve
在这里插入图片描述
2.使用vite创建
Vite是新一代前端构建工具,与Webpack工作模式不同,vite可以无需打包快速冷启动,热重载。左边是之前的webpack 右边是vite
在这里插入图片描述在这里插入图片描述
相比启动速度,vite更快 vite还没大规模应用,因此还是使用cli创建出来的工程
但是由于多数人使用vue-cli创建,因此我们也使用vue-cli来创建

与vue2创建的工程不同:

在mian.js文件中

//引入的不再是vue构造函数,引入的是一个名为createAPP的工厂函数

import { createApp } from 'vue'
import App from './App.vue'
//创建应用实例对象--app(类似之前Vue2中的vm,但是app比vm更轻)
createApp(App).mount('#app')
apply.mount('#app')

引入的不再是vue构造函数,引入的是一个名为createAPP的工厂函数
创建应用实例对象–app(类似之前Vue2中的vm,但是app比vm更轻)

与之前不同:vue2中mian.js

/*const vm = new Vue({
    render:h=>h(App)
})
vm.$mount('#app')*/

Vue3组件中的App.vue中的template中可以没有根标签 div

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

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

相关文章

深度学习训练营之yolov5训练自己的数据集

深度学习训练营之训练自己的数据集原文链接环境介绍准备好数据集划分数据集运行voc_train.py遇到问题完整代码创建new_data.yaml文件模型训练时遇到的报错模型训练结果可视化参考链接原文链接 🍨 本文为🔗365天深度学习训练营 中的学习记录博客&#x1f…

【专项训练】红黑树和AVL树

红黑树和AVL树 平衡二叉树: AVL Tree,and so on 如何平衡? 如何记录高度 AVL:保证任何节点的平衡因子在[-1, 0, 1] 4种旋转操作:

Linux 练习八 (IPC 信号量)

文章目录信号量介绍信号量相关函数案例一:有亲缘关系的进程使用信号量通信案例二:无亲缘关系的进程使用信号量通信使用环境:Ubuntu18.04 使用工具:VMWare workstations ,xshell作者在学习Linux的过程中对常用的命令进行…

记录--vue3+setup+ts 知识总结

这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助 vue3 于 2020 年 09 月 18 日正式发布,2022 年 2 月 7 日 vue3 成为新的默认版本 距离 vue3 正式发布已经过去两年有余, 成为默认版本也过去大半年了,以前还能说是对新技术、新…

SAP 凭证修改记录CDHDR / CDPOS使用及说明

目的: 一、sap的更改记录的保存 1、所有的修改记录在表CDHDR and CDPOS 2、表CDHDR 表CDHDR记录了用户于什么时间点用什么样的事务代码修改了什么样的对象 在表CDHDR字段:Change doc. Object代表了修改的对象 3、表CDPOS 是更改记录的行项目 记录…

web实现太极八卦图、旋转动画、定位、角度、坐标、html、css、JavaScript、animation

文章目录前言1、html部分2、css部分3、JavaScript部分4、微信小程序演示前言 哈哈 1、html部分 <div class"great_ultimate_eight_diagrams_box"><div class"eight_diagrams_box"><div class"eight_diagrams"><div class&…

如何使用MyBatis框架实现对数据库的增删查改?

目录&#xff1a;1.创建MyBatis项目以及如何配置2.MyBatis操作数据库的模式3.实现增删查改注意&#xff1a;在我们操作数据库之前&#xff0c;先要保证我们已经在数据库建好了一张表。创建MyBatis项目以及如何配置我们在创建项目的时候&#xff0c;引入MyBatis相关依赖配置数据…

动态内存分配之伙伴算法

伙伴算法 伙伴算法是一种在计算机内存管理中使用的算法&#xff0c;用于分配和释放内存。它是一种基于二叉树的动态内存分配算法&#xff0c;可以高效地分配和合并内存块。伙伴算法是一种按照固定大小分配内存的算法&#xff0c;例如&#xff0c;每个内存块的大小为2的n次幂&a…

MyBatis学习笔记(十二) —— MyBatis的逆向工程

12、MyBatis的逆向工程 正向工程&#xff1a;先创建Java实体类&#xff0c;由框架负责根据实体类生成数据库表。Hibernate是支持正向工程的。 逆向工程&#xff1a;先创建数据库表&#xff0c;由框架负责根据数据库表&#xff0c;反向生成如下资源&#xff1a; Java实体类Mappe…

操作系统--基于Linux的常用命令(超详细/设计/实验/作业/练习)

目录课程名&#xff1a;操作系统原理及Linux应用内容/作用&#xff1a;设计/实验/作业/练习学习&#xff1a;基于Linux的常用命令一、前言二、环境与设备三、原理四、内容五、总结与分析课程名&#xff1a;操作系统原理及Linux应用 内容/作用&#xff1a;设计/实验/作业/练习 …

苹果和富士康坚持推进印度制造,过于一厢情愿了,或加速衰退

在印度生产iPhone面临重重波折后&#xff0c;苹果和富士康仍然执意推进印度制造&#xff0c;这对于本已面临诸多风波的苹果来说并非好事&#xff0c;或许会加速苹果的衰退&#xff0c;毕竟如今的苹果早已没有当年的影响力了。一、苹果面临的问题苹果能成为智能手机市场的领导者…

【专项训练】排序算法

排序算法 非比较类的排序,基本上就是放在一个数组里面,统计每个数出现的次序 最重要的排序是比较类排序! O(nlogn)的3个排序,必须要会!即:堆排序、快速排序、归并排序! 快速排序:分治 经典快排 def quickSort1(arr

WinRAR安装教程

文章目录WinRAR安装教程无广告1. 下载2. 安装3. 注册4. 去广告WinRAR安装教程无广告 1. 下载 国内官网&#xff1a;https://www.winrar.com.cn/ 2. 安装 双击&#xff0c;使用默认路径&#xff1a; 点击“安装”。 点击“确定”。 点击“完成”。 3. 注册 链接&#xff…

第161篇 笔记-去中心化的含义

本文主要内容来自Vitalik Buterin的文章。“去中心化”这个词是在加密经济学领域用得最多的一个词&#xff0c;通常也作为辨别区块链的依据。然而&#xff0c;这个词也可能是被定义得最不恰当的一个词。数千小时的研究和价值数十亿美元哈希算力的投入都旨在实现去中心化&#x…

wsl ubuntu22.04 conda环境安装labelImg解决xcb缺失问题

labelImg 安装 pip install PyQt5 -i https://pypi.tuna.tsinghua.edu.cn/simple/ pip install pyqt5-tools -i https://pypi.tuna.tsinghua.edu.cn/simple/ pip install lxml -i https://pypi.tuna.tsinghua.edu.cn/simple/ pip install labelImg -i https://pypi.tuna.tsingh…

Java基础学习(2)

Java基础学习一 基础概念1.1 注释1.2 关键字1.3 字面量特殊字符1.4 变量1.5 数据类型1.6 标识符1.7 键盘输入二 运算符隐式转换强制转换三元运算符运算符的优先级二 源码 补码 反码2.1 源码2.2 反码2.3 补码其他运算符逻辑与逻辑或左移右移一 基础概念 1.1 注释 对自己所写的内…

HTML快速入门

目录HTML概念HTML基本格式基本语法常用标签1.文件标签&#xff1a;构成html最基本的标签2.文本标签&#xff1a;和文本有关的标签3.列表标签4.图片标签5.超链接标签6.表格标签7.表单标签HTML概念 HTML是最基础的网页开发语言&#xff0c;Hyper Text Markup Language&#xff0…

保姆级使用PyTorch训练与评估自己的Replknet网络教程

文章目录前言0. 环境搭建&快速开始1. 数据集制作1.1 标签文件制作1.2 数据集划分1.3 数据集信息文件制作2. 修改参数文件3. 训练4. 评估5. 其他教程前言 项目地址&#xff1a;https://github.com/Fafa-DL/Awesome-Backbones 操作教程&#xff1a;https://www.bilibili.co…

cocoscreator打包android app bundle使用Play Asset Delivery分包

1.cocoscreator构建完android项目 2.用androidstudio打开项目 3.点击androidstudio上项目目录左上角的Android改为Project 4. 在项目目录下新建Modul 5.选择Android Library 6.命名assetPack1或者自定义&#xff0c;点击Finish 7.在新建的assetPack1目录下找到build.gradle并…

【408数据结构】一篇文章吃透算法时间复杂度

文章目录前言1. 什么是好的算法2. 算法的效率度量3. 时间复杂度4. 大 O 时间复杂度表示法5. 算法时间复杂度计算规则&#x1f351; 规则 1&#xff1a;只关注循环中的代码段&#x1f351; 规则 2&#xff1a;加法规则&#x1f351; 规则 3&#xff1a;乘法规则6. 常见算法时间复…