简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home> Web Front-end> Vue.js> body text

How vue3 solves the problem of excessive loading in each scene

WBOY
Release： 2023-05-18 15:25:06
forward
1764 people have browsed it

    vue3 Common Excess

    1. Loading when the page is first opened

    It is easiest to load content when the page is first opened. Adding content to

    through the root directory

    index.html

    fileis excessive content

     
     
    加载中......
    Copy after login

    When the vue instance is created, it is mounted into the div ofid='app'through the.mount()method, and theloadingcontent inside will be replaced;

    2. When routing is switched, asynchronous component loading

    • If the route is switched excessively, you need to understand one first, the built-in component ofvue3< Suspense>;

    • ## provides2 slots????;

    • #default: A content to be loaded;

    • #fallback: A content to be displayed after loading;

      •
      Copy after login

    Similarly: (Switching of asynchronous components)
    Copy after login

    Asynchronous components can also be added using the same method

    Add transition Animation

    To add transition animation, you need to first understand

    vue3built-in components and ????

    : Very simple, only oneis displays the component, which can be used to switch components, such as:

    Copy after login

    : Content inserted inShow/Hide Add transition animation and splice it through thename attributeclass Such as:

    Copy after login

    Set the style Pass the

    nameattribute here

    ##anime-enter-active

    : Transition state (sethide=> showtransition time, etc. Parameters)anime-leave-active
    : transition state (settingshow=> hidetransition time and other parameters)
    anime-enter -from
    =>anime-enter-toHide=> Showstart and end stylesanime-leave-from
    = >anime-leave-toShow=> HideStarting and ending styles

    Combined????