vue学习记录---vue3.0学习
Posted yuf_ricky
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue学习记录---vue3.0学习相关的知识,希望对你有一定的参考价值。
1、异步组件
在vue3.0除了同步组件,还添加了异步组件的定义与使用, 使用关键字defineAsyncComponent进行定义异步组件, defineAsyncComponent可以接受一个返回 Promise
的工厂函数。Promise 的 resolve
回调应该在服务端返回组件定义后被调用。你也可以调用 reject(reason)
来表示加载失败。
案例一
let asyncComp = Vue.defineAsyncComponent(() => { return new Promise(resolve => { setTimeout(() => { resolve({ template: `<button @click=\'testEvent\'>button</button>`, methods: { testEvent() { console.log(\'yes\') } } }) }, 3000) }) }) const app = Vue.createApp({ template: `<div>this is test <asyncComp/></div>`, components: { asyncComp } }) app.mount(\'#root\')
案例二
import { defineAsyncComponent } from \'vue\' const AsyncComp = defineAsyncComponent(() => import(\'./components/AsyncComponent.vue\') ) app.component(\'async-component\', AsyncComp)
注意:以上defineAsyncComponent里的方法是用在路由中的方法
案例三
import { defineAsyncComponent } from \'vue\'
const AsyncComp = defineAsyncComponent({
// 工厂函数
loader: () => import(\'./Foo.vue\')
// 加载异步组件时要使用的组件
loadingComponent: LoadingComponent,
// 加载失败时要使用的组件
errorComponent: ErrorComponent,
// 在显示 loadingComponent 之前的延迟 | 默认值:200(单位 ms)
delay: 200,
// 如果提供了 timeout ,并且加载组件的时间超过了设定值,将显示错误组件
// 默认值:Infinity(即永不超时,单位 ms)
timeout: 3000,
// 定义组件是否可挂起 | 默认值:true
suspensible: false,
/**
*
* @param {*} error 错误信息对象
* @param {*} retry 一个函数,用于指示当 promise 加载器 reject 时,加载器是否应该重试
* @param {*} fail 一个函数,指示加载程序结束退出
* @param {*} attempts 允许的最大重试次数
*/
onError(error, retry, fail, attempts) {
if (error.message.match(/fetch/) && attempts <= 3) {
// 请求发生错误时重试,最多可尝试 3 次
retry()
} else {
// 注意,retry/fail 就像 promise 的 resolve/reject 一样:
// 必须调用其中一个才能继续错误处理。
fail()
}
}
})
注意:当异步组件加载完成后,就可以当作普通的组件来使用了
以上是关于vue学习记录---vue3.0学习的主要内容,如果未能解决你的问题,请参考以下文章