助你丝滑过度到 Vue3 初识 ②②

news2024/12/26 10:52:53

请添加图片描述

@作者 : SYFStrive

 
请添加图片描述

@博客首页 : HomePage

📜: VUE3~TS

📌:个人社区(欢迎大佬们加入) 👉:社区链接🔗

📌:觉得文章不错可以点点关注 👉:专栏连接🔗

请添加图片描述
相关专栏

👉 TypeScript(🔥)
👉 微信小程序(🔥)
👉 UNIAPP开发(🔥)

目录

  • Vue3 JS
  • Vue3 ~ 带来优点
  • Vue3性能的提升
  • Vue3拥抱TypeScript
  • Vue3新的特性
  • 最后


                    ⡖⠒⠒⠒⠤⢄⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢸   ⠀⠀⠀⡼⠀⠀⠀⠀ ⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢶⣲⡴⣗⣲⡦⢤⡏⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣰⠋⠉⠉⠓⠛⠿⢷⣶⣦⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢠⠇⠀⠀⠀⠀⠀⠀⠘⡇⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⡞⠀⠀⠀⠀⠀⠀⠀⢰⠇⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⡴⠊⠉⠳⡄⠀⢀⣀⣀⡀⠀⣸⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⢸⠃⠀⠰⠆⣿⡞⠉⠀⠀⠉⠲⡏⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠈⢧⡀⣀⡴⠛⡇⠀⠈⠃⠀⠀⡗⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⣿⣱⠃⡴⠙⠢⠤⣀⠤⡾⠁⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⢀⡇⣇⡼⠁⠀⠀⠀⠀⢰⠃⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⣸⢠⣉⣀⡴⠙⠀⠀⠀⣼⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⡏⠀⠈⠁⠀⠀⠀⠀⢀⡇⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⢸⠃⠀⠀⠀⠀⠀⠀⠀⡼⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⢸⠀⠀⠀⠀⠀⠀⠀⣰⠃⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⣀⠤⠚⣶⡀⢠⠄⡰⠃⣠⣇⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⢀⣠⠔⣋⣷⣠⡞⠀⠉⠙⠛⠋⢩⡀⠈⠳⣄⠀⠀⠀⠀⠀⠀⠀
⠀⡏⢴⠋⠁⠀⣸⠁⠀⠀⠀⠀⠀ ⠀⣹⢦⣶⡛⠳⣄⠀⠀⠀⠀⠀
⠀⠙⣌⠳⣄⠀⡇   不能   ⡏⠀⠀  ⠈⠳⡌⣦⠀⠀⠀⠀
⠀⠀⠈⢳⣈⣻⡇   白嫖 ⢰⣇⣀⡠⠴⢊⡡⠋⠀⠀⠀⠀
⠀⠀⠀⠀⠳⢿⡇⠀⠀⠀⠀⠀⠀⢸⣻⣶⡶⠊⠁⠀⠀
⠀⠀⠀⠀⠀⢠⠟⠙⠓⠒⠒⠒⠒⢾⡛⠋⠁⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⣠⠏⠀⣸⠏⠉⠉⠳⣄⠀⠙⢆⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⡰⠃⠀⡴⠃⠀⠀⠀⠀⠈⢦⡀⠈⠳⡄⠀⠀⠀⠀⠀⠀⠀
⠀⠀⣸⠳⣤⠎⠀⠀⠀⠀⠀⠀⠀⠀⠙⢄⡤⢯⡀⠀⠀⠀⠀⠀⠀
⠀⠐⡇⠸⡅⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠹⡆⢳⠀⠀⠀⠀⠀⠀
⠀⠀⠹⡄⠹⡄⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣇⠸⡆⠀⠀⠀⠀⠀
⠀⠀⠀⠹⡄⢳⡀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢹⡀⣧⠀⠀⠀⠀⠀
⠀⠀⠀⠀⢹⡤⠳⡄⠀⠀⠀⠀⠀⠀⠀⠀⠀⢀⣷⠚⣆⠀⠀⠀⠀
⠀⠀⠀⡠⠊⠉⠉⢹⡀⠀⠀⠀⠀⠀⠀⠀⠀⢸⡎⠉⠀⠙⢦⡀⠀
⠀⠀⠾⠤⠤⠶⠒⠊⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠉⠙⠒⠲⠤⠽   

提示:以下是本篇文章正文内容

Vue3 JS


简介 : 2020年9月18日,Vue.js发布3.0版本,代号:One Piece(海贼王)
耗时2年多、2600+次提交、30+个RFC、600+次PR、99位贡献者

  • github上的tags地址:https://github.com/vuejs/vue-next/releases/tag/v3.0.0
  • 官方
  1. 国内爱好者官网 :https://vue3js.cn/
  2. 中文 : https://www.javascriptc.com/vue3js/
  3. 英文 : https://cn.vuejs.org/
  4. Vue 相关包 : https://github.com/vuejs/awesome-vue
  5. Vue 相关插件 : https://awesomejs.dev/for/vue/
  6. Vue API :https://cn.vuejs.org/api/

Vue3 ~ 带来优点

Vue3性能的提升

  • 打包大小减少41%

  • 初次渲染快55%, 更新渲染快133%

  • 内存减少54%

#2、源码的升级

  • 使用 Proxy 代替 DefineProperty 实现响应式

  • 重写虚拟DOM的实现和Tree-Shaking

Vue3拥抱TypeScript

  • Vue3可以更好的支持TypeScript

Vue3新的特性

  1. Composition API(组合API)
  • setup配置
  • ref与reactive
  • watch与watchEffect
  • provide与inject
  1. 新的内置组件
  • Fragment
  • Teleport
  • Suspense
  1. 其他改变
  • 新的生命周期钩子
  • data 选项应始终被声明为一个函数
  • 移除keyCode支持作为 v-on 的修饰符

最后

以上是个人学习Vue3的相关知识点,一点一滴的记录了下来,有问题请评论区指正,共同进步,这才是我写文章的原因之,如果这篇文章对您有帮助请三连支持一波

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

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

相关文章

读发布!设计与部署稳定的分布式系统(第2版)笔记15_快速失败和替换

1. 快速失败而非缓慢响应 1.1. 如果响应缓慢比没有响应更糟,那么最坏的情况肯定是缓慢的失败响应 1.2. 如果系统能够预先确定某次调用会失败,那么最好快速失败 2. 快速失败模式通过避免响应缓慢来提高整个系统的稳定性 2.1. 当系统由于部分失效而面临…

【pytorch,onnx,bug解决】pytorch的op:pixel unshuffle转到onnx的op:SpaceToDepth

文章目录 问题1, 转换失败问题1解决问题2,精度对不上问题2解决训练时转换时 问题1, 转换失败 pytorch训练好的模型想要在onnx上部署,但是发现算子F.pixel_unshuffle 不能直接转到onnx 的 SpaceToDepth, 发生以下报错&…

Android——基本控件(下)(十六)

1. 随笔提示文本:AutoCompleteTextView 1.1 知识点 (1)了解随笔提示功能的应用; (2)可以使用AutoCompleteTextView类完成随笔提示功能的实现。 1.2 具体内容 这个组件就是提供了一个文本输入的功能&…

YOLO改进教程:6.添加NAM-Net注意力机制

论文地址:https://arxiv.org/abs/2111.12419Github:https://github.com/Christian-lyc/NAM如果你是深度学习小白,阅读本文前建议先学习一下 📖《新手入门深度学习》如果你有一定基础,但是缺乏实战经验,可通过 📖《深度学习100例》 补齐基础另外,我们正在通过 🔥365…

window11系统打开VMware虚拟机,导致主机直接重启

问题描述: window11系统打开VMware虚拟机,直接导致主机直接重启 原因: 未开启“虚拟机平台”选项。 解决方式: 打开电脑“控制面板”,选择“程序”,在再选择程序中的“启用或关闭windows功能” 控制面板➡…

MyBatis 执行流程详解及示例代码

导言: MyBatis 是一个优秀的持久层框架,它简化了数据库操作的开发过程。本文将详细介绍 MyBatis 的执行流程,并提供相应的示例代码,帮助读者更好地理解和应用 MyBatis。 1. 创建 SqlSessionFactoryBuilder 对象 在 MyBatis 中&…

基于redis的bitmap实现签到功能(后端)

项目环境 MacOS springboot: 2.7.12 JDK 11 maven 3.8.6 redis 7.0.11 StringRedisTemplate 的key和value默认都是String类型 可以避免不用写配置类,定义key和value的序列化。 实现逻辑: 获取用户登录信息 根据日期获取当天是多少号 构建…

【服务器数据恢复】热备盘同步失败导致服务器崩溃的数据恢复案例

服务器数据恢复环境: 两组分别由4块SAS硬盘组建的raid5磁盘阵列,ext3文件系统,通过LVM管理磁盘存储。 服务器故障: 一组raid5磁盘阵列中的1块硬盘故障离线,热备盘成功启用并开始同步数据,在同步还没有完成…

互联网保险驶入发展快车道,元保保险加速数字化突围

随着90后、00后这一群体逐渐进入婚育高峰期,加之相较60后、70后群体,这群互联网原住民已经成为保险消费的主力人群,互联网保险行业迎来了新的发展机遇,互联网平台恰似曾经辉煌的大卖场、集市、商场,成为汇聚流量的新平台,只不过,能量的漩涡更大,更聚焦。对此,元保集团创始人兼C…

记录一个Masonry 添加约束导致的label 文案展示不全的问题

问题如图,蓝色label 中的文字没有展示完全,后面还有“情。” 原因,我们使用masonry 布局的时候,宽度会有细微的误差,导致我们实际 添加的约束比我们期望的要小,就导致横向无法容下期望的文字宽度&#xf…

如何使用MySQL统计当月每日收益金额

如果要实现上图这个效果,这个SQL应该怎么写呢? 目录 1、实现思路 2、SQL实现 1、实现思路 首先,我们先实现查询当月每日的日期 。然后将查询结果与需要统计的表进行左连接即可。 SELECT DATE(DATE_SUB(CURRENT_DATE(), INTERVAL (DAY(CURRE…

微服务springcloud 10.config配置中心框架和rabbitmq的安装

config配置中心的作用:项目的yml 配置文件保存到 git 服务器,例如 github.com 或 gitee.com 微服务启动时,从服务器获取配置文件 1.新建 “Project”,命名为 config。注意这里的不是maven项目,而是project 2.将sp02,sp03,sp04,s…

git常用命令之Fetch

4. Fetch 命令-----------------------------------------------------------------------------作用延展阅读git fetch1. 拉取「远程仓库」的所有远程分支的最新Commit-ID 记录在 .git/FETCH_HEAD 文件中.若有多个分支则 FETCH_HEAD 内会有多行数据,该文件首行对应…

dbca添加实例时无法发现对方主机

有个12.2集群环境,需要添加一个实例,直接图形化启动dbca,第四步时只能发现本机,无法识别到另外一个节点,如下图 通过排查发现是oracle用户的密码过期了,细节如下 [roothydb1 ~]# su - grid Last login: W…

C++11关键字

decltype 根据表达式的类型自动推导类型 int main(void) {decltype(x) c 21.1; //赋值decltype((x)) d c; // 是一个引用decltype(x) e c; //d 120;cout << sizeof(int) << endl;cout << sizeof(c) << " c" << c << endl;…

【Rust】所有权

文章目录 所有权stack与heap所有权存在的原因所有权规则变量作用域String类型内存和分配变量与数据交互的方式1.Move2.Clone3.Copy 所有权与函数返回值与作用域引用借用可变引用悬空引用Dangling References引用的规则切片字符串切片将字符串切片作为参数传递其他类型的切片 所…

1.2 matlab信号分析编程基础

1.画正弦波 xlinspace(0,2*pi,100); ysin(x); plot(x,y);2.画方波 xlinspace(0,4*pi,100); ysquare(x); plot(x,y);3.矩阵赋值 4.标准函数 5.画图 title&#xff1a;标题 grid&#xff1a;开关网格线 叠加多条曲线 3.GUI画正弦波 Fs 44100; dt 1.0/Fs; T 1; N T/dt…

Acer宏碁笔记本电脑Aspire蜂鸟FUN S50-51原装Windows10系统镜像,恢复出厂系统

Acer宏碁笔记本电脑Aspire蜂鸟S50-51原厂Win10系统工厂模式恢复原装出厂OEM系统 系统自带所有驱动、办公软件、出厂主题壁纸LOGO、 Acer Care Center、Quick Access等预装程序 所需工具&#xff1a;32G或以上的U盘&#xff08;非必需&#xff09; 文件格式&#xff1a;多个I…

Java垃圾搜集算法和垃圾回收算法

垃圾回收主要针对的是JVM的堆内存&#xff0c;分为新生代和老年代。 按照以前的叫法&#xff0c;还有一个永久代&#xff0c;它在方法区里保存了class信息、静态变量、常量池等。 从jdk-1.8开始&#xff0c;方法区的实现发生了一些变化&#xff0c;取消了永久代的概念&#xff…

墨迹api实现天气预测

文章目录 需求背景解决效果接口地址index.vueweather.vue图标文件 视频效果 需求背景 使用墨迹天气api实现天气预报&#xff0c;空气质量预报功能 解决效果 接口地址 墨迹天气 index.vue <template><div class"dqhjjc-wrap"><div class"fir…