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新特性的使用的更多相关文章

  1. Vue3 新特性

    一.vue3 为什么要重写 两个主要原因考虑重写vue新版本主要功能: 1.主流浏览器对新的JavaScript语言特性的普遍支持. 2.当前Vue代码库随着时间的推移而暴露出来的设计和体系架构问题. ...

  2. 尝鲜 vue3.x 新特性 - CompositionAPI

    0. 基础要求 了解常见的 ES6 新特性 ES6 的导入导出语法 解构赋值 箭头函数 etc... 了解 vue 2.x 的基本使用 组件 常用的指令 生命周期函数 computed.watch.r ...

  3. vue3.0新特性以及进阶路线

    Vue3.0新特性/改动 新手学习路线  ===> 起步 1. 扎实的 JavaScript / HTML / CSS 基本功.这是前置条件. 2. 通读官方教程 (guide) 的基础篇.不要 ...

  4. 通过10个实例小练习,快速熟练 Vue3.0 核心新特性

    Vue3.0 发 beta 版都有一段时间了,正式版也不远了,所以真的要学习一下 Vue3.0 的语法了. GitHub 博客地址: https://github.com/biaochenxuying ...

  5. Vue3.0新特性

    Vue3.0新特性 Vue3.0的设计目标可以概括为体积更小.速度更快.加强TypeScript支持.加强API设计一致性.提高自身可维护性.开放更多底层功能. 描述 从Vue2到Vue3在一些比较重 ...

  6. 简单梳理下 Vue3 的新特性

    在 Vue3 测试版刚刚发布的时候,我就学习了下 Composition API,但没想到正式版时隔一年多才出来,看了一下发现还是增加了不少新特性的,在这里我就将它们一一梳理一遍. 本文章只详细阐述 ...

  7. react 16.8版本新特性以及对react开发的影响

    Facebook团队对社区上的MVC框架都不太满意的情况下,开发了一套开源的前端框架react,于2013年发布第一个版本. react最开始倡导函数式编程,使用function以及内部方法React ...

  8. Vue 3.0 有哪些新特性值得我们提前了解

    一.迎接 Vue 3.0 简介 ​ Vue.js 作者兼核心开发者尤雨溪宣布 Vue 3.0 进入 Beta 阶段. 已合并所有计划内的 RFC 已实现所有被合并的 RFC Vue CLI 现在通过 ...

  9. SQL Server 2014 新特性——内存数据库

    SQL Server 2014 新特性——内存数据库 目录 SQL Server 2014 新特性——内存数据库 简介: 设计目的和原因: 专业名词 In-Memory OLTP不同之处 内存优化表 ...

  10. ElasticSearch 5学习(10)——结构化查询(包括新特性)

    之前我们所有的查询都属于命令行查询,但是不利于复杂的查询,而且一般在项目开发中不使用命令行查询方式,只有在调试测试时使用简单命令行查询,但是,如果想要善用搜索,我们必须使用请求体查询(request ...

随机推荐

  1. Python Kconfiglib初次学习

    1 参考 kconfiglib库官方介绍:kconfiglib · PyPI Kconfiglib源码:GitHub - ulfalizer/Kconfiglib: A flexible Python ...

  2. Java中Elasticsearch 实现分页方式(三种方式)

    目录 ES 简介 ES 的特点: 一.from + size 浅分页 二.scroll 深分页 scroll删除 三.search_after 深分页 ES 简介 Elasticsearch 是一个基 ...

  3. python进阶之路4基本运算符、格式化输出

    内容回顾 PEP8规范 代码编写规范及美观 python注释语法 平时养成写注释的习惯 1.警号 2.三个单引号 3.三个双引号 常量与变量 1.变量语法结构 变量名 赋值符合 数据值 2.底层原理 ...

  4. Java环境搭载的低级错误

    关于Java环境搭载的问题 在按照狂神的教程在Dos窗口执行了javac hello.java后在执行java hello报错"" 发现路径文件夹内并未生成class文件 检查了环 ...

  5. C++练习-1 简单输入输出

    首先完整代码如下: #include <iostream> #include <string> using namespace std; int main() { int on ...

  6. python3使用requests模块发https请求,提示caused by ssl error, can't connect to https url because the ssl module is not available

    Q: python3使用requests模块发https请求,提示caused by ssl error, can't connect to https url because the ssl mod ...

  7. 新一代自动化利器-DrissionPage

    熟悉的小伙伴知道我的工作有相当一部分是自动化,在探索相关的技术上一直没停下脚步,我痛恨selenium.playwright的非标准内核机制,也曾对clicknium引进了新的问题无语,以及接口爬取数 ...

  8. [NOI Online 提高组]冒泡排序

    题目 洛谷等许多 \(OJ\) 都有 思路 考试题,今日无意又做了一次 然后发现自己读错题了······ 其实询问时只要 \(k\) 轮排序后的逆序对个数并不需要真的对序列进行更改 很显然 \(k\) ...

  9. 【RocketMQ】Dledger日志复制源码分析

    消息存储 在 [RocketMQ]消息的存储一文中提到,Broker收到消息后会调用CommitLog的asyncPutMessage方法写入消息,在DLedger模式下使用的是DLedgerComm ...

  10. 小程序动态class与动态style的写法:

    style = "opacity :{{num}}" class = "vp {{opacity == 0 ? 'opacity1':''}}"