前言包含用法+原理+慎用,建议收藏慢慢阅读。总体来说,生命周期的变化差别不大,但大部分名字都需要+on,功能也差不多。要使用Vue3复合API,需要先导入它;Vue2选项API可以直接调用,如下图。//vue3//vue2常见的生命周期表如下。Vue2.xVue3beforeCreateNotneeded*createdNotneeded*beforeMountonBeforeMountedonMountedbeforeUpdateonBeforeUpdateupdateonUpdatedbeforeDestroyonBeforeUnmountdestroyedonUnmounted提示:setup围绕beforeCreate和created生命周期钩子运行,因此无需显式定义它们。多根节点Vue3支持多根节点组件,即分片。在Vue2中,我们在写页面的时候,需要将组件包裹在
中,否则会报错。... ... Vue3,我们可以包含组件多个根节点可以节省一层写法,niceeeee!... ... 异步组件Vue3提供了Suspense组件,允许程序异步等待components在渲染底层内容时,比如loading,让用户体验更流畅。要使用它,请在您的模板中声明它并包含两个命名插槽:默认和回退。Suspense确保在异步内容加载完成时显示默认插槽,并使用回退插槽作为加载状态。 true如果要在setup中调用异步请求,需要在setup前加上async关键字。这时候你会被警告使用asyncsetup()没有悬念边界。解决方法:在调用当前组件的父页面外面包裹一层Suspense组件。TeleportVue3提供了Teleport组件,用于将部分DOM移动到Vue应用程序之外的位置。比如项目中常用的Dialog组件。
结合APIVue2吧是一个选项API(OptionAPI),一个逻辑会分散在文件的不同位置(data、props、computed、watch、lifecyclefunctions等),导致代码可读性差,需要跳转上下文件位置。Vue3组合API(CompositionAPI)很好的解决了这个问题,可以把相同逻辑的内容写到一起。除了增强代码的可读性和内聚性之外,组合的API还提供了更完善的逻辑复用性解决方案,例如
正在加载...