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:延迟加载组件

  1. <component :is="components.get('Form'+formname(store.getters.getapplyData.formid[0]))"></component>
  1. // 需要加载的组件集合
  2. const components = markRaw(new Map<string, any>())
  3. for(let i=0;i<5;i++){
  4. components.set(
  5. `Form${i+1}`,
  6. defineAsyncComponent(() => import('../../components/Form'+(i+1)+'.vue'))
  7. )
  8. }

3、markRaw:当渲染具有不可变数据源的大列表时,跳过响应式转换可以提高性能

  1. const components = markRaw(new Map<string, any>())
  2. for(let i=0;i<5;i++){
  3. components.set(
  4. `Form${i+1}`,
  5. defineAsyncComponent(() => import('../../components/Form'+(i+1)+'.vue'))
  6. )
  7. }

将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. 2022CSP-J线上游记

    写在前面 安徽CSP取消了-- 去年CSP考炸的我本来想今年一雪前耻(bushi),结果-- T1 第一题大毒瘤! 首先观察数据可以分类如下两种情况: \(a = 1\) 直接输出\(1\),retu ...

  2. MySQL join语句怎么优化?

    在MySQL的实现中,Nested-Loop Join有3种实现的算法: 1. Simple Nested-Loop Join:简单嵌套循环连接 2. Block Nested-Loop Join:缓 ...

  3. MAC上好用的解压工具

    macOS:11.1 想在 macOS 上打开一个压缩文件,有原生的归档实用工具或 BetterZip.Keka.The Unarchiver 等诸多选择.最近,又有国内独立开发者为我们带来了一款新作 ...

  4. npm 启动项目报错 Cannot find module '\@babel\compat-data\data\corejs3-shipped-proposals',解决办法

    最近升级了系统的node ,webpack 等等,然后今天打开项目,突然启动不起来了~~ 报错信息如下: Module build failed (from ./node_modules/babel- ...

  5. Python爬取cnnvd

    利用python监控CNNVD上面的新出漏洞实例,可以配合邮箱推送获取最新的漏洞情报 爬取cnnvd import requests from bs4 import BeautifulSoup imp ...

  6. 822. 走方格(acwing)

    题目: 先讲变量 n:右下角的x值 m:右下角的y值 ans:答案(有几种可能) a数组:用来存储向下和向右的动作. x:所在的位置的x值 y:所在位置的y值 x1:下一步可以走到位置的x值 y1:下 ...

  7. SpringBoot Test Junit 联用

    需要导入SpringBoot test和junit的包 @RunWith(SpringRunner.class) @SpringBootTest(classes = PiYuApplication.c ...

  8. 通过URL地址将图片保存到本地

    今天一朋友问我如何通过URL地址将图片保存下来. 特地找了些资源,实现了一下代码: using System; using System.Drawing; using System.Drawing.I ...

  9. 浏览界面servlet实现

    <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding= ...

  10. Module理解及使用

    ES6的模块化设计思想是静态化,也就是说,在编译的时候确定模块的依赖关系,以及输出输出入的变量.而CommonJS和AMD模块都是在运行时确定的.ES6的模块不是对象,而是通过export显示指定输出 ...