Vue异步组件

转载自  Vue异步组件

在大型应用中,我们可能需要将应用分割成小一些的代码块,并且只在需要的时候才从服务器加载一个模块。为了简化,Vue 允许你以一个工厂函数的方式定义你的组件,这个工厂函数会异步解析你的组件定义。Vue 只有在这个组件需要被渲染的时候才会触发该工厂函数,且会把结果缓存起来供未来重渲染。例如:

Vue.component('async-example', function (resolve, reject) {setTimeout(function () {// 向 `resolve` 回调传递组件定义resolve({template: '<div>I am async!</div>'})}, 1000)
})

如你所见,这个工厂函数会收到一个 resolve 回调,这个回调函数会在你从服务器得到组件定义的时候被调用。你也可以调用 reject(reason) 来表示加载失败。这里的 setTimeout 是为了演示用的,如何获取组件取决于你自己。一个推荐的做法是将异步组件和 webpack 的 code-splitting 功能一起配合使用:

Vue.component('async-webpack-example', function (resolve) {// 这个特殊的 `require` 语法将会告诉 webpack// 自动将你的构建代码切割成多个包,这些包// 会通过 Ajax 请求加载require(['./my-async-component'], resolve)
})

你也可以在工厂函数中返回一个 Promise,所以把 webpack 2 和 ES2015 语法加在一起,我们可以写成这样:

Vue.component('async-webpack-example',// 这个 `import` 函数会返回一个 `Promise` 对象。() => import('./my-async-component')
)

当使用局部注册的时候,你也可以直接提供一个返回 Promise 的函数:

new Vue({// ...components: {'my-component': () => import('./my-async-component')}
})

如果你是一个 Browserify 用户同时喜欢使用异步组件,很不幸这个工具的作者明确表示异步加载“并不会被 Browserify 支持”,至少官方不会。Browserify 社区已经找到了一些变通方案,这些方案可能会对已存在的复杂应用有帮助。对于其它的场景,我们推荐直接使用 webpack,以拥有内建的被作为第一公民的异步支持。

处理加载状态

2.3.0+ 新增

这里的异步组件工厂函数也可以返回一个如下格式的对象:

const AsyncComponent = () => ({// 需要加载的组件 (应该是一个 `Promise` 对象)component: import('./MyComponent.vue'),// 异步组件加载时使用的组件loading: LoadingComponent,// 加载失败时使用的组件error: ErrorComponent,// 展示加载时组件的延时时间。默认值是 200 (毫秒)delay: 200,// 如果提供了超时时间且组件加载也超时了,// 则使用加载失败时使用的组件。默认值是:`Infinity`timeout: 3000
})

注意如果你希望在 Vue Router 的路由组件中使用上述语法的话,你必须使用 Vue Router 2.4.0+ 版本。

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/327756.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

文章中文字乱码问题解决办法集合

乱码问题 测试步骤&#xff1a; 1、我们可以在首页编写一个提交的表单 <form action"/e/t" method"post"><input type"text" name"name"><input type"submit"> </form>2、后台编写对应的处理类 …

.NET开源两年之后社区贡献如何

微软在 2014 年开源了 .NET 核心框架&#xff0c;欢迎社区贡献代码。2015 年&#xff0c;一位 .NET 开发者分析了开源一年之后的社区贡献。2016 年年底又到了&#xff0c;这位开发者再次发表文章&#xff0c;分析了 .NET 开源两年之后的情况。 这一次他分析了 15 个 .NET 开源项…

java把控件跑挂了_Java代码动态修改 ConstraintLayout 内控件布局的辅助类

##上图ConstraintUtil.javaimport android.support.annotation.IdRes;import android.support.constraint.ConstraintLayout;import android.support.constraint.ConstraintSet;import android.transition.TransitionManager;/*** Created by xiaolei on 2017/9/8.*/public cla…

json vs obj

var obj {a: Hello, b: World}; //这是一个对象&#xff0c;注意键名也是可以使用引号包裹的 var json {"a": "Hello", "b": "World"}; //这是一个 JSON 字符串&#xff0c;本质是一个字符串在 JavaScript 语言中&#xff0c;一切都…

Vue动态组件

转载自 Vue动态组件 在动态组件上使用 keep-alive 我们之前曾经在一个多标签的界面中使用 is 特性来切换不同的组件&#xff1a; <component v-bind:is"currentTabComponent"></component> 当在这些组件之间切换的时候&#xff0c;你有时会想保持这些组…

ASP.NET Core Kestrel部署HTTPS

ASP.NET Core配置 Kestrel部署HTTPS。现在大部分网站已经部署HTTPS&#xff0c;大家对于安全越来越重视。 今天简单介绍一下ASP.NET Core 部署HTTPS&#xff0c;直接通过配置Kestrel。大家也可以通过前置Nginx来部署HTTPS。 下面直接进入正题。 新建项目并添加引用 新建一个ASP…

Mybatis+mysql动态分页查询数据案例——分页工具类(Page.java)

package cn.bdqn.mhouse.util;import java.util.ArrayList; import java.util.List;import cn.bdqn.mhouse.entity.House;/*** * * 项目名称&#xff1a;mhouse * 类名称&#xff1a;Page * 类描述&#xff1a; 分页的工具类 * 创建人&#xff1a;Mu Xiongxiong …

JSON 和 JavaScript 对象互转

JSON 和 JavaScript 对象互转 要实现从JSON字符串转换为JavaScript 对象&#xff0c;使用 JSON.parse() 方法&#xff1a; var obj JSON.parse({"a": "Hello", "b": "World"}); //结果是 {a: Hello, b: World}要实现从JavaScript 对…

java 时钟 算法分析_java实现时钟方法汇总

import java.awt.Dimension;import java.text.SimpleDateFormat;import java.util.Calendar;import java.util.Date;import java.util.Timer;import java.util.TimerTask;import javax.swing.JFrame;import javax.swing.JLabel;import javax.swing.JPanel;//第一种比较推荐&…

Java IO: 网络

转载自 Java IO: 网络译文链接 作者: Jakob Jenkov 译者: 李璟(jlee381344197gmail.com) 校对&#xff1a;方腾飞 Java中网络的内容或多或少的超出了Java IO的范畴。关于Java网络更多的是在我的Java网络教程中探讨。但是既然网络是一个常见的数据来源以及数据流目的地&#xf…

配置phython环境

参考资料 https://www.runoob.com/python/python-install.html https://www.cnblogs.com/huangbiquan/p/7784533.html Python下载 Python最新源码&#xff0c;二进制文档&#xff0c;新闻资讯等可以在Python的官网查看到&#xff1a; Python官网&#xff1a;https://www.py…

ASP.NET Core 之 Identity 入门(三)

前言 在上一篇文章中&#xff0c;我们学习了 CookieAuthentication 中间件&#xff0c;本篇的话主要看一下 Identity 本身。 最早2005年 ASP.NET 2.0 的时候开始&#xff0c; Web 应用程序在处理身份验证和授权有了很多的变化&#xff0c;多了比如手机端&#xff0c;平板等&…

玩物得志Java笔试题_代码规范利器-CheckStyle

本期内容分为五个部分&#xff0c;阅读时长预估7分钟&#xff1a;使用背景CheckStyle使用意义CheckStyle安装与使用CheckStyle检查配置示例落地使用情况及效果使用背景玩物得志目前还处在一个狂奔业务的时期&#xff0c;开发一般都全力支撑业务的快速奔跑&#xff0c;没有太多的…

Json交互处理

Json交互处理 JSON简介 JSON(JavaScript Object Notation, JS 对象标记) 是一种轻量级的数据交换格式&#xff0c;目前使用特别广泛。采用完全独立于编程语言的文本格式来存储和表示数据。简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。易于人阅读和编写&#xff0…

基于Spring boot,使用idea方便地切换启动环境

https://blog.csdn.net/mate_ge/article/details/78624579 基于Spring boot&#xff0c;使用idea方便地切换启动环境 原创martsforever 最后发布于2017-11-24 14:49:30 阅读数 17615 收藏 展开 在真实项目开发的时候&#xff0c;一定会有多个环境&#xff0c;这里以开发环境和…

Mybatis+mysql动态分页查询数据案例——条件类(HouseCondition)

package cn.bdqn.mhouse.entity; /*** * * 项目名称&#xff1a;house * 类名称&#xff1a;HouseCondition * 类描述&#xff1a; 动态查询房屋信息的条件类 * 创建人&#xff1a;Mu Xiongxiong * 创建时间&#xff1a;2017-3-10 下午9:39:21 * 修改人&…

Java IO: 字节和字符数组

转载自 Java IO: 字节和字符数组译文链接 作者&#xff1a; Jakob Jenkov 译者&#xff1a;homesick 内容列表 从InputStream或者Reader中读入数组从OutputStream或者Writer中写数组 在java中常用字节和字符数组在应用中临时存储数据。而这些数组又是通常的数据读取来源或…

利用 async amp; await 的异步编程

一、异步编程的简介 通过使用异步编程&#xff0c;你可以避免性能瓶颈并增强应用程序的总体响应能力。 Visual Studio 2012 引入了一个简化的方法&#xff0c;异步编程&#xff0c;在 .NET Framework 4.5 和 Windows 运行时利用异步支持。编译器可执行开发人员曾进行的高难度工…

1分钟学会python_快速入门:十分钟学会Python

类Python支持有限的多继承形式。私有变量和方法可以通过添加至少两个前导下划线和最多尾随一个下划线的形式进行声明(如“__spam”&#xff0c;这只是惯例&#xff0c;而不是Python的强制要求)。当然&#xff0c;我们也可以给类的实例取任意名称。例如&#xff1a;然&#xff0…