>>分享Web前端开发技术,并对孙卫琴的《精通Vue.js:Web前端开发技术详解》提供技术支持 书籍支持  卫琴直播  品书摘要  在线测试  资源下载  联系我们
发表一个新主题 开启一个新投票 回复文章 您是本文章第 15941 个阅读者 刷新本主题
 * 贴子主题:  Vue 3新特性RFC-0026异步组件的全新API 回复文章 点赞(0)  收藏  
作者:flybird    发表时间:2024-04-19 06:00:13     消息  查看  搜索  好友  邮件  复制  引用

总结
引入用于定义异步组件的专用API。

示例
import { defineAsyncComponent } from "vue"

// simple usage
const AsyncFoo = defineAsyncComponent(() => import("./Foo.vue"))

// with options
const AsyncFooWithOptions = defineAsyncComponent({
  loader: () => import("./Foo.vue"),
  loadingComponent: LoadingComponent,
  errorComponent: ErrorComponent,
  delay: 200,
  timeout: 3000
})

动机
根据RFC-0008:渲染功能API更改中引入的更改,现在在Vue 3中将普通功能视为功能组件。现在必须通过API方法显式定义异步组件。

详细设计
简单用法

import { defineAsyncComponent } from "vue"

// simple usage
const AsyncFoo = defineAsyncComponent(() => import("./Foo.vue"))

defineAsyncComponent 可以接受一个返回一个解析为实际组件的Promise的加载函数.

如果返回值是一个ES模块, 那么 模块的默认 导出将被自动认为是组件。
与2.x的区别:请注意,加载器函数不再像2.x中那样接收resolve和reject参数-必须始终返回Promise。
对于依赖于自定义resolve并且reject在加载程序函数中的代码,转换非常简单:

// before
const Foo = (resolve, reject) => {
  /* ... */
}

// after
const Foo = defineAsyncComponent(() => new Promise((resolve, reject) => {
  /* ... */
}))

可选项

import { defineAsyncComponent } from "vue"

const AsyncFooWithOptions = defineAsyncComponent({
  loader: () => import("./Foo.vue"),
  loadingComponent: LoadingComponent,
  errorComponent: ErrorComponent,
  delay: 100, // default: 200
  timeout: 3000, // default: Infinity
  suspensible: false, // default: true
  onError(error, retry, fail, attempts) {
    if (error.message.match(/fetch/) && attempts <= 3) {
      retry()
    } else {
      fail()
    }
  }
})

delay 和 timeout 选项和2.0版本表现完全一致
与2.x的区别:

component 选项已经被新的loader 选项代替, 新的loader选项接受和以上示例用法同样的加载函数。
在2.x版本中,一个带有选项的异步组件被这样定义
() => ({ component: Promise<Component> // ...other options })

///在3.0版本中

defineAsyncComponent({ loader: () => Promise<Component> // ...other options })
2.x版本中的 loading 和 error 选项已经被重命名为loadingComponent 和errorComponent 以便更加精确的描述行为。
重试控制
全新的 onError 选项提供了一个Hook在加载出错时进行自定义的重试操作

const Foo = defineAsyncComponent({
  // ...
  onError(error, retry, fail, attempts) {
    if (error.message.match(/fetch/) && attempts <= 3) {
      // retry on fetch errors, 3 max attempts
      retry()
    } else {
      fail()
    }
  }
})

需要注意点是retry/fail 和Promise中的resolve/reject 非常类似:他们的其中之一必须被调用才能继续进行处理。

和<Suspense>一起使用
默认情况下,3.x版本的异步组件是可暂停的。这意味着如果一个异步组件的父元素链中有一个 <Suspense> , 这个异步组件将会被视为该<Suspense>的一个异步依赖项。 在那种情况下, 加载状态将会被 <Suspense>控制,组件自身的 loading, error, delay 和timeout选项将会被无视。

异步组件也可以通过在选项中标明suspensible: false来退出默认的<Suspense>控制,始终自行控制其加载状态。

采纳策略
语法转换是机械性的,可以通过代码被执行。挑战在于确定哪些简单功能应被视为异步组件。可以使用一些基本的方法:
返回对于.vue文件的动态 import 调用的箭头函数
返回一个拥有一个动态import调用作为自己component 属性的对象的箭头函数
请注意,这可能没办法完全覆盖目前的使用。

在兼容版本中中,可以检查功能组件的返回值并警告旧版异步组件使用情况。这应该涵盖所有基于Promise的用例。
唯一无法轻易检测到的情况是使用手动resolve/reject而不是返回Promise的2.x异步组件。在这种情况下,将需要手动升级,但是这种升级相对较少。


程序猿的技术大观园:www.javathinker.net
  Java面向对象编程-->集合(上)
  JavaWeb开发-->Web运作原理(Ⅰ)
  JSP与Hibernate开发-->域对象在持久化层的四种状态
  Java网络编程-->基于UDP的数据报和套接字
  精通Spring-->创建综合购物网站应用
  Vue3开发-->绑定表单
  10个开发者经常问的JavaScript面试题(附答案解析)
  vue30道面试题
  web前端工程师面试题的知识考点盘总
  前端面试官指导前端面试攻略
  Vue2.0与Vue3.0主要区别总结
  vue 项目中使用loadsh 的 防抖(debounce)和节流(throttle...
  Vue自定义指令的用法
  前端图片压缩库images-quickly-compress
  jQuery 遍历过滤:缩小搜索元素的范围
  HTML DOM Li 对象
  jQuery UI 范例 - 选择条目(Selectable)
  CSS3 多列布局
  HTML 区块:div和span元素
  HTML 表格标签的用法
  DTD - XML 构建模块
  更多...
 IPIP: 已设置保密
树形列表:   
1页 0条记录 当前第1
发表一个新主题 开启一个新投票 回复文章


中文版权所有: JavaThinker技术网站 Copyright 2016-2026 沪ICP备16029593号-2
荟萃Java程序员智慧的结晶,分享交流Java前沿技术。  联系我们
如有技术文章涉及侵权,请与本站管理员联系。