vue3【详解】vue3 比 vue2 升级了哪些重要的功能?

改用 createApp 初始化实例

vue2 使用 new Vue() 初始化实例
vue3 使用 Vue.createApp() 初始化实例

在这里插入图片描述
在这里插入图片描述

新增 emits 选项

vue3 选项式API中新增了emits 选项,用于显示声明组件中的自定义事件,自定义事件的名称,需用 on 开头。

export default {emits: ['onMyEvent1','onMyEvent2']
}

在 setup 中通过解构上下文可以获取自定义事件。

export default {emits: ['onInFocus', 'onSubmit'],setup(props, ctx) {ctx.emit('onSubmit')}
}

export default {emits: ['onInFocus', 'onSubmit'],setup(props, { emit }) {emit('onSubmit')}
}

新增模板片段 fragment

即 vue3 的模板支持多个根节点

在这里插入图片描述

vue2 的模板只能有一个根节点

在这里插入图片描述

移除数据双向绑定修饰符 .sync,改用 v-model:

在这里插入图片描述

vue2 的 .sync 功能可参考博客
https://blog.csdn.net/weixin_41192489/article/details/117360598

vue3 的 v-model 功能可参考博客
https://blog.csdn.net/weixin_41192489/article/details/137880927

改用 defineAsyncComponent 导入异步组

<script>
import { defineAsyncComponent } from 'vue'export default {components: {AdminPage: defineAsyncComponent(() =>import('./components/AdminPageComponent.vue'))}
}
</script><template><AdminPage />
</template>

原 vue2 的写法为

<script>
export default {components: {AdminPage: () => import('./components/AdminPageComponent.vue')}
}
</script><template><AdminPage />
</template>

移除 filter

vue2 中 filter 常用于格式化数据,如

{{ '2018-05-25T14:06:51.618Z' | datefmt }}
filters: {// input是自定义过滤器的默认参数,input的值永远都是取自于 | 左边的内容datefmt: function (input) {// 定义过滤器的内容:将input的值格式化成 yyyy-MM-dd 字符串输出input = new Date(input)let res;let year = input.getFullYear();let month = input.getMonth() + 1;let day = input.getDate();res = year + '-' + month + '-' + day;return res;}
},

页面显示效果

2018-5-25

新增内置组件 Teleport

用于将一个组件内部的一部分模板“传送”到该组件的 DOM 结构外层的位置去,常用于模态框的开发。

  <button @click="open = true">Open Modal</button><!-- 将模态框挂载到 body 标签上渲染,以便避免简化 css 样式,同时避免祖先组件样式的干扰 --><Teleport to="body"><div v-if="open" class="modal"><p>Hello from the modal!</p><button @click="open = false">Close</button></div></Teleport>

更多详情见官网

新增内置组件 Suspense

[实验性功能] 用于展示异步组件的状态,常和 <Transition><KeepAlive> 等组件结合使用

<RouterView v-slot="{ Component }"><template v-if="Component"><Transition mode="out-in"><KeepAlive><Suspense><!-- 主要内容 --><component :is="Component"></component><!-- 加载中状态 --><template #fallback>正在加载...</template></Suspense></KeepAlive></Transition></template>
</RouterView>

更多详情见官网

新增 Composition API (组合式 API)

响应式状态声明 ref, reactive

https://blog.csdn.net/weixin_41192489/article/details/138234529

readonly

创建只读代理

  • 可访问,不能修改
  • 源改变时,只读代理也会同步改变
const original = reactive({ count: 0 })const copy = readonly(original)watchEffect(() => {// 用来做响应性追踪console.log(copy.count)
})// 更改源属性会触发其依赖的侦听器
original.count++// 更改该只读副本将会失败,并会得到一个警告
copy.count++ // warning!

watch和watchEffect

https://blog.csdn.net/weixin_41192489/article/details/137930356

setup

组合式 API 的入口
https://cn.vuejs.org/api/composition-api-setup.html#composition-api-setup

生命周期钩子

https://blog.csdn.net/weixin_41192489/article/details/137813685

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

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

相关文章

如何在vue3+vite中优雅的使用iconify图标

前言 从Vue2迁移到Vue3&#xff0c;在使用上有着很大的差别。本文的话主要是针对图标的使用差别上进行分析&#xff0c;同时给出基于iconify图标库中unplugin-icons的用法。这里特殊说明一下&#xff1a;其实element-plus中用到的图标也是基于iconify图标库的&#xff0c;在我们…

LT9611UXC双端口 MIPI DSI/CSI 转 HDMI2.0,带音频

1. 说明 LT9611UXC 是一款高性能 MIPI DSI/CSI 至 HDMI2.0 转换器。MIPI DSI/CSI 输入具有可配置的单端口或双端口&#xff0c;具有 1 个高速时钟通道和 1~4 个高速数据通道&#xff0c;工作速率最高为 2Gbps/通道&#xff0c;可支持高达 16Gbps 的总带宽。 LT9611UXC 支持突发…

13 c++版本的五子棋

前言 呵呵 这大概是 大学里面的 c 五子棋了吧 有一些 面向对象的理解, 但是不多 这里 具体的实现 就不赘述, 仅仅是 发一下代码 以及 具体的使用 然后 貌似 放在 win10 上面执行 还有一些问题, 渲染的, 应该很好调整 五子棋 #include<Windows.h> #include<io…

STM32、GD32驱动SHT30温湿度传感器源码分享

一、SHT30介绍 1、简介 SHT30是一种数字湿度和温度传感器&#xff0c;由Sensirion公司生产。它是基于物理蒸发原理的湿度传感器&#xff0c;具有高精度和长期稳定性。SHT30采用I2C数字接口&#xff0c;可以直接与微控制器或其他设备连接。该传感器具有低功耗和快速响应的特点…

树莓派4-通过IIC实现图片循环播放

一、环境 1、树莓派4&#xff1b; 2、串口连接电脑&#xff1b; 3、树莓派由杜邦线连接0.96寸OLED1306协议 4、树莓派能够联网&#xff0c;便于安装环境。离线情况也可以安装&#xff0c;相对麻烦&#xff1b; 二、目标 1、树莓派可以开启IIC并识别已连接的IIC&#xff1b; …

Web3解密:理解去中心化应用的核心原理

引言 在当前数字化时代&#xff0c;去中心化技术和应用正在逐渐引起人们的关注和兴趣。Web3技术作为去中心化应用&#xff08;DApps&#xff09;的基础&#xff0c;为我们提供了一个全新的互联网体验。但是&#xff0c;对于许多人来说&#xff0c;这个复杂的概念仍然充满了神秘…

MongoDB基础操作

文章目录 一、什么是MongoDB二、MongoDB 与关系型数据库对比三、数据类型四、部署MongoDB1、下载二进制包2、下载安装包并解压3、创建用于存放数据和日志的目录&#xff0c;并修改权限4、启动MongoDB4.1前台启动4.2后台启动4.3、配置文件启动服务4.4、配置systemd服务4.5、syst…

RabbitMQ发布确认和消息回退(6)

概念 发布确认原理 生产者将信道设置成 confirm 模式&#xff0c;一旦信道进入 confirm 模式&#xff0c;所有在该信道上面发布的消息都将会被指派一个唯一的 ID(从 1 开始)&#xff0c;一旦消息被投递到所有匹配的队列之后&#xff0c;broker就会发送一个确认给生产者(包含消…

qt实现方框调整

效果 在四周调整 代码 #ifndef MAINWINDOW_H #define MAINWINDOW_H#include <QWidget>class MainWindow : public QWidget {Q_OBJECT public:explicit MainWindow(QWidget *parent 0);~MainWindow();void paintEvent(QPaintEvent *event);void updateRect();void re…

Restful API 具体设计规范(概述)

协议 https 域名 https://www.baidu.com/api 版本 https://www.baidu.com/v1 路径 https://www.baidu.com/v1/blogs 方法 数据过滤 状态码返回结果 返回的数据格式 尽量使用 JSON&#xff0c;避免使用 XML。 总结&#xff1a; 看 url 就知道要什么看 http method 就知道干…

Linux进阶篇:CentOS7搭建NFS文件共享服务

CentOS7搭建NFS文件共享服务 一、NFS介绍 NFS(Network File System)意为网络文件系统&#xff0c;它最大的功能就是可以通过网络&#xff0c;让不同的机器不同的操作系统可以共享彼此的文件。简单的讲就是可以挂载远程主机的共享目录到本地&#xff0c;就像操作本地磁盘一样&…

Docker——数据管理和网络通信

目录 一、Docker的数据管理 1.数据卷 2.数据卷容器 3.容器互联 二、Docker镜像的创建 1.基于现有镜像创建 2.基于本地模板创建 3.基于Dockerfile 创建 3.1联合文件系统&#xff08;UnionFS&#xff09; 3.2镜像加载原理 3.3为什么Docker里的Centos大小才200M 4.Dcok…

9【PS作图】像素画Tips

放大缩小 “窗口”-排列-为…画布新建窗口&#xff0c;就可以新建一个窗口&#xff0c;实时看作图效果 如果要保持放大或缩小的像素画仍然保持硬边缘&#xff0c;需要设置两个东西 将 编辑 > 首选项 > 常规 中的 插值方式 改为 “邻近&#xff08;靠近硬边缘&#xff09…

HTML网页自动播放背景音乐和全屏背景图代码

HTML网页自动播放背景音乐的代码 背景音乐代码及分析代码的应用背景图代码及分析下期更新预报 背景音乐代码及分析 能使网站上自动循环的背景音乐代码如下&#xff1a; <audio src"music.mid" autostart"true" loop"true" hidden"true…

【小梦C嘎嘎——启航篇】C++四大类型转换

&#x1f60e; 前言&#x1f64c;C四大类型转换什么是类型转换C语言中的类型转换为什么C要嫌弃C语言的类型转换&#xff1f;自行搞一套呢&#xff1f;C强制类型转换1、static_cast2、reinterpret_cast3、const_cast4、dynamic_cast为什么要支持向下转呢&#xff1f; RTTI 总结撒…

RabbitMQ工作模式(4) - 路由模式

概念 路由模式&#xff08;Routing&#xff09;是 RabbitMQ 中的一种消息传递模式&#xff0c;也称为直连模式。它允许生产者将消息发送到一个交换机&#xff0c;并指定一个或多个路由键&#xff08;routing key&#xff09;&#xff0c;交换机根据路由键将消息路由到与之匹配的…

实验7:路由冗余协议HSRP配置管理(课内实验以及解答)

实验目的及要求&#xff1a; 理解首跳冗余协议&#xff08;FHRP&#xff09;的工作原理&#xff0c;掌握热备份路由器协议 (HSRP)&#xff08;思科私有协议&#xff09;原理和配置。能够实现网络终端设备虚拟网关的配置和网络故障的灵活切换&#xff0c;完成相应网络的联通性测…

多模态大语言模型综述

去年以来&#xff0c;我们见证了以 GPT-4V 为代表的多模态大语言模型(Multimodal Large Language Model&#xff0c;MLLM)的飞速发展。为此我们对综述进行了重大升级&#xff0c;帮助大家全面了解该领域的发展现状以及潜在的发展方向。 MLLM 发展脉络图 MLLM 脱胎于近年来广受…

【Redis 开发】缓存雪崩和缓存击穿

缓存问题 缓存雪崩解决方案 缓存击穿互斥锁逻辑时间基于互斥锁解决缓存击穿问题基于逻辑过期方式解决缓存击穿问题 缓存雪崩 缓存雪崩是指在同一时间段&#xff0c;大量的缓存key同时失效或者Redis服务器宕机&#xff0c;导致大量请求到达数据库&#xff0c;带来巨大压力 解决…

Qt | QAbstractButton 抽象类

QAbstractButton 类中的属性 ①、autoExclusive:bool 访问函数:bool autoExclusive() const; void setAutoExclusive(bool); 描述了按钮的自动排他性,若启用了该属性,则属于同一父部件的可选中按钮的行为, 就好像是在同一排他性组中的按钮一样。除了单选按钮,默认为关…