vue3新特性的使用
1、Suspense组件:等待异步组件时渲染一些额外内容,让应用有更好的用户体验
例:
<template>
<div class="app">
<h3>我是App组件</h3>
<Suspense>
<template v-slot:default>
<Child/>
</template>
<template v-slot:fallback>
<h3>加载中.....</h3>
</template>
</Suspense>
</div>
</template>
2、defineAsyncComponent:延迟加载组件
<component :is="components.get('Form'+formname(store.getters.getapplyData.formid[0]))"></component>
// 需要加载的组件集合
const components = markRaw(new Map<string, any>())
for(let i=0;i<5;i++){
components.set(
`Form${i+1}`,
defineAsyncComponent(() => import('../../components/Form'+(i+1)+'.vue'))
)
}
3、markRaw:当渲染具有不可变数据源的大列表时,跳过响应式转换可以提高性能
const components = markRaw(new Map<string, any>())
for(let i=0;i<5;i++){
components.set(
`Form${i+1}`,
defineAsyncComponent(() => import('../../components/Form'+(i+1)+'.vue'))
)
}
将components变成不响应式的,提高性能
vue3新特性的使用的更多相关文章
- Vue3 新特性
一.vue3 为什么要重写 两个主要原因考虑重写vue新版本主要功能: 1.主流浏览器对新的JavaScript语言特性的普遍支持. 2.当前Vue代码库随着时间的推移而暴露出来的设计和体系架构问题. ...
- 尝鲜 vue3.x 新特性 - CompositionAPI
0. 基础要求 了解常见的 ES6 新特性 ES6 的导入导出语法 解构赋值 箭头函数 etc... 了解 vue 2.x 的基本使用 组件 常用的指令 生命周期函数 computed.watch.r ...
- vue3.0新特性以及进阶路线
Vue3.0新特性/改动 新手学习路线 ===> 起步 1. 扎实的 JavaScript / HTML / CSS 基本功.这是前置条件. 2. 通读官方教程 (guide) 的基础篇.不要 ...
- 通过10个实例小练习,快速熟练 Vue3.0 核心新特性
Vue3.0 发 beta 版都有一段时间了,正式版也不远了,所以真的要学习一下 Vue3.0 的语法了. GitHub 博客地址: https://github.com/biaochenxuying ...
- Vue3.0新特性
Vue3.0新特性 Vue3.0的设计目标可以概括为体积更小.速度更快.加强TypeScript支持.加强API设计一致性.提高自身可维护性.开放更多底层功能. 描述 从Vue2到Vue3在一些比较重 ...
- 简单梳理下 Vue3 的新特性
在 Vue3 测试版刚刚发布的时候,我就学习了下 Composition API,但没想到正式版时隔一年多才出来,看了一下发现还是增加了不少新特性的,在这里我就将它们一一梳理一遍. 本文章只详细阐述 ...
- react 16.8版本新特性以及对react开发的影响
Facebook团队对社区上的MVC框架都不太满意的情况下,开发了一套开源的前端框架react,于2013年发布第一个版本. react最开始倡导函数式编程,使用function以及内部方法React ...
- Vue 3.0 有哪些新特性值得我们提前了解
一.迎接 Vue 3.0 简介 Vue.js 作者兼核心开发者尤雨溪宣布 Vue 3.0 进入 Beta 阶段. 已合并所有计划内的 RFC 已实现所有被合并的 RFC Vue CLI 现在通过 ...
- SQL Server 2014 新特性——内存数据库
SQL Server 2014 新特性——内存数据库 目录 SQL Server 2014 新特性——内存数据库 简介: 设计目的和原因: 专业名词 In-Memory OLTP不同之处 内存优化表 ...
- ElasticSearch 5学习(10)——结构化查询(包括新特性)
之前我们所有的查询都属于命令行查询,但是不利于复杂的查询,而且一般在项目开发中不使用命令行查询方式,只有在调试测试时使用简单命令行查询,但是,如果想要善用搜索,我们必须使用请求体查询(request ...
随机推荐
- Python Excel 追加数据
xlutils 库的安装 你好,我是悦创. 前面我分享了 Excel 的读写:Python 实现 Excel 的读写操作:https://bornforthis.cn/column/pyauto/au ...
- [Untiy]贪吃蛇大作战(五)——游戏主界面
接着上一节: 4.AI蛇的设计 这里AI蛇大部分代码都可以参照主角的代码,我这里的实现其实还可以进行改进.基本原理就是蛇创建之后给蛇一个随机方向的单位向量,AI蛇的蛇头添加一个比蛇头大两三倍大小的碰撞 ...
- MySQL 嵌套子查询 with子句 from子查询 in子查询 join组合
一.适用场景和方法 (1)适用场景 考虑查询过程中是否存在以下情况: 查询某些数据时需要分组才能得到,某些数据不需要分组就能得到或者分组条件不同: 查询某些数据时需要where条件,某些列不需要whe ...
- Grafana 系列文章(二):使用 Grafana Agent 和 Grafana Tempo 进行 Tracing
️URL: https://grafana.com/blog/2020/11/17/tracing-with-the-grafana-cloud-agent-and-grafana-tempo/ ✍A ...
- 对象的反序列化流_ObjectInputStream类
对象的反序列化流_ObjectInputStream类 ObjectInputStream反序列化流,将之前使用ObjectOutputStream序列化的原始数据恢复为对象. 构造方法 public ...
- 【Django drf】视图层大总结 ViewSetMixin源码分析 路由系统 action装饰器
目录 九个视图子类 视图集 继承ModelViewSet类写五个接口 继承 ReadOnlyModelView编写2个只读接口 ViewSetMixin源码分析 查找as_view方法 setattr ...
- 12月23日内容总结——csrf跨站请求伪造、校验策略、相关装饰器,auth认证模块及相关操作,拓展auth_user表
目录 一.csrf跨站请求伪造 概念引入 概念讲解 二.csrf校验策略 概念讲解 form表单操作csrf策略 ajax请求csrf策略 三.csrf相关装饰器 四.auth认证模块 五.auth认 ...
- .NET遍历二维数组-先行/先列哪个更快?
上周在.NET性能优化群里面有一个很有意思的讨论,讨论的问题如下所示: 请教大佬:2D数组,用C#先遍历行再遍历列,或者先遍历列再遍历行,两种方式在性能上有区别吗? 据我所知,Julia或者pytho ...
- MySQL 中的事务理解
MySQL 中的事务 前言 原子性 一致性 持久性 并发事务存在的问题 脏读 幻读 不可重复读 隔离性 事务的隔离级别 事务隔离是如何实现 可重复读 和 读提交 串行化 读未提交 可重复读解决了幻读吗 ...
- python70 前端框架之vue js的集中循环方式、key值的解释、input事件、v-model双向数据绑定、过滤案例、事件修饰符、按键修饰符、表单控制
js的几种循环方式 v-for可以循环的变量 可以循环的: 数组.数组带索引 对象.对象带key.value 字符串 字符串带索引 数字.数字带索引 <!DOCTYPE html> < ...