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 ...
随机推荐
- Spark详解(01) - Scala编程语言
Spark详解(01) - Scala编程语言概述 Scala官网:https://www.scala-lang.org/ 什么是Scala 从英文的角度来讲,Scala并不是一个单词,而是Scala ...
- python之路45 初识django框架
纯手撸web框架 1.web框架的本质 理解1:连接前端与数据库的中间介质 理解2:socket服务端 2.手写web框架 1.编写socket服务端代码 2.浏览器访问响应无效>>> ...
- ZROI3
题解 ZROI3 T1 与<滑动窗口>类似,用单调队列维护 #include <queue> #include <cstdio> #include <cstr ...
- Openmp Runtime 库函数汇总(下)——深入剖析锁🔒原理与实现
Openmp Runtime 库函数汇总(下)--深入剖析锁原理与实现 前言 在本篇文章当中主要给大家介绍一下 OpenMP 当中经常使用到的锁并且仔细分析它其中的内部原理!在 OpenMP 当中主要 ...
- Strapi入门记--01创建项目,账户,测试表,测试接口
Strapi 是什么 中文文档地址 Strapi 是一个开源的无头 CMS,开发人员可以自由选择他们喜欢的工具和框架,并允许编辑使用他们的应用程序的管理面板来管理和分发他们的内容.基于一个插件系统,S ...
- XAMPP-Apache-解决跨域
很 意外啊,我这篇文章竟然说因为有广告,所以审核不通过.牛逼,我接着发,我看哪来的广告.审核有广告是NT技术写的逻辑,还是没脑子的审核员审核的. 因为在做项目的时候,会有很多项目要进行热更测试,可有些 ...
- 【开源】libserial_parse_text:命令行解析的基础库
借助五一假期,写了一个命令行解析的基础库,一般可用于串口命令解析.TCP命令解析等等. 具有以下几种特点: 不涉及到具体硬件, 纯软件协议,与具体硬件分离. 支持不定长命令行,逐个字符解码,可以支持不 ...
- GPIO-CH32x系列芯片GPIO使用注意事项
一.特殊IO使用注意事项 芯片型号:CH32F203C8T6.CH32V203C8T6 特殊IO:PC13.PC14.PC15 注意事项说明: 1.PC13~PC15的IO功能受限,速度必须限制在2M ...
- STL关联式容器使用注意、概念总结
引入 继上文 STL序列式容器使用注意.概念总结 继续总结关联式容器的概念以及一些使用事项. 关联式容器与容器适配器 基础容器 STL 中的关联式底层容器:RB tree, hash table,可以 ...
- BST 插入节点传新版本(原痛恨JavaScript每一天 __ 没有指针)
2023年2月2日更新 perform代码上传到GitHub了,新方法比老方法慢,不建议在生产环境使用 GitHub地址:https://github.com/Dou-fugan/webDemo/tr ...