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 ...
随机推荐
- mysql 1366 - Incorrect string value
mysql 插入中文时报错 mysql 1366 - Incorrect string value... 这是由于 数据库 / 表 / 表字段 编码格式未设置好造成的 解决办法: 1.查看编码是否符 ...
- 如何用 30s 给面试官讲清楚什么是 Token
引言 前文介绍了 Session-Cookie 的认证过程,简单回顾下基本步骤: 客户端(浏览器)向服务器发送用户名和密码 服务器验证通过后,创建 Session 对象,在 Session 中保存该用 ...
- 【Dubbo3终极特性】「流量治理体系」一文教你如何通过Dubbo-Admin实现动态进行流量隔离机制
背景信息 如果一个应用有多个版本在线上同时运行,部署在不同环境中,如日常环境和特殊环境,则 可以使用标签路由对不同环境中的不同版本进行流量隔离,将秒杀订单流量或不同渠道订单流量路由到特殊环境,将正常的 ...
- Python自动批量修改文件名称的方法
本文介绍基于Python语言,按照一定命名规则批量修改多个文件的文件名的方法. 已知现有一个文件夹,其中包括班级所有同学上交的作业文件,每人一份:所有作业文件命名格式统一,都是地信1701_姓 ...
- 程序员大杀器?带你玩转ChatGPT
作者:京东零售 栗鸿宇 ChatGPT简介 ChatGPT是一款基于AI技术的机器人对话软件,它能够与用户进行智能化的聊天对话,帮助用户解决日常生活中的问题,为用户提供丰富的信息和服务.它集成了海量知 ...
- P5_认识小程序项目的基本组成结构
项目结构 了解项目的基本组成结构 pages 用来存放所有小程序的页面 utils 用来存放工具性质的模块(例如:格式化时间的自定义模块) app.js 小程序项目的入口文件 app.json 小程序 ...
- python3中,len()、isalpha()、isspace()、isdigit()、isalnum()实例
# 实例:使用while循环 import string s1 = input('请输入一个字符串:\n') letters = 0 space = 0 digit = 0 others = 0 i ...
- Zabbix监控阿里云SLB操作指引
1. SLB介绍 阿里云负载均衡(Server Load Balancer,简称SLB)是云原生时代应用高可用的基本要素.通过将流量分发到不同的后端服务来扩展应用系统的服务吞吐能力,消除单点故障并提升 ...
- 【模板】AC自动机(二次加强版)
模板 \(Problem:\) 求 \(n\) 个模式串在文本串中出现的次数 \(templete:\) \(Luogu5357\) \(Code\) #include<cstdio> # ...
- JZOJ 5346. 【NOIP2017提高A组模拟9.5】NYG的背包
题目 分析 很神奇的贪心 \(Code\) #include<cstdio> #include<algorithm> using namespace std; typedef ...